Micro Frontend
Micro Frontend?—
1.??????is a client-side architecture design.
2.?????individual components or pages are hosted in separate domains.
3.?????And integrated into the main?shell app?(host application)
following characteristics:
1.??????Owned by one team
o???It doesn't mean that only a single team will be responsible for fixing all the bugs
o???always reach out to the team, not an individual with any question about the business subdomain
o???Everyone in the team has to transfer personal pieces of knowledge to the rest through documentation and knowledge sharing sessions.
2.?????Independent implementation
o???The team?that owns the?micro app?has the whole freedom in choosing a tech stack.?
3.?????Independent deployment
o???Each of the?micro-apps?has?to be deployed individually as they are hosted in a separate domain
4.?????Decoupling
o???Micro-apps?have to be as decoupled as possible
5.?????Fault tolerance
o???One of the biggest benefits of?micro frontend?architecture is reliability
o???if one of the?micro-app?is broken, the other will still be functioning.
o???Let’s imagine Facebook, if one of the features, like groups, is shot down, users will still be able to chat with friends.
领英推荐
ways of implementing?micro frontend?architecture
1.??????Micro frontend as a component.
a.?????micro-app is more granular.?
b.?????It acts as a widget that is reusable across applications.
c.??????The problem with this approach is it makes the micro app couple more tightly.?????
2.?????Micro frontend as a page.
a.?????With this approach, we dedicate a separate page per each of our?micro-app
b.??????It allows us to avoid tight dependency between parent-child, compared to the previous approach.
c.??????As a result, it is the most common way of implementing micro frontend architecture.
Ways to share the data between micro app
1.?????One of the biggest challenges in architecting?micro frontend?is data sharing.
2.?????The data can have different types like?state,?UI components,?or?utility functions.
3.????Make sure that your micro app is not containing a?data store state.
4.?????it has to be separated into a shareable data layer.
5.????There are also some other ways of communication between micro apps
a.?????we can utilize our browser storage capabilities: It may be either?localStorage,?sessionStorage,?cockies?for storing session data or user metadata, or some more complex data structures in?indexedDB.
b.????In addition to that, you may also establish the data transfer between the micro-apps simply through the router?query params.
?Module Federation?plugin, provided by webpack. It supports local and remote modules to build independently and asynchronously.
We combine all these sources together to create a workable prototype, which we can iterate over. The quickest way is to use NX cli, which will generate all the boilerplates for us.