Skip to main content

Micro-Frontends with Ionic Portals

Micro frontends break modern web apps into pages and feature slices. Each feature is owned, end-to-end, by a single team or a business unit while still deploying a cohesive experience for the user.

The ability to scale development, reuse assets across applications, and accelerate time-to-market make micro frontend architecture appealing to implement. However, traditional native mobile applications are not set up to support micro frontends in the same way as regular web applications. Because of how mobile apps are distributed through traditional app stores, all of the code must compile down to a single binary.

We can solve this by bringing the web to mobile with Ionic Portals. By using embedded web experiences within your native mobile app, you can enjoy all of the benefits of micro frontends.

What are Ionic Portals?#

Portals leverages Ionic's expertise to add seamless web-based experiences to native mobile apps. By enabling a "Portal", enterprises can enable their native and web teams to better collaborate and bring new and existing web experiences to mobile in a safe and secure way.

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.

With Portals, you can:

  • Extend native apps with web content. Portals enables users to add web-based features and experiences to an existing native mobile app.
  • Access native features via the Capacitor bridge. Safely and securely access features like camera, geolocation, haptics, and more — all from the WebView, to deliver truly native mobile experiences using the web.
  • Safely control access to native features and data. Native development teams get granular control over which parts of the app - including specific features and data - web teams can access when collaborating on a mobile project.
  • Keep pace with platform changes and version updates. Ionic’s solution is fully managed and updated over time. Focus on what matters most - your app.
  • Get access to enterprise-grade support and services. Keep your project on track by working with our mobile experts to resolve any issues occurring during development or while the app is in production.

How do Ionic Portals work?#

Ionic Portals is built on the industry leading Capacitor Web Native app runtime. There's just a handful of steps required to embed web experiences into your native apps:

  1. Drop the Portals iOS and Android libraries into your app.
  2. Choose the web experiences you want to integrate with. Open a Portal within an iOS or Android native app to embed/expose web app.
  3. Set granular permissions that designate which parts of the native app your web teams can touch.
  4. Choose from pre-built native plugins to unlock the full power of the native mobile device in your web-based experiences.
  5. Embed the web content into your existing native app.
  6. Ship!
Get Started with Portals

Signup, Install, and Configure to get started today!