Micro-frontend Pratical guide - Part 1

What is Micro-frontend?

It is an advanced FE concept used when the codebase is very big and large number of developers actively working on it.

Micro-frontend architecture become famous after the success of microservices architecture where the backend is divided into different services each having its API layer, and database.

Micro-frontend architecture allows us to build a single application from multiple separate builds (commonly known as modules). These modules can be technology agnostic, team can work and deploy independently.

For example - A Ecommerce company can have multiple teams working on a single web application

1. Home screen team - specializes on loading home screen content lighting fast
2. Cart team - focus on cart journey and so on.

Do you need to have Microfrontend architecture in your side projects?

Yes and No. If you want to learn then yes, there is no other way you can get practical knowledge. Will it have any performance or other impact? - No. Setting it up as architecture is time-consuming and an extra burden of maintaining different repositories.

Pros

• Scalability - Useful for complex codebase with large numbers of developers. Easier to scale project by incremently growing team working on individual module
• Allow usage of multiple framework - Each team can choose its framework based on team expertise.
• Faster development and deployment - Each team can work on its module independent of other team. Once a module is updated or deployed, it will be available in the main app without the need for redeployment of main app.
• Maintainability - Easy to maintain module as compared to complete app.

Cons

• Complexity - Setting up micro-frontend architecture is complex and time-consuming.
• Team Dependency - If a module is down then corresponding feature will be down affecting the complete app.
• Team Communication - Communication gap can lead to duplicate methods, functionality across different modules

Implementation Guide is available here