Micro Frontends: Microservices for the Frontend
Micro frontends are what we get when we bring the microservice approach to the front end. In other words, a micro frontend is made of components owned by different teams — that can be deployed independently. These components are assembled to create a consistent user experience.
With a micro frontend, no single team owns the UI in its entirety. Instead, every team owns a piece of the screen, page, or content. For example, one team might be responsible for the search box, while another might code suggestions based on users' tastes.
Why microservices in the micro frontends is important?
When we are working on big and distributed web applications, it makes sense to build a microservice-based architecture. Using this type of architecture, the monolith team gets split to separate independent teams, which helps improve scalability, code complexity, etc., as each team works on a specific feature of the application separately.
The same concept applies to the front-end architecture, and the it will be part of the same individual team that builds the microservice backend. So, each team will own a unique business component and develop it end to end, starting from the user interface to the database layer.
Principles of micro-frontend:
Micro-frontends have certain principles that allow for scaling an app.
Domain-driven development: The whole app can be broken down based on different domains or business logic. It can be further broken down into sub-features.
End-to-end autonomy with a domain: A micro app can be built independently and using different stacks. The team will have complete freedom over this part, and they will hold responsibility for it.
Innovation without affecting other parts: Sub-apps can function independently.
Independent deployment: Each team can develop and deploy artifacts at their own speed.
Isolate failure: The rest of the app will work even if one microfeature goes down.
Advantages of micro-frontend:
The following features make micro-frontend architecture more resilient:
Easier and faster feature development.
Easier to add, change, or remove any code.
Easier to test.
Operational overhead: Instead of managing a single frontend application, a micro-frontend application involves creating and managing separate infrastructure for all teams.
Consistent user experience: To maintain a consistent user experience, the child applications must use the same UI components, CSS libraries, interactions, error handling, and more. Maintaining consistency in the user experience can be difficult for child applications that are at different stages in the development lifecycle.
Frameworks to implement Micro-frontends:
Steps to implement Micro frontend:
Defining micro-frontends in your application.
Communicating with micro-frontends.
Sample Code Snippet: https://github.com/kolaparthisrini/Microfrontends
A micro-frontend architecture also simplifies the process of building complex frontend applications by allowing you to manage small, independent components.