Micro Frontends for Mobile with Ionic Portals

In the early days of mobile app development, software engineers built apps in a monolithic architecture. This process brought the frontend and backend code—and their subsequent teams—together in a single tier application. It combined UI, business logic, and data access.

Monolithic architecture comes with its own set of challenges. As teams scale up, working together in unison, shipping quickly, and responding to customer requests becomes difficult if all teams are working in a single tier structure.

The microservice framework came out of the challenges monolithic architectures present. Microservices take the backend and break them up into a loosely coupled collection of services segmented by business unit or feature tier. This allows teams to work more independently to build, test, and deploy their services on the backend without stepping on each other's toes. Microservices brought development teams into a new age of app development.

Micro frontends break modern web apps into pages and feature slices.

From Microservices to Micro Frontends

Modern app development has made front-end web apps more powerful but more complex as a result. The complexity bred a new way of thinking about developing front-end features in mobile applications. With the advent of microservices came micro frontends—which brings the microservice concept of splitting up the backend into feature slices to the front-end. 

Micro frontends break modern web apps into pages and feature slices. Each feature is owned end-to-end by a single team or business unit. That allows them to work tightly coupled across the entire stack end-to-end and still come together as a team to deploy a cohesive experience.

With modern web apps, the end-user still gets a cohesive experience, but the architecture underneath and the way that the teams work together is different. 

Benefits of Micro Frontends

As complex as micro frontends are, they come with their own set of benefits — for example:

Scale development by working in parallel

Micro frontend architecture allows teams and businesses to scale development by working in parallel, moving multiple goals and KPIs forward. Working in parallel also removes natural blockers that come from the monolithic approach to application development.

The great thing about Capacitor is that it allows you to use whatever web stack you want. If you’re building with Tailwind, Bootstrap, Svelte, Angular, React, Vue, it’s all supported on Capacitor. 

Reuse assets across applications

Micro frontends are not only scalable, they are reusable. Reuse code, assets, and components across new and old applications. Micro frontends remove the need to develop the same search experience, login functionality, or product catalogue every time.

Accelerate development of new applications and experiences

Because micro frontend assets are reusable, teams and businesses can accelerate the development of new apps and push them to the market faster. Features and experiences can be updated independently from each other, leading to faster updates of old web applications and quicker builds of new web applications.

The benefits of micro frontends are great for desktop web sites and apps, but how can you bring the concept of micro frontends to mobile apps?

Bringing Micro Frontends to Mobile With Embedded Web Apps

Traditional native mobile applications are not set up to support micro frontend architectures in the same way as web applications. For example, because of the way mobile apps are distributed, all of the code must compile down to a single binary. 

That means, whatever part of the app you update has to go through the same build pipeline eventually—and this becomes a critical bottleneck as mobile teams try to scale by working on features in parallel. In contrast, in a web application it is possible to isolate and update a very specific portion of the project without updating the rest of the application.

So how can development teams benefit from the flexibility of web app development in native mobile apps? By bringing the web to mobile. 

Using embedded web experiences that exist within your native mobile project, you can deliver all the features of micro frontends, plus extra benefits like easier access to talent. Let’s explore why your company would want to use embedded web apps to bring micro frontends to mobile.  

Easy to update

Embedded web experiences are meant to be created independently and implemented without needing to update the larger application. Again, teams work separately but in smaller instances like web apps that are truly independent of each other.

Scale development with in-house web talent

Most enterprises have invested in great web developer talent. They have the ability to build web apps, desktop apps, and websites necessary for your company to have a web presence and support the business. Why not scale development efforts by using the web team you already have to help build the mobile apps? 

Web developers are ready to go. They have needed to develop the skills to build mobile optimized experiences likely for years. Responsive design has been a requirement for many years as we have different devices to build for. 

Mobile optimized and invisible to users

Web content performs within a native app seamlessly, providing customers with the same experience as if it were a purely native app. Different devices require different form factors and UX designs. Rather than building unique apps for every single device, web content is optimized to handle any device experience.

Full access to native features

No sacrifice needs to be made when using web versus pure native code. Using modern tooling (more on that below), embedded web apps have full access to native device features like the camera, bluetooth, geolocation, haptics, and others.

While stock Web Views, on the surface, should save engineering teams development time, they could often lead to bigger problems if not developed correctly.

Real-Life Examples of Embedded Web Experiences

It’s incredibly common for businesses—from startups to enterprises—to incorporate web-based experiences inside mobile apps. Popular enterprises like Apple and Netflix use embedded Web Views to accelerate their app development. 

Here are two examples of large enterprise companies who have taken advantage of micro frontend technologies to build and scale their native applications.

Apple Music: Apple Music leverages the best of web and native. On the native side, Apple developed tabs for listening, browsing, searching, and song controls. The rest of the content like the web ads and playlist cards are all the web content. This allows the web developers to quickly and easily update and display changes immediately to the app if a new hit song comes out, for example.

