Microfrontends (singular: microfrontend) is a front-end web development pattern in which a single application may be built from disparate builds. It is analogous to a microservices approach but for client-side single-page applications written in JavaScript. The only difference between microservices and microfrontend is that we don't need to have a main user interface for our project.
This means: Microfrontends is an architectural and organizational style (NOT a specific technology!!!) in which the front-end of the app is decomposed into individual, loosely coupled “micro apps” that can be built, tested, and deployed independently. Just like in the world of microservices where the backend is chopped into individual services.
?
Why Microfrontends ,What's the Difference?
The image below shows the difference between the microfront end and other structures. I can't say that using the micro frontend is the best method, but without a doubt, This is a much simpler structure, Independent of the type of technology in JavaScript frameworks, Easy development and creation of independent groups. The architecture used in Microfrontend is Domain-Driven.
?
On the other hand, In the final meeting, the group determines the main structure of the project, and the teams must follow that structure so that rewriting in the code or code optimization does not decrease.
If I want to give an example in this regard: Team 1 uses font awesome icons and Team 2 uses Icon Material.
How to Use Microfrontends
?
Sample code in Ts:
?
