Introduction
Hey readers. We are creating many web applications with so many features and new technologies emerging. Another term that has caught the attention of many developers is the micro front end.
The term micro frontend first came up in 2016. It basically extends the concept of microservices to the front end where different front-end applications can be integrated to create one single application as a whole.
What is Micro Frontend?
Every project has certain requirements. Depending upon the requirements, the application can be small having some features or can be quite big containing multiple features/modules.
Suppose you have an application that has two or three features according to the requirement then you can manage such an application in a single app with a smaller team.
But if you have a requirement where the application is supposed to be a part of another extensive application. This extensive application will have multiple modules and cannot be managed by a single team. In that case, you will have numerous small applications built for certain requirements, and then all these small applications are integrated together for the extensive application. There will be one main application that will load all these different small applications in a single place. All these different applications will be maintained by different teams.
It is not compulsory that all these small applications will be built on a single framework. Depending on the requirement, one can be built on Angular, react, or Vue.
Let us understand with a simple example. You have a main application containing one header, one main container, and a footer. I created the header in react, the container in angular, and the footer in Vue. Now I integrated all these three applications into the main application. This is the concept of the micro front end. (This is just an example. Generally, we do not create a micro frontend for such a use case.)
The micro front end is becoming a trend for creating web-based applications.
Following are some of the tools that you can use for creating a micro frontend application:
- Single SPA
- Frintjs
- Webpack and module federation
- PuzzleJS
You can learn about these tools here.
Features
Firstly, each application will represent a specific feature that can be implemented in a different framework.
Secondly, each application will be maintained by a separate team.
Every application is independent of the other. Hence no logic is shared between them.
Advantages
Small Application: All the applications will be small. Hence easier to understand.
Independent Applications: All the applications will be independent of each other. Therefore, different teams can easily work on them.
Testing: You can test a small application easily.
Faster Development: When teams are working in parallel, apps can be developed faster.
Upgrading: Working with a micro frontend, you can easily update or upgrade an application. Any updates made in one application will not affect the other applications
Disadvantages
Testing: Testing the whole application can be very complex. You can easily test them independently but would be really difficult to test the whole application as one.
Deployment: The deployment of each application will be different which will require extra effort.
Large team: You require a large team that can be split and every team can work on one application. With a small team, it will be very difficult to maintain different applications independently.
Consistency: To have a good user experience, it is important to keep everyone on the same page. With the different teams working on different applications, it can be difficult to keep consistency.
Conclusion
As a matter of fact, each technology comes with its own advantages and disadvantages. It totally depends on the requirements. If you need a big application with multiple modules and a large team that can work on different applications, then you can work with the concept of micro-frontend. Do not use it for a small application.
Finally, for more such updates, please follow our LinkedIn page- FrontEnd Studio.
