All we know about Microservices, which helps to develop features individually. Same way, we can do it with frontend applications. I mean, your application can be divided into various small individual applications. Aka Micro Frontends.
We can develop the main parent app which will contain the authentication and routing implemented, and we can then proceed to adding multiple child apps which work independently and can be loaded on either the same or different pages.
There are two main ways to build micro-frontends:
-
Feature Base:
This is most commonly used division
For example: we can divide features of the dashboard into three micro-frontends. -
Domain base:
Apps can be divided as per domain
for example, we can divide the app in Core domain, payments domain, profile domain, ...
Micro-frontend frameworks:
Since each MFEs are placed in different locations, we need to have a base which will render the application. Here are few ways :
- Webpack module federation example
- NGINX
- iFrames
- Web components
- H-include library
- Single SPA library
Communication
As mentioned before, the micro-frontends are completely independent of each other, but we can have them communicate with each other on certain events by using a library like an Eev event bus.
Main Advantages:
- Team scalability: There would be isolated teams of code, and so we don't share a runtime, we don't rely on a shared state or global variables.
- Reusability
- Technology Agnosticism: each team should be able to choose and upgrade their stack without any coordination with other teams.
Disadvantages:
- Complexity
- No Standards
Refs:
Top comments (0)