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 \u201cmicro frontends\u201d because Portals allows development teams to deliver modular user experiences in a way that\u2019s completely isolated and self-contained from the rest of the application. Mobile micro frontends with Portals<\/a> 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\u2019s completely invisible to the user. However, many people who are new to Portals will ask, what\u2019s 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\u2019ll cover the specific differences and explain more about why micro frontend is the right term for what Portals is able to deliver.<\/p>\n <\/p>\n Web Views are included in the stock iOS<\/a> and Android<\/a> 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.<\/p>\n 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.<\/p>\n Secondly, while Web Views offer some basic integration with the native app\u2019s 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\u2019s 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\u2019ve probably all experienced times when we can tell (quite obviously) that we\u2019re suddenly interacting with a web application inside of a mobile app. While some of the best applications from the world\u2019s top engineering teams\u2014like Apple Music, Amazon, and Netflix\u2014do 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.<\/p>\n Let\u2019s dive into the specific ways that Portals is unique\u2014and superior\u2014to a traditional Web View when it comes to embedding web content in a native app.<\/p>\n 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\u2014even 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\u2019t an issue.<\/p>\n 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\u2019s 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\u2019re familiar with Ionic, you may know that one of our most popular open source projects is Capacitor<\/a>, 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.<\/p>\n Finally, part of how Ionic Portals earns the term \u201cmicro frontend\u201d 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\u2019s 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.<\/p>\n To sum it up, Portals<\/a> is not your granddaddy’s Web View. It\u2019s more akin to the types of embedded web experiences that you\u2019ll 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\u2019re not sure how it will work for you, give it a try and see for yourself<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 \u201cmicro frontends\u201d because Portals allows development teams to deliver modular user experiences in […]<\/p>\n","protected":false},"author":50,"featured_media":4435,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"31","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"554334","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/not-your-granddaddys-webview\/227849","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,123],"tags":[255,68,227],"class_list":["post-4434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-perspectives","tag-micro-frontends","tag-mobile-development","tag-portals"],"acf":[],"yoast_head":"\nA refresher on Web Views<\/h2>\n
Network delays and disruptions<\/h3>\n
Limited integration with the native UI<\/h3>\n
Portals vs. Traditional Web Views<\/h2>\n
Locally hosted content and stellar performance<\/h3>\n
Deep native access and seamless integration<\/h3>\n
Independent updates and continuous delivery<\/h3>\n
Not sure? Give it a try and see for yourself.<\/h2>\n