Not Your Granddaddy’s Web View
How Micro Frontends With Portals Offer a Better Way to Embed Web Content in a Native Mobile App
Ionic Portals is a revolutionary method of delivering web-based micro frontend experiences within any native iOS or Android mobile application. We use the term “micro frontends” because Portals allows development teams to deliver modular user experiences in a way that’s completely isolated and self-contained from the rest of the application. Mobile micro frontends with Portals integrate seamlessly with the native application, offering easy access to every feature on the device, while providing performance optimized experiences with full offline capabilities. On top of that, they can be updated and deployed independent of the host application and distributed across multiple applications at the same time. Software engineering leaders and enterprise development teams love this approach because it helps them scale development while saving time. Best of all, it’s completely invisible to the user. However, many people who are new to Portals will ask, what’s the difference between Portals and a traditional Web View? After all, both allow you to embed web content in a native mobile app. In this post, we’ll cover the specific differences and explain more about why micro frontend is the right term for what Portals is able to deliver.
A refresher on Web Views
Web Views are included in the stock iOS and Android development kits as the default method of embedding web content in a native mobile application. Out of the box, Web Views allow you to display live web content inside of a native application using a web browser like Safari or Chrome. However, unlike opening up the Chrome app on your phone and visiting a website, the browser window and URL path are not visible to the user when interacting with web content via a Web View. For many use cases, this type of approach is sufficient for displaying small amounts of web content inside of a mobile application. However, there are a number of factors that make Web Views less appealing and limit their usefulness.
Network delays and disruptions
For one thing, the content displayed in a Web View is loaded from a remote web server, so it is subject to network delays and disruptions. Changes in network connectivity can provide a poor mobile experience, including inability to access data when the device is not connected to the network.
Limited integration with the native UI
Secondly, while Web Views offer some basic integration with the native app’s navigation controls, more advanced native integrations are not possible without intensive engineering efforts. For example, if the embedded web experience needs to interact with the mobile device’s camera, file storage, biometrics, and other native controls, getting it to work in a Web View will be challenging. For those two reasons, most embedded web experiences are simple one-way experiences, where all of the interaction is inside the Web View and there is little interaction with the rest of the app. We’ve probably all experienced times when we can tell (quite obviously) that we’re suddenly interacting with a web application inside of a mobile app. While some of the best applications from the world’s top engineering teams—like Apple Music, Amazon, and Netflix—do it quite well, many Web View experiences leave much to be desired. So, how does Portals address these limitations? When we designed Portals, we thought about all of the limitations of embedding web content inside a native mobile app and sought to deliver a solution that would address each one. Our ultimate goal was to create an experience that was so seamless, it would be invisible to any user.
Portals vs. Traditional Web Views
Let’s dive into the specific ways that Portals is unique—and superior—to a traditional Web View when it comes to embedding web content in a native app.
Locally hosted content and stellar performance
Web content delivered with Ionic Portals is hosted on-device, not via a remote web server. This approach has two major benefits. First, locally hosted content dramatically reduces latency and improves performance. One Portals customer, a major international airline, found that simply switching from a Web View to Portals boosted performance by 2-3 seconds—even over WiFi. The relative performance benefits when network speeds are low would be significantly greater. Ultrafast performance is another reason that most users will not be able to tell the difference between web content delivered with Portals and native portions of the app. Second, it ensures that the app will function even when not connected to a network. Lack of offline access is a telltale sign of web hosted content. With Portals, network disruptions aren’t an issue.
Deep native access and seamless integration
Ionic Portals provides access to every single native device feature, along with seamless integration with the native UI. When a user is interacting with a Portals experience inside of your native app, they should not feel the slightest difference. In fact, this is a major difference between Portals and a traditional Web View. For anyone who’s tried it, you know that getting web content to integrate with the rest of the native app is not easy, and most attempts result in clunky and obvious transitions between the native and web portions of the app. This is one of the main reasons people avoid Web Views in the first place. Thankfully, the Ionic team has years of experience making this kind of handoff work. If you’re familiar with Ionic, you may know that one of our most popular open source projects is Capacitor, a cross-platform runtime for building native iOS and Android applications with the Web. Capacitor has been around for over four years, and powers mission-critical apps for thousands of businesses around the world, including major brands like Burger King, GE, Blue Cross Blue Shield, H&R Block, and more. The same technology that powers Capacitor also powers Portals. This is our secret sauce, so to speak. Suffice it to say, we know a thing or two about getting your web layer to talk to the native device, and all of that intellectual property has gone into the Portals experience. As a developer using Portals, the net effect is that accessing native features and navigation within a Portals experience is very easy. We offer a rich library of pre-built plugins and integrations for accessing the most popular device features and we can help you develop custom integrations if needed. The handoffs between web and native are extremely smooth, such that your users should not notice a difference.
Independent updates and continuous delivery
Finally, part of how Ionic Portals earns the term “micro frontend” is that it is fully self-contained from the rest of the application, allowing you to update a specific Portals experience without having to publish a new version of the native application and disrupting the development team’s release process. This is enabled through a feature called Live Updates. Essentially, you can push hot code updates directly to a specific micro frontend at any time. The updates are loaded in the background whenever the app is refreshed. No app store downloads or manual updates required. This is great for speeding up development and improving app quality by making sure that any bugs are fixed ASAP, without requiring a full application rebuild and deployment.
Not sure? Give it a try and see for yourself.
To sum it up, Portals is not your granddaddy’s Web View. It’s more akin to the types of embedded web experiences that you’ll find in popular apps like Apple Music, Amazon, Netflix, and other top-rated apps that use web content in a way that is virtually invisible to users. If you’re not sure how it will work for you, give it a try and see for yourself.
