Micro Frontends Just Got Better With Module Federation
With Webpack’s module federation, choose what you expose from your micro frontends
Micro frontends are applications that are standalone, independently deployed, having their own development cycle still coming together for the greater good.
In case you want to read more on what are micro frontends. I recommend giving this a read.
Module federation allows JavaScript applications to dynamically load a piece or a building block from another application. While doing this if the remote module needs a dependency, that can be downloaded too.
Sounds familer?, we were doing this already with node modules but the highlight here is the dynamic loading that Webpack’s module federation brings in. You decide when to load the required component & load just the chunk that has it. Amazing! right?
Also, a key thing to highlight here is that you don’t load the whole bundle generated by another app but you just download the component you need.
Because the consumer/host app it is just one monolith Webpack build, the benefits like tree shaking, dependency sharing & reduced code duplication; fall into place by default.
For ease of our conversation, let us have one app that exposes just one component as a federated module. Let's call this app ‘remote’. Another app called ‘host’ needs to load that component from a remote app.
The above code snippet is available at
The example here is pretty simple. There is a remote app that exposes a component called Greet as a federated module, using exposes option, declaring its dependencies as eager. There are a lot more things you can do here as the remote application could also say that I need a specific version of a dependency.
In the host app, you declare a remote host through the remotes option & give it a name, here we just calling it remote. You can choose to load the remote app’s modules on demand through lazy loading like this.
If you run the remote & host apps you see that host app lazy loads the remote app’s chunk that has the Greet component.
While this sample is very basic but this opens up a lot of possibilities in terms of dynamic module sharing. Moreover, this is not limited to client-side rendering, it works with server-side rendering too. Though this was my starting point to begin using module federation, there are still points to ponder:
- How do we manage dependency collisions in large-scale interdependent apps?
- How do we maintain versioning better at a large scale?
- Eager & singleton options would be challenging to manage if the apps have their own lifecycle. Here I am talking about an app that can be a host or a remote-based on need. Such apps are called Bidirectional-hosts.
Must read
Troubleshooting
Concluding
Though this seems very impressive and something that couldn’t be done so easily so far. Using module federation at a large scale in production can be tricky at the moment, till we figure out versioning & dependency collision better. Kudos to Zack Jackson for inventing this. Long live module federation!
More content at plainenglish.io
