𝐌𝐨𝐝𝐞𝐫𝐧.𝐣𝐬 𝐜𝐮𝐫𝐫𝐞𝐧𝐭𝐥𝐲 𝐢𝐬 𝐨𝐧𝐞 𝐨𝐟 𝐭𝐡𝐞 𝐛𝐞𝐬𝐭 𝐟𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤𝐬 𝐟𝐨𝐫 𝐌𝐢𝐜𝐫𝐨𝐟𝐫𝐨𝐧𝐭𝐞𝐧𝐝𝐬.

For legacy setups, companies have been using custom setups or maybe even 𝐢𝐟𝐫𝐚𝐦𝐞𝐬 to connect multiple front-ends however newer projects shifted to frameworks such as 𝐒𝐢𝐧𝐠𝐥𝐞-𝐒𝐏𝐀 and 𝐌𝐨𝐝𝐮𝐥𝐞 𝐅𝐞𝐝𝐞𝐫𝐚𝐭𝐢𝐨𝐧.

What am I talking?

We are talking about microfrontends. Just like microservices, microfrontend is all about splitting frontend.

But why?

Teams own microservices. But it doesn’t make sense to have teams separated by services but grouped by frontend. A team working on a particular service should have direct control over the frontend specific to that service in that Bounded Context. That couples the service to it’s frontend and enables the team to work in complete isolation.

So somehow we need to split frontend code so that we teams could have thier chunk for their service.

There are various ways to do it:

1. Webpack Module Federation: https://module-federation.io/
Released in 2020, dynamically loads remote apps on runtime. Useful if you have React / Vue / Angular setup.

2. Luigi (SAP): https://github.com/SAP/luigi
Released in 2018, Created by SAP for large enterprise apps.

Get Sankalp Pol’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

3. Single-SPA: https://single-spa.js.org/
Released in 2016, More complex over as compared to MF but you get more power as well. More of a Module orchestration framework.

4. SystemJS: https://github.com/systemjs/systemjs
Released in 2014, Older but light weight. SystemJS is a loader rather than an orchestrator. SingleSPA can use SystemJS internally if you are loading microfrontends remotely.

Microfrontends are not SEO friendly by default unless you are leveraging SSR. So it does depends on the frontend framework (React, Angular, Next) you are implementing microfrontend with. Companies have also created their own ways to internally implement microfrontend.

So how did we reached on Modern.Js

From this issue: https://github.com/module-federation/core/issues/3153

It started with Next.Js being put on maintenance mode. It initially suggested that Next.Js shouldn’t be used if you are exploring microfrontends, while Modern.Js was recommended.

So I started exploring Modern.Js and I found it to be more organized for features like BFF, Microfrontends, SSR, SSG, Data Fetching, Caching, etc.

I will be spending some more time with Modern.Js and some other frameworks. I will also be getting out of Next.Js for a while as it feels like I’ve been wearing a helmet for long time.

Also it is not that Next.Js doesn’t support Microfrontends (Read this: https://nextjs.org/docs/app/guides/multi-zones)

It’s just that I am bored of Next.Js.

That’s it