In this article, we will be discussing micro-frontends.
What are Micro Frontends?
Micro frontends is an architectural approach to frontend development with the idea of thinking of a project as a collection of features independently owned by different teams. Each team has a certain task in which they specialize. A team is cross-functional and develops its features end-to-end, from database to user interface.
Monolithic Architecture Vs Micro Frontends
In Traditional Monolithic Architecture, the whole project is considered a single piece. Monolithic applications are single-tiered, which means multiple components are combined to form a single large application. Consequently, they will have large codebases which makes it difficult to manage over time. If one component must be updated then other components may also require rewriting, and the whole application has to be recompiled and tested again. The process can be time-consuming and may limit the agility and speed of software development teams.
In Micro Frontend Architecture, a project is divided into different features and is assigned to different teams. The individual teams can work on that task independently on the tech they are comfortable with regardless of what other teams are using. Micro frontends make a project less complex and easier to manage.
Benefits of Micro Frontends
Use of Multiple Frameworks
Micro Frontends gives the individual teams the freedom to use any frameworks or languages. Some may have expertise in React or Vue or Angular or other frameworks. Some may be comfortable in JavaScript and some may be comfortable in TypeScript. In the Monolithic approach, an application must be developed using the same language. so, this makes the individuals work with a language they are not comfortable with or in which they lack the expertise. So, Micro Frontend makes it easier for teams to work on a single application with multiple languages and frameworks.
Scalability
Micro frontends allow us to scale the project easily. It allows the teams to grow their part of the frontend portion with incremental updates which will lead to the app scaling at a manageable pace over time with multiple teams responsible for their own designated micro frontend implementations.
Reusability
The components tested and deployed by different teams can be reused by other teams and can also be reintroduced into other projects. This can help in the creation of the company’s own library ecosystem of web components.
Faster Development and Deployment
As each team work independently on different features simultaneously, development becomes faster. Teams can work on their part of the project and deploy it without affecting the entire application.
Makes Application More Maintainable and Stable
As an entire project is split into smaller projects, the project becomes easier to manage. The individual teams can work and manage their part of the project. The split features are mostly independent, so it is easier to ensure that rest of the app remains stable.
Easier Testing
The individual teams work on their features and test them individually. so, it gets easier as you don’t need to test the whole app.
Drawbacks of Micro Frontends
Complexity
Micro frontends must be implemented with proper planning. If it is implemented without a proper plan then it would become too complex for the developers later. The carelessness of one team could hamper the whole project during runtime. Deployment of changes or updates of the application can become more complex when you have multiple micro frontends. It could cause conflict if not deployed in the correct order.
Risk of Lack of Communication
There needs to be good communication between the teams if they are working on individual modules. Communication gaps may lead to the duplication of methods or components which could have been easily reused and save precious time for the developers and company.
Increased Payloads
More technology and frameworks used causes more load on the user’s browser. This causes the browser to load more data from all the different frameworks used in an application and hence makes the browser slow.
Conclusion
In this article, we discussed the micro frontends. It is a process of splitting a project into different modules where different teams can work independently on separate modules. The use case of micro frontend architecture depends on your application. If you have a small project and a small team then micro frontend architecture may not be a feasible method. But if it is a large project with a large team working on it then it would be beneficial to implement micro frontend architecture.
You can find more on micro frontend at https://micro-frontends.org/