Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “micro-apps” working loosely together. The micro-frontend concept is vaguely inspired by, and named after, microservices. It extends the concepts of microservices to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a microservice architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith.
The idea behind Micro Frontends is to think about a website or web app as a composition of features that are owned by independent teams. Each team has a distinct area of business or mission it cares about and specializes in. A team is cross-functional and develops its features end-to-end, from database to user interface.
Since Micro Frontend is all about dividing a web application into different segments, it is vital to understand what these segments comprise. Typically, these can be broken down into three different types of compositions:
In client-side composition, techniques such as App Shell and client-side scripting are used. This is most viable for loading single-page applications via a library or with help of frameworks such as Luigi.
Edge-side composition leverages CDN capabilities or computation near the edge or on the edge for implementing the Micro Frontend approach.
In the case of server-side composition, a mix of frameworks such as Ara Framework, Piral, Open Components, and Tailor.js, among others, is used for developing the different components of a web application.
When Micro Frontends are handled as single parts of a larger whole, you have the option of choosing from these different compositions.
Some of the key benefits you can get from micro frontends are:
Adopting and implementing the Micro Frontend architecture requires you to adhere to certain yardsticks to be able to reap the maximum benefit out of it. Here are the best practices to bear in mind:
1. Browser Integration
Browser integration for different web components is a must for creating frontend fragments that can be imported into the application. This allows for the different fragments to be bundled together with the back-end components. This practice facilitates a seamless merging of the building process and its visual representation. In turn, this allows for robust decisions regarding which components are to be displayed and how, thus, orchestrating a flow of events between different components
2. Building Custom Elements
Web components comprise element lifecycles callbacks that are responsible for defining the component behavior. Creating Custom elements for these lifecycle callbacks - Attached Callback, Attribute Changed Callback, Created Callback, and Detached Callback - using custom HTML tags, CSS styles, and scripts are essential to be able to categorically define their behavior.
3. Creating Shadow DOMs
4. The Right Frontend Structure
The structure of Micro Frontends is crucial for its operationality. It rests on elements such as the framework, isolation techniques, communication between modules, among others. A meta-framework of Single-SPA is ideal for combining different frameworks without the need for refreshing the page over and over again. Similarly, the use of Bower and NPM components helps in developing shared functionality applications that are live on different URLs. Facilitating communication via a shared events bus is also vital when each component is built on an independent framework.
5. Building Up Slowly
Given the versatility and enhanced functionality of Micro Frontends, it is natural to want to migrate legacy applications with monolithic architecture to this new environment. However, you have to factor in the risks of dependencies and technical challenges in the process. To ensure that you can pay attention to details and resolve issues quickly, it is best to build up slowly, piece-by-piece.
2. Module Federation
5. Single SPA
8. Open Components
10. Mosaic 9
Micro Frontends is a great component model for transforming the way you build software, deliver it progressively and frequently. For large organizations, this can be a game-changer that facilitates continuous delivery. And for fast-growing startups, it presents a bankable choice as a scalable and flexible architecture.
It heavily depends on your business case, whether you should or should not adopt micro frontends. If you have a small project and team, micro frontend architecture is unjustified. At the same time, large projects with distributed teams and a massive number of requests benefit a lot from building micro frontend applications. That is why today, micro frontend architecture is already widely used by many large companies, and that is why you should opt for it too.