The micro front end is a potent architectural approach that divides monolithic front-end code into more manageable chunks. This approach brings the benefits of microservices to front-end development, enabling scalability, independent deployments, and a more efficient organization of teams and projects.

Understanding Micro Front End

In a micro front end architecture, individual front-end applications that can be delivered on their own are combined to form a single unit. This approach allows different teams to work on different parts of an application, each using their preferred technology stack. As applications scale, this approach becomes increasingly beneficial, reducing the complexity associated with maintaining a monolithic application.

Module Federation: The Game Changer

Module Federation, a feature introduced in Webpack 5, has revolutionized the way we implement the micro front end. It allows a JavaScript application to dynamically run code from another bundle or build while maintaining separate build processes. This means that applications can share dependencies, reducing the overall size of the application and avoiding duplicate code.

Implementing Micro Front End with Module Federation

Implementing the micro front end with Module Federation involves exposing and consuming modules across different applications. Let’s see how we can do this in Angular, React, and Vue.

Angular

In Angular, you can create a component and expose it using the ModuleFederationPlugin in your Webpack configuration. Here’s a basic example:

In the configuration above, we’re exposing AppComponent from app1. This component can then be consumed by another application like so:

React

In a React application, you can expose a component in a similar way:

And consume it in another application:

Vue

In a Vue application, you can create a component and expose it using the ModuleFederationPlugin in your Webpack configuration:

This component can then be consumed by another application:

Advantages of Micro Front End

Adopting a micro front end approach brings several advantages:

1. End-to-End Feature Architecture: This strategy enables local feature development and deployment, negating the need for expansive deployment infrastructures.
2. Optimized Bundle Size: Micro front-ends provide an overall better developer and user experience due to shared components and dependencies that can be lazy-loaded.
3. Technology Stack Freedom: Teams can choose their preferred technology stack without worrying about compatibility issues with other teams’ code.

Sharing State Between Federation Modules

State management is a crucial aspect of any application. With Vuex, Redux, and Module Federation, you can share states between different micro front ends. This allows for a unified state management system across different applications, enhancing the user experience and making state management more efficient.

Vue

Then, in your main Vue instance:

React

In React, you can use Redux for state management:

Angular

Then, in your main Angular module:

Conclusion

The micro front end architecture, coupled with Webpack’s Module Federation, offers a powerful approach to building large-scale web applications. It simplifies the architecture, improves scalability, and allows for a more efficient organization of teams and projects. However, it’s important to note that this approach might not be the best for small applications or businesses. It truly shines when working on large projects with distributed teams.