What is microfrontend:
In short, it's a way to a way to apply the microservice principles to frontend applications, this will give multiple benefits like Autonomous teams, Easier maintenance, independent deployments, and flexible tech choices.
The best use for microfrontend architecture is when you have a large-scale application and a large team working on it and you want to divide to conquer, otherwise adopting microfrontend architecture will be overkill.
1. iFrames
The old good iframe tag, you can use anywhere on your page, you need to make sure this header is enabled on the page you want to include as an iframe
X-Frame-Options: ALLOW-FROM https://example.com
You can pass data from the parent page to the iframe in two ways:
- Url params
- Postmessage
2. Javascript bundles
Include any javascript file written in any framework to your page at runtime, and make sure that this file will render itself in a specific div you will create in a certain place in your original app
You can include CSS files in the same way, or include manifest.json file which reference all your JS and CSS files (if you have multiple javascript and CSS files) and it will load all needed files automatically
3. Zones
Feature in Next.js lets you reference another project as a page in the main app using redirects, if you are not using Next.js you can achieve that using Nginx as well.
Since the main app and all the zones are on the same domain, they will share the cookies so you can do authentication on the main app and the other apps can read the auth cookie
4. Module federations
A new feature in webpack 5, allows you to export one of your components and use it in another app and import it like any other component in the app, any update on the federated component will reflect all consumers at runtime
5. Other dedicated frameworks
There are number of frameworks designed to build microfrontends like
https://bit.dev/
https://single-spa.js.org/
Demo
I created a small demo used Zones and Module federations
I this demo there is 2 Zones, Home and Products, and I exported the top menu bar as federated module from Home app and used it in both Home and Products
Also using next-auth library I created a simple auth and since and it's shared between two zones
Demos
https://mfe-shop-home.vercel.app/
https://mfe-shop-products.vercel.app/products
Code
https://github.com/adelhamad/micro-frontend-shop
Further reads
https://www.facebook.com/notes/10158791368532200/
https://dev.to/luistak/cross-micro-frontends-communication-30m3
https://micro-frontends.org
https://martinfowler.com/articles/micro-frontends.html
https://indepth.dev/posts/1477/taking-micro-frontends-to-the-next-level#third-party-micro-frontends
Top comments (0)