Introduction
Hi devs! Nice to see you here. Today in this blog we will go through the concept of micro frontends and how it helps us in scaling our frontend applications. Additionally, we will understand what module federation is. So, let’s get started.
What are Micro Frontends?
Imagine you are creating a large e-commerce application. Now this application will be developed as a single monolithic application, may be in React, Angular or vue totally. The application will be broken down into different modules like product listing, shopping cart, user profile and other modules.
So, as the application will grow, the code complexity will also increase. Additionally cross team coordination will become a bottleneck.
In order to make it simpler, we can adapt the concept of micro frontends.
With micro frontends, you can develop each of these modules independently, choosing your own stack. For e.g. your team has some angular developers and some react developers. Now, you can give some module to angular developer and some to react. They can be built independently.
When all of these are developed, they can be integrated into a shell or host application using techniques like Module Federation
Micro Frontend is simply a web architectural pattern where the frontend of the application is broken down into smaller, independent, deployable modules. Each of these modules is called a micro frontend.
Why we need Micro Frontends?
- Multiple teams can work on different modules independently and it is easier to scale.
- Every micro frontend can be deployed independently, without affecting the whole application.
- Different teams can use different framework.
- It is easier to maintain small modules and debug them.
- Helps in reusing common modules across different application.
Difference between Micro Frontends and Micro Service
Somes times, people confuse between these terms, so in order to avoid confusion let us understand the difference.
Micro frontends help us in splitting the frontend code base into smaller units whereas a Micro service helps us in splitting the backend code base into different services.
Micro frontends scale frontend development across teams and microservices scales backend services independently.
Thats all. It’s that easy!
Module Federation
Now that you know that your application will be broken down into different smaller modules, the question is how will you share data between these applications.
That is where module federation comes into role.
Module Federation is a powerful feature helps us in sharing code dynamically at runtime – like importing components from a deployed app.
Let us understand the core components of it.
Shell or host application: The shell/host app will act as the root application, where all other applications will be integrated. This application will be responsible for handlng all the routing, layout and loading of the remote apps (apps that will be deployed independently)
Remote or child application: The applications that will be developed and deployed independently. All of these apps will be loaded dynamically by the host app whenever needed. All of these apps will be based on different tech stack. Some may be in Angular, some in react, some in vue.
Shared state and communication: Shared state will be handled by the shell app only. For this we can use state management libraries like Redux, NgRx which will enable coordination between remote apps.
Understanding the Flow
- Configuration: Each application will set up a module federation plugin in their webpack.config.js file. Remote apps will expose the requred modules in this file.
- Build time: Webpack will build all the applications (remote and shell) independently. For each remote app, a remoteEntry.js file is created which will serve as the entry point of those applications
- App Starts: When the application starts, the host application will load and initializesWebpack fetches the remoteEntry.js file from all the remote apps.
- Dynamic Loading: Whenever a remote app will be needed, it will be loaded then. Remote apps are not fetched initially.
- Render: The host application uses the remote apps component to render the UI.
When to use?
If you have a large-scale or an enterprise grade application, then it is suitable to use the concept of micro frontend. Or maybe you have a big team who can manage their modules end to end
But if you have a small or medium size application and it is handled by a single team, then you should not prefer it. It will add extra complexity to your application.
Conclusion
Micro frontends paired with Module Federation offer a modern, scalable way to break down large frontend applications into independently deployable modules. This reduces duplicate code and bundle size, improves performance, and supports team autonomy. However, it introduces architectural overhead—runtime configuration, and potential integration complexity—so it’s best suited for large-scale, multi-team applications where modularity and independent deployment really pay off.
Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Competency.