Angular Modular Federation

This article provides a basic idea of how Module Federation plugin of webpack 5 can be implemented using the angular framework.

What is Module Federation?

It is plugin of webpack which has standardized micro-frontend architecture that can be implemented in any javascript framework. The standard application can be split into multiple smaller application called micro-frontends which can be developed and deployed separately. Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually.

Why do we need Micro-Frontends?

The Micro-Frontends architecture was introduced to solve multiple issues with the current SPA frontend development. I understand how the growth of a website makes it tough to scale, modify, or even train new engineers to be part of it. With such a monolithic system, developers will be blocked on each other just to apply a small change. Instead, in a micro-frontend structure- you only need to deploy a smaller app which is a part of the main app. The smaller size makes it more manageable by a small team and take complete ownership of that part of the main app.

How do we split up the monolithic front end application?

The splitting of the monolithic app to micro-frontends is a very sensitive subject especially for a big application/website already deployed and used by many users. The best way to split is by process-driven parts of the application. They will be inter-connected but if one micro-frontend goes down, it should not impact the other parts of the application.

Pros and Cons of Module Federation

Pros:

• Single responsibility: This will allow each team to build components with a single responsibility. The hosting team can focus on analytics, performance and each feature team can focus on customers. Both teams can work 100% on their particular areas. The host page team can focus 100% on creating a great host page. Each Micro Frontend team will focus 100% on the functionality of their Micro Frontend.
• Reusability: We will be able to use code in multiple places. One component will be built and deployed, and different teams can re-use it.
• Technology agnosticism: Micro Frontends architecture is independent of technology. You can use components from different technology (JavaScript, React, Vue, Angular …). You do not have to worry about deploying or building them.
• Scalability: When the website traffic increases, you do not need to scale the whole app. Instead of that, the micro frontends can be scaled individually based on requirements.
• Smaller and Manageable Microapps: Splitting the app into micro frontends will make each app’s codebase smaller and decreases development and deployment time.

Cons:

• Learning Curve: For developers there is learning curve especially for those who are familiar with monolithic app development.
• Complexity: There is a danger of scope creep when using micro frontend architecture. It is possible for developers to overpopulate their project with too many components as time goes on, causing multiple testing and deployment-phase issues to appear across several teams.
• Resources: For the above advantages of micro frontend architecture to be realized, the project must have access to multiple skilled development teams. If a business does not have the sufficient size or resources for micro frontend projects, then microservices could actually prove to be more cumbersome and demanding than simply using a monolith.

Code Walkthrough

This is the shell application component.

This is the mfe1 module mounted inside the shell application. The dotted bordered part of the page is from the child application.

Check out my sample Angular Module Federation project. It is divided into two parts:

1. Shell app- This is the parent application which will consume exposed js files from child micro-frontends and rendered on the same page. This runs on http://localhost:5000. You can access this repository here-ausekarsid/Module-Federation-Shell (github.com). Check readme.md to setup in your local.
2. Mfe1 app- This is the child application which will expose the js file(modules) to the shell/parent application. This runs on http://localhost:3000. You can access this repository here- ausekarsid/Module-Federation-mfe1 (github.com). Check readme.md to setup in your local.

Conclusion

Thank You for reading this article and you can check out my other articles on Siddharth Ausekar — Medium.