Microfrontends with Module Federation: What, Why, and How
“Module Federation gives us a new method of sharing code between frontend applications. “ The previous sentence is significant in understanding Module Federation. The reason Zack Jackson invented Module Federation is to make sharing code more straightforward and more independent. If you understand this concept, it will be easier to design and architect your projects. Some people are trying to map microservices’ architecture to microfrontends. However, the frontend world is different from the backend world. To understand the importance of Module Federation, let’s explore the alternatives.
Node Modules
Previously, we call it “Build-Time” microfrontends. However, as the term advanced, microfrontends means “Run-Time” composition. Node Modules have existed for a long time and have been used for a while. NPM (Node Package Manager) is the most common way of sharing Javascript code. We have added node modules and NPM packages to our node projects hundreds of times. To publish a package in NPM, you will need to remove the rendering code and publish it. There are four main disadvantages to this approach:
- The NPM package does not have the rendering code: This is very frustrating if this package is owned by a different team. One of my clients used to have a team that developed a component that was consumed in a portal owned by another team. They used to develop it blindly and wait for the portal team to test it and provide feedback. This approach violates the Autonomy and Decoupling design principles.
- Deployment Time and Effort: One of the big disadvantages of this approach is that it increases deployment time and the size of the application as you add more packages. This has been one of the most motivations to adopt Module Federation. One of the metrics that companies use to measure dev-ops effectiveness is deployment time (see Google’s DORA metrics). From my experience, this was one of the most painful points for engineers.
- Hard Dependency: In addition to deployment time, there has been deployment and build issues on those NPM packages. There are always failures because of hierarchical dependencies. It adds to deployment time and debugging. Usually, followed by back and forth discussions and investigations by different teams.
- Versioning: Communicating the latest updates and version changes is a big challenge in this approach. I had two teams who shared a component in between that became their top refactoring projects after one year because of managing dependencies.
Run-Time Composition Frameworks
With the development of run-time composition microfrontends, frameworks such as Single-SPA started to appear. Each microfrontend will deploy its javascript run-time packages to a container such as an AWS S3 bucket. The host/container app will then download those components at run time and use them to render content. This solution will solve the build-time dependency. However, the main disadvantage of this approach is that it depends on a framework to manage all these dependencies. Depending on a framework has its own disadvantages. It will require changes to the code and learning the framework. In addition, it requires consistent updates to the framework. As usual, when the framework is old or deprecated, you will need to re-factor and re-build the entire site to follow the latest technology. We have done this before with PHP and Angular to React or Angular2. using create-react-app to build new projects has the same disadvantages because of all the dependency we have on react-scripts.
Module Federation came to solve all those issues:
- It is not a Framework: Module Federation is a plugin that is added to Webpack. This gives you the freedom and flexibility to build your project the way you want
- It integrates components at Run-Time: You do not have to worry about deployments or dependencies of other microfrontends.
More about the history of microfrontends in the following article:
Unifying UI/UX with Microfrontends and Module Federation
In the dynamic world of software development, achieving a consistent and seamless user interface (UI) and user experience (UX) across a company’s digital products can be a significant challenge. However, Microfrontends, especially with the help of Module Federation, has emerged as a powerful solution to address this challenge. The following article will delve into the Unified UI/UX Systems concept and explain how Microfrontends, enabled by Module Federation, can play a crucial role in unifying UI/UX across a company’s applications.
The following article Explains how to implement this with Module Federation:
How to Implement Microfrontends with Module Federation
The following article is a good reference for Microfrontends implementation with Module Federation
Step By Step Example
In the following article, I will explain how to implement and deploy Microfrontends using Module Federation. I will go step by step in creating two Micro Frontend React Components and render a Button component from one into the other. At the end of this article, you will be able to implement a microfrontend component and render it into a microfrontend container, then deploy it to AWS with a secured domain. The final result can be seen at https://mfe1.microfrontends.info/
More Examples using create-mf-app
similar to create-react-app, we have create-mf-app that will build all the boilerplates. It will make explaining deeper concepts easier. The following articles build over that.
Creating and Sharing a Button
This is a good exercise to start with to understand how Module Federation works. Please, follow this article to get the following result
Pass Props and Add Actions on Them
In this article, I will explain how can you pass props and add actions to them
=======
Module Federation Configuration
The main thing to start with Module Federation is to understand the configuration. The Module Federation has two main components:
- The Remote Federated Module / Microfrontend
- The host/portal/ container Federated Module
The Host will consume and render the exposed components by the Remote Federated Module. In the previous example, MF2 is the container and MFE1 Button is the exposed remote component. For simplicity, I will call the remote federated module MFE (short for Microfrontend). The main thing in the remote is to expose the component you want to share in its webpack.config.jsfile.
webpack.config.js for the Remote Microfrontend (MFE)
Here is the module federation part in webpack.config.js. The rest is a normal webpack that existed before. I will use the example I explained earlier to create MFE1 and MFE2. You can get the full files from https://github.com/ranyelhousieny/react-microfrontends.git
First thing, you import the Module Federation Plugin
Then you create a new object inside the plugins as follows:
webpack.config.js for the Host/Container
Here we will define all the remote microfrontends as follows:
There is one more step in the host to import the remote component and render it inside the React code
====
Step By Step Project
The following article is the best to start hands-on practice to understand Module Federation until deployment
==============
Creating a Portal with Multiple Microfrontends
In the following example, we will go through a real-life example. I created a portal that will host two microfrontends.
=======
Sharing Modules and Libraries
To improve performance and the size of your apps, you can share dependencies as I explained in the following article:
=================================
Adding React Render and Microfrontend Mode
Until now, we have been using querySelector to render to the screen and building in a standalone mode. Let’s add React Rendering and move to Microfrontend mode by following this article.
======
Organizing Webpack Configuration Files
We have been using one configuration file so far. In real life, you will have a configuration for production and another one for development. The following article will explain how to organize your configuration files for common, dev, and prod.
==============
===============
Module Federation Microfrontends with Angular and React
Have you ever wanted to leverage the advantages of multiple frameworks within a single project? Or perhaps you need to gradually migrate a large application from one framework to another? Module federation provides an elegant answer. This article will guide you through a practical example, demonstrating how to use module federation to integrate a React component seamlessly into an Angular host application.
===============
Troubleshooting Module Federation
In this section, I will keep adding the famous errors that you might get while creating Microfrointends with Module Federation
Uncaught Error: Shared module is not available for eager consumption
This is one of the famous errors when you use the shared modules. In the following article, I will explain in detail how to reproduce the error and fix it.
