The what, why, and how of Microfrontends …
What is a Microfrontend?
Martin Fowler defined Microfrontend architecture as follows -
“It [Microfrontend] is an architectural paradigm wherein independently deliverable frontend applications are composed into a greater whole.”
Simply put, a Microfrontend is a section of the webpage (not the entire page). There is a “Host” or a “Container” application in Microfrontend Architecture that can host one or more Microfrontends or applications. The Host/Container application can also share across some of its own Microfrontend components.
For example, as was implemented in these reference articles (please go through before trying to understand further), we are going to expose a Button component from the mfe1 page into mfe2 (the host/container).
Or the live one at http://mfe1.s3-website-us-east-1.amazonaws.com/ that was deployed to S3 in this article —
And here is the registered link when (https://mfe1.microfrontends.info/) we registered a new domain in the following article — https://www.linkedin.com/pulse/adding-domain-certificate-website-aws-s3-web-enabled-rany
Microfrontend Architecture comprises of 3 main components -
- Microfrontend applications (in the previous example, the Button from MFE1 is a Microfrontend)
- A Host/Container application (in the previous example mfe2 was the host)
- A Microfrontend framework: We used Webpack 5 Module Federation Plugin for this
The History of Microfrontends -
Have you ever wondered how, where and when the term “Microfrontend” was coined? The following article describes the evolution of Microfrontends in rich detail.
By the end of 2020, Zack Jackson released his masterpiece “Module Federation” as a plugin in Webpack 5. The Module Federation Plugin transformed the world of Microfrontends and took it to a totally new level. Now, we can include a remote component in our project as though we developed it ourselves locally without depending on any builds or deployments or even requiring a webserver to run/host it on.
This is the future of Microfrontends. Companies started to adopt the Module federation approach to migrate from a monolithic application to Microfrontends.
Why Microfrontends?
The Microfrontend architecture was introduced to solve multiple issues with the current Single Page Application development paradigm (SPA). We singlehandedly experienced the stupendous growth of our web application to the point that it become extremely tedious and tough to scale, modify, or even train new engineers to understand the codebase and start contributing to it. Such a monolithic system blocked independent developer contributions even when the changes were small. Some of the beneficial aspects of Microfrontend have been enumerated as follows -
- Promote Scalable Teams-
Multiple teams can work independently to contribute to multiple systems. This allows us to divide the work and scale it through multiple teams. - Independent stakeholders and singular responsibility -
This will allow each team to build components with a single responsibility. The hosting team can focus on analytics, performance and each of the feature development teams can focus on customer-facing concerns. Both these teams can give their 100% while working on their target areas. The host application team can focus all their efforts on creating a great host application experience. Each of the Microfrontend stakeholder teams will be responsible for delivering a seamless experience and functionality integration from their end. - Promote Code Reusability -
We will be able to re-use code at multiple places. Once a component is built and deployed, different teams can re-use it to solve for their business use-cases. - Promote technological agnosticism:
Microfrontend architecture is independent of technology. We can use components from different technology stacks (like JavaScript, React, Vue, Angular …). We do not need to concern ourselves about their integration and deployment. - Learning Curve -
For engineers new to the team, it is easier to learn and understand the functionality of smaller applications as compared to trying to comprehend the working of a monolithic system with many thousands of lines of complex code. - Domain-Driven Architecture -
One of the main motivations driving the invention of both Microfrontends and Microservices-based architecture was to allow vertical domain ownership. By deciding to move from a monolithic architecture owned by the entire company to Microservices that will be owned and maintained by multiple teams, companies were able to scale the development velocity across various teams and promote individual ownership of the backend at the same time. However, the frontend continued to stay as a big monolith that had dependencies on multiple teams. With Microfrontends, each vertical domain owns a component end-to-end, vertically.
How to implement a Microfrontend based application?
The main key in a Microfrontend-based architecture is the integration between the host/container and Microfrontends. There are two ways to integrate Microfrontends.
Build-Time integration
This is what most of the code implemented today. The container will install the components as libraries, similar to the libraries you install from npm. The issues with this approach are syncing different versions of libraries and build issues. Also, it is tough to use different technologies. Also, the size of the final package will be big because it contained all dependencies. Moreover, you have to deploy again for any changes in dependencies. Also, there is a tight coupling between the container and all Microfrontends.
Run-Time integration
Run-Time integration has three types of Compositions:
Server-Side Composition
In this case, all the functionality will be in the backend. The decision to load a particular Microfrontend lies on the backend. The server will decide which URL to route the request to. This is a standard server-side composition. We have used simple reverse-proxy using Nginx to do this task. However, there are many other implementations possible.
Edge-Side Composition
In this approach, you make use of CDN (Ex: AWS CloudFront) and Lambda@Edge. The orchestration will happen on the CDN itself, instead of the Client-Side or Server-Side.
More about this at https://youtu.be/fT-5RHTtFNg
Client-Side Composition
In this case, the container is built and deployed separately. Each Microfrontend can be exposed as a separate package that the container/host can fetch the needed Microfrontend. For a more detailed explanation of the approach, please refer to this list of articles at the end of this article or here. In this case, the container and the Microfrontends are completely de-coupled. They do not share any builds or deployments and can use diversely different technologies. The container decides the version of the Microfrontend to be deployed.
One of the methods used recently is Webpack 5 Module Federation Plugin. Webpack 5 Module Federation Plugin has been actively trending and has consistently given successful results. If you need more details, you can follow these videos and help articles here -
Videos: https://youtu.be/AZDDIgJSKU0
Deploying Microfrontends
Deploying Client-Side composition Microfrontends that are created with Webpack Module federation is extremely easy, efficient, and inexpensive. Most articles, courses, and books stop after creating Microfrontends. I will show how easy it is to deploy Microfrontends and add a public domain to them. The following articles explain in detail how to deploy Microfrontends to AWS S3.
The final result can be found at http://mfe1.s3-website-us-east-1.amazonaws.com/
The following article will explain how to add a domain name
https://www.linkedin.com/pulse/adding-domain-certificate-website-aws-s3-web-enabled-rany
In this article, we will buy a domain (microfrontends.info) and link it to the CloudFront (http://d1tsn16diydefl.cloudfront.net/) that we created in the previous article
What are the various Frameworks available for implementing Microfrontends?
Microfrontends are new, and frameworks are constantly evolving. There are several frameworks in the market today, some of them are as follows —
Webpack Module Federation Plugin
Webpack is a well-known framework that has been widely used in frontend development for years. Webpack added a new plugin for Microfrontends that solved most of the existing issues with previous frameworks. It does not require added overhead for systems that are already using Webpack. Webpack is an open-source JavaScript module bundler. Simply put, Webpack takes modules with dependencies and generates static assets representing those modules that can be stored in a Web-enabled AWS S3 storage to have a website without servers. It can be used with Nginx to route URLs to the appropriate bucket on S3. This is very efficient as it reduces the requirement for additional servers and also reduces our application’s package size by only importing necessary dependencies. In Microfrontend architecture, Webpack Module Federation allows JavaScript applications to dynamically import code snippets from another application at runtime based on different URLs. Webpack provides Build-time and Run-time integrations without the need for a server. It also tackles the problem of code dependency and increased bundle size by enabling dependency sharing.
For example, if you’re downloading a React component, your application won’t import React code twice. The module will smartly and efficiently use the React source you already have and only import the component code. Finally, you can use React.lazy() and React.suspense() suspense to provide a fallback should the imported code fail for some reason, making sure the user experience won’t be disrupted because of the failing build. I recommend using this framework for Run-Time Composition. You still can use other frameworks to integrate bigger frontends in build-time or at the server-side, but Module Federation will allow you to go even more granular to the component level.
The following article explains in detail how to implement Microfrontends using Module Federation and deploy publicly to AWS -
However, there is an issue with create-react-app, and webpack 5; check the following articles for possible temporary solutions until they release a permanent fix -
CRA was created initially for beginners to learn and get familiar with React, it was never meant for production. The end of this article contains some useful links explaining the creation of React Apps without CRA, which is the recommended way while implementing Microfrontends with module federation plugins.
Other Frameworks are:
1. Single SPA
SPA is similar to Module Federation. Actually, you can use it with Module Federation. It is Run time integration. The nice thing about Single-SPA is that it is a ready-made framework similar to create-react-app but create-single-spa. It will take care of most of the Webpacj configurations for you. It is a good solution if you do not want to dive deep into Webpack configurations. Check the following articles —
And the following article will help you to decide which Run-time framework to use between Module Federation and Single-Spa —
2. BIT
BIT is a Build time integration framework. Bit provides a full-fledged framework, including CI/CD pipelines. It accepts different separate components and builds them into Microfrontends. BIT is similar to Webpack in that it works in Build time. However, with the Module Federation Plugin, Webpack has the advantage of Run-Time integration, which helps create more decoupled components.
3. AWS Serverless Microfrontends at the Edge
AWS uses their CDN (AWS CloudFront) and Lambda@Edge in this approach. The orchestration will happen on the CDN itself, instead of the Client-Side or Server-Side. More about this at https://youtu.be/fT-5RHTtFNg .
3. SystemJS -
https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fsystemjs%2Fsystemjs
4. Piral
https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fsmapiot%2Fpiral
5. Open Components
https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fsmapiot%2Fpiral
6. Qiankun
https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fumijs%2Fqiankun
7. Luigi
https://medium.com/r/?url=https%3A%2F%2Fluigi-project.io%2F
8. FrintJS
https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Ffrintjs%2Ffrint
9. Mosaic 9
https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fzalando
10. PuzzleJS
https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Fpuzzle-js%2Fpuzzle-js
Which framework to use?
This is the most important question that we always ask before we start. In the past couple of years, we have been helping out numerous clients and companies transition over to Microfrontends. We always start with the age-old famous question, “Which framework to use?”
Well, we have gone through this process time and again and still pause every time pondering over this question. The challenge here is that there are new frameworks being invented every other day. The following article will help you answer this question -
Where to start?
If you are convinced with Microfrontends with Module Federation and want to start, where can you start from? I have shared a few helpful articles to help everyone start from scratch, which is usually the hardest part.
1. Create React Apps without CRA
Firstly, if you have been dependent on CRA, here is a way to build React Apps without CRA, which is important while implementing Microfrontends with Module Federation.
2. Build a simple project with comments and explanations
The following article will help you start from scratch and each and every step is explained in detail. If you have any questions, you may feel free to ask for clarifications in the forum’s comments section.
Using CRA
If you are still insistent on using CRA, here are some articles that might help you customize configurations without eject. However, we do not recommend this approach. CRA was created to help beginners learn React but not for production.
Thanks for reading.
Happy Coding!!
