You may have heard from your backend team that they are using a microservices approach for building the backend. But what if we can use the same approach in building our frontend?
This way, we can have the benefits of that approach while building our frontend, such as teams being able to work individually, having fewer conflicts on the codebase, and reducing the time to solve those conflicts. And if a bug occurs, we can neglect the blame game among teams. 😜
The extended concept of microservices in the world of frontend is called micro frontend. Let’s understand the term ‘micro frontend’ by taking an example of an e-commerce frontend application built using React.
Traditionally, when building a frontend application, all the codebase, including components, assets, routing, and business logic required for the frontend, are written into one main application, which is then served by the server. However, with the advent of various JavaScript UI frameworks used by most organizations nowadays, there are drawbacks or limitations associated with this framework. For instance, as the application grows in size, the load time in the browser increases.
Consider an e-commerce app built using React, featuring functionalities like product search, purchasing, and order tracking. In a monolithic frontend application, these pages would be included.
In a React e-commerce application, the application is built into main JavaScript chunks, which are loaded by the browser whenever anyone visits the site. The user has to wait for downloading all the JavaScript files, which include the entire frontend application. This can significantly increase the initial load time of the application.
We can solve this load time issue with micro frontend. Let’s consider our e-commerce application. If a user comes to our application only for searching a product, the browser doesn’t need to download all the code. Instead, it should be available for use by the user, even if the rest of the application is not relevant to them.
We can build the same application using the micro frontend approach. The micro frontend approach is a simple idea where we divide the whole big application into smaller applications, depending on the features they provide, and build them individually. This way, all the teams can have a better understanding of the features they are building the UI for and be responsible for that feature only.
So, we can divide the e-commerce application into product, order, and delivery features. The product micro frontend application will only render UI related to product listing and searching. The order micro frontend application will be responsible for order-related UI, and the delivery micro frontend will be responsible for the product tracking feature.
Since we are dividing this application into smaller parts, we need to merge or integrate these small apps to work as the main application. We can build one main application called a host, which will be responsible for integrating these smaller apps into one and rendering based on user input accordingly
There are different methods of integrating these sub-applications, including build time integration, run time integration, and server-side integration. This provides an overview of what a microfrontend is.
In the next post, we’ll explore how to build an e-commerce frontend application using the Micro frontend approach with React. Stay tuned!”