Netflix: Help content, FAQs, and user guides are constantly changing. Netflix uses Web Views to quickly update and push their help content to customers. The help content—also available on their website—only needs to be updated by web developers in one database and the content will be available immediately across all applications without an app update.

How are enterprises embedding web content into native apps today?

Large enterprises are building on top of stock Web Views—which are native web browser components—that Apple and Google provide in their standard SDKs. They are used primarily to display internal and external web content. 

The problem with using stock Web Views is that only low-level APIs are exposed. Meaning, these companies are investing a lot of time and resources to build solutions on top of these stock building blocks. The following are just a few solutions engineering teams need to build to create advanced experiences for users.

Communication between web and native layer. Engineers using stock Web Views need to create and implement a pathway to send data back and forth. They would also need to develop the process of handling authentication in cookies.

Managing native elements. Permission dialogue boxes, navigation, and load all have to be implemented and managed with stock Web Views. Engineers would also need to develop handling errors—what happens when something doesn’t load correctly on the web, native, or both.

Updating web experience dynamically. How are the applications kept updated in a dynamic fashion? Traditionally, applications would have to go through app store reviews which can take several days. So engineers would have to build mechanisms in their stock Web Views that would point to a server or load the updates remotely.

The difficulty of building solutions on top of stock Web Views

While stock Web Views, on the surface, should save engineering teams development time, they could often lead to bigger problems if not developed correctly. 

Time consuming and costly to maintain. We get at least one major iOS and Android release every year, which means there are bugs and new features to integrate. They would need to make sure these custom Web Views are kept up to date and don’t break with new operating system versions or patches.

Building solutions on top of stock Web Views takes time away from core competencies. Companies like Amazon want to focus on creating the best store experiences for their customers. They don’t want to take the time to build complicated features on top of Web Views.

Security risks and vulnerabilities. Engineering teams need to make sure they are building solutions on top of Web Views that pass data securely and correctly. They have to make sure user data can’t be compromised—a very complicated task.

Lack of native feature access from the web. While engineers can use the standard web APIs like the camera integrated in the stock Web Views, there are some user experience pieces that need to be built in order to provide a really great experience. Some of the building blocks available are low-level, basic, and not up to par with what customers expect.

Lack of granular controls for collaboration between the native and web team. Native teams want to be sure the web teams are building in a sandboxed environment which minimizes the risk of breaking the native features of the app. Native teams also want to be sure that the web teams’ contributions are working properly with the rest of the app. This functionality doesn’t come standard with stock Web Views and needs to be built from scratch.

Ionic Portals: Embedded Web Experiences for Native Mobile Apps

Though using Web Views theoretically save engineering teams time by bringing micro frontends in native apps, building on top of stock Web Views isn’t easy to do and can actually take more time and effort than the benefits allow.

Are engineering teams left with either using clunky stock Web Views or foregoing the ability to embed web content into native apps altogether? No. Ionic developed a new solution: Ionic Portals.

What is Ionic Portals?

Ionic Portals is a secure and extensible Web View for native apps backed and developed by Ionic. It's built for teams that need a more capable and flexible Web View component to enable their web developers to add new features and screens to native apps in a safe, controlled way.

Portals allows you to bring your web experiences into mobile by embedding them into iOS and Android apps. 

You get full access to native components and device APIs (like camera and geolocation). 

We have security experts that make sure we’re following Apple and Google’s guidelines to provide you with a great experience that is also safe for your users' data.

We allow you to have granular control over which sections and which features the web developers can access.

Portals comes with a Live Updates feature that will allow you to update your web based content, images, and more, by bypassing the app store review process. This saves time when critical bugs or A/B changes need to be made daily without having to go through the app store review.

Ionic is known for our enterprise support, advisory, and training services that you don’t get from Apple, Google, or Facebook. We have mobile and security experts available to help.

Your users will experience your app like any other native app. The seamless integration between native and web, native feature access, and offline capabilities will be invisible to the users.

How Portals works

Safely and securely add web-based experiences to your existing native mobile apps. Here’s how it works:

1. Drop the Portals iOS & Android libraries into your app.
2. Choose the web experiences you want to integrate.
3. Set granular permissions that designate which parts of the native app your web teams can touch.
4. Choose from our pre-built native plugins to unlock full native device features in your web-based experiences.
5. Embed the web content into your existing native app.
6. Ship.

We’re excited to provide a solution to bring web experiences into native mobile applications. Ionic Portals gives enterprises the opportunity to build and scale their mobile applications quickly, saving time and development costs. If you’re curious to learn more about Ionic Portals and embedding web content into native apps, check out our Ionic Portals demo and our webinar we presented at the Enterprise App Summit.

If you’re ready to dive into Ionic Portals, sign up or log in to get access or contact an Ionic App Specialist today!

About Ionic

Ionic is a leader in enterprise mobile app development, with 5 million developers worldwide and thousands of enterprise customers who use Ionic to build mission-critical apps for their customers, both external and internal. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.