Micro Front Ends

Many of us must be aware of Microservices Architecture. I would say that MicroFront ends are the replica of the same concept in the Web Application. Why should backend have all the fun 🤣? The Current Trend is to build a feature-rich and powerful web Application.

You can think of Micro Front End as multiple small features that are owned by different Teams. Each Team could have different Business problems to solve. A-Team could be there which is cross-functional and develops standards that should be followed by the other Teams. People from the mission Team could also contribute to this central Team isn’t it perfect in the Front End-World 🤩. Yes!!! It’s Wonderful to work on this.

In this fast-moving and quickly changing Technology in Frontend, it gives flexibility for the web Application to adapt to newer technologies, you could build a feature in React and others could be built using Vue or Angular.

Here are some benefits of Micro Frontend –

• Support code and style isolation, an individual development team can choose their technology The development and deployment speed is very fast.
• It helps in Continuous Deployment.
• The testing becomes very simple as well as for every small change, don’t have to go and touch the entire application.
• Front-end renovation — Improving new things becomes easier.
• High Resilience and Better Maintenance.
• Support code and style isolation.

Design Pattern Used and Inter-App Communication-

Good architecture is one in which micro frontends are decoupled and do not need to frequently communicate. Following the guidelines above about applications versus parcels helps you keep your micro frontends decoupled. Route-based single-spa applications inherently require less inter-app communication.

There are following things by which we can achieve this inter-app communication in Micro frontends -

1. Functions, components, logic, and environment variables.
2. API data
3. UI state

So these Functions components logics are known as widgets in the Micro frontends world and you can reuse these widgets in any repo. Isn’t it great that you can expose your code in the form of Widget and people across your company can plug-in that widget and reuse that easily? So the Design pattern used here is the Compositional Design Pattern.

The Above Green, Red, and Blue could be Isolated features inside the Web Application, so we will apply the Composition of these into one Web Application.

This would end the concern for the developers and the companies regarding restricted to one Technology as both can evolve together along with any new Frameworks comes in.

Thank you for taking the time to read my article.