Micro frontends is an architectural style for frontend applications based on the concepts of microservices. Luca Mezzalira believes this is a style that will change the future of these applications, but there are associated challenges and architectural decisions that must be made. To help in mitigating these challenges and defining a suitable architecture for an application, he has created a decisions process for embracing a micro frontends architecture.
Mezzalira, VP of architecture at DAZN and author of the book Front-End Reactive Architectures, emphasizes that every time you use a JavaScript framework, you have to adapt to the architectural decisions made in that framework. But you must also create an architecture that is a solid base for your application. During his work on creating a mental model for a micro frontends architecture, he has concluded that there are four pillars that must be decided upfront when starting to work on the architecture: Definition, Composition, Route and Communication.
He emphasizes that each of these pillars plays a fundamental role in the outcome for the project. With these cornerstones set he believes that most decisions emerging as the project progresses will be straightforward. He notes though that these basic decisions may have to be changed later in the project, and this may require a considerable effort in order to keep a coherent architecture.
To define a micro frontend, we must first identify it — is it a horizontal or vertical split? In a horizontal split, different teams work on different frontends, but in the same view. This means they have to coordinate in the composition of a page. In a vertical split, each team is responsible for a specific view which they are in full control of. Mezzalira thinks that adhering to a vertical slicing in general simplifies many of the coming decisions. It minimizes the coordination between teams, and he believes it’s closer to how a frontend developer is used to work. In an earlier blog post, he described how to identify micro frontends in more detail.
When composing micro frontends, there are three options: client-side, edge-side and server-side composition. Client-side means implementing a technique like an application shell for loading single page applications. In edge-side, Edge Side Includes (ESI), or some similar technique on or near the edge is used. For server-side there are many frameworks available and Mezzalira mentions a few: OpenComponents, Piral, and Tailor from Zalando. When using vertical split Mezzalira recommends client-side composition, maybe using Single-SPA. For a horizontal split, all the three type of composition are available.
For routing of views, Mezzalira suggestions are based on the composition strategy: use the application shell for client-side composition, use the web server for server-side composition, and rely on the URL associated with a page for edge-side composition.
When communicating between micro frontends, Mezzalira points out that different frontends are independent units and should be completely decoupled from each other. With multiple micro frontends on the same page, he recommends using custom events or an event emitter library for notification when a user interaction or event happens in the page. For exchanging data between different pages, there a few options available. A web storage solution, based on local or session storage, can be used where a new view can find the information needed when it’s loaded. Another option is for the new view to make a request to the backend to retrieve the information.
Mezzalira concludes by noting that making these four decisions upfront in a project will provide a foundation and guidelines for future challenges in the project, and will simplify dealing with these challenges by limiting options. He introduced his decisions framework at JS-Poland, and the slides can be found in his blog post.
Earlier in 2019, Mezzalira wrote about Micro Frontends, the Future of Frontend Architectures, and later about Adopting a Micro Frontends Architecture. In his blog post describing how to identify micro frontends in applications, he uses DDD and emphasizes the importance of finding the components, both in frontend and backend, that are linked to each other. These components should be encapsulated in a unique subdomain with its own ubiquitous language and owned by a team that is responsible for all parts, from infrastructure up to the frontend.
Cam Jackson, consultant at ThoughtWorks, has written an in-depth article about the concepts of micro frontends and their benefits as well as their downsides. He also included an example of a website where customers can order food for delivery.
In a recently published presentation from GOTO Berlin 2019, Monica Lent talks about Building Resilient Frontend Architecture.
Michael Geers, author of the book Micro Frontends in Action, has created a website dedicated to micro frontends.