Micro Frontend: What you should know

What is Micro Frontend?

Worthy of note is that micro-frontend is an architectural concept.

Micro-frontend architecture is a design approach in which a front-end app is broken down into separate sand-alone, semi-independent “microapps” working loosely together. As with micorservices, micro-frontend tend to tow that direction.

As apps development get bigger and loads of functionalities and features are being added to it, it becomes a pain trying to maintain and add new features to it. The aim of micro-frontend is to split you app into smaller stand-alone components or say features which are into integrated together at the end into a single app.

Consider a B2C (Business to Customer) platform on a large scale enterprise, we could isolate the user authentication flow from the user dashboard itself also the admin authentication from the admin portal itself and so on. Hence encouraging standalone features for a broader application.

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface.

Why should you adopt micro-frontend?

• Freedom of framework choice: Micro-frontend allows you to use different technologies and framework across the application. You could choose to use ReactJs for a part and VueJs for the other while the other also uses Angular :).
• No more Chaotic Codebases: Micro-frontend reduces the risk of a chaotic codebase.
• Independence: Each feature of a micro-frontend are independent and such does not have to depend on the each other. By splitting your application into independent stand-alone, this opens the possibility of having multiple teams working on the application. Each team can be responsible for one feature of the application.
• Micro-frontend helps to avoid the risk of having all features shut out at once.
• Dynamic Deployments: While using micro-frontend approach in building your application, you get to deploy each part independently. This can be incredibly powerful, and opens up many new distribution possibilities for your application.
• Performance and Scalability: The fact that the features are stand-alone makes it easier to scale faster and have a positive effect on product performance as load time are reduced and faster.
• Cross functional teams: With micro-frontend, your company can have a workgroup made up of employees from different functional areas who collaborate to reach a stated objective which is to produce a scalable and and highly performant application.

Conclusion

In conclusion, before you go the micro-frontend route for your app, be sure to confirm that code-splitting is not what is actually meant for you as in the real sense micro-frontend is not meant to be use for all applications. For large scale enterprise application, micro-frontend should likely be your go to so as to decompose your building process.

For reference or an in-depth detail of what micro-frontend is, check out https://micro-frontends.org/.