What is Micro Frontend: Composability in Mobile App Development

Micro frontend definition

Micro frontend architecture has created a paradigm shift in the way modern apps are built—it has made application development faster and more efficient across teams and organizations.

Micro frontends take the monolithic application architecture delivering your entire frontend experience from a single codebase, and divide that monolith into many different features. These features can then be built, updated, and deployed in parallel—and reused across multiple applications.

A micro frontends example

A chat interface might be built and deployed as a micro frontend that lives in a dozen or more separate applications. This chat interface would be built and maintained by a single team whose single focus is on the chat experience. When you build a new application that needs a chat feature, you simply incorporate this micro frontend experience—no need to build an entirely new chat solution for that individual app.

This micro app development approach to building frontends offers a number of benefits, including:

• Faster development of new applications, by reusing existing functionality.
• Easier scaling of large projects by allowing multiple teams to work in parallel.
• Improved UX by having each team focus on doing one thing well.

The current micro frontend model borrows concepts from past innovations on the enterprise frontend—including Self-Contained Systems and Frontend Integration for Verticalized Systems—and brings together these approaches while unifying frontend and backend applications through a mediated API layer.

Historically, micro frontend architectures have been very popular with modern web applications, where it’s relatively straightforward and easy to enable this kind of approach. 

However, doing this in a native mobile app is not so easy.

Key Characteristics of a Micro Frontend

Don’t let your business get fooled into creating a new frontend that only looks like a micro frontend. 

As you research development platforms that deliver micro frontend capabilities, you need to be certain that each developer’s resulting applications will be able to deliver a true micro frontend experience. You don’t want to invest time and resources into this transformation project to then discover that the solution that you’ve built lacks the true flexibility and composability your business needs.

By definition, any micro frontend or micro app should deliver the following capabilities:

Micro App Reusability and portability

The micro apps within a micro frontend should offer plug-and-play capabilities, making it easy for those components to be utilized across multiple applications, or to be seamlessly integrated with new applications without disrupting the larger app ecosystem.

The ability to communicate with other components

Micro app tooling provides a container that enables communication with multiple components at once—enabling clear and separate lines of communication.

Seamless integration that makes these connections virtually invisible to users

An app built with micro frontends may be composed of many smaller, independent parts, but it shouldn’t appear that way to the user. Any good micro frontend will be able to deliver a seamless user interface that can seamlessly accommodate many different user journeys while providing a consistent user experience.

Team-based ownership of micro applications

One of the biggest architectural shifts enabled by micro frontends is the ability to empower development teams to take control of the app or apps within their domain. This team-based approach makes it easier to isolate code between applications, supporting portability, and it enables those teams to support individual experiences through optimized application technology and design. From the example above, having a single team own the chat experience allows them to focus and improve by doing one thing well.

Further reading

Now that you know the basics of what a micro frontend is, learn more about them and other composable mobile app development solutions:

Superapps: A New Way of Thinking About Composable Mobile App Development

Building Micro Frontends with Stencil

Feature Modules: The Answer to Building Micro Frontends for Mobile?

Micro Frontends for Mobile with Ionic Portals

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.