Webpack Module Federation in-depth w/ Zach Jackson

This is your chance to hear all the interesting bits of Module Federation straight from the creator!
I've spoken to Zach many times specifically about Module Federation. He's a really smart guy, and I think this is one of those technologies that'll be industry-changing. Most people need Module Federation but don't even know it yet.
Zach Jackson's RUclips Channel:
/ @zackjackson9674
All the Module Federation examples (and more) used by Zach:
github.com/mod...

[@fabriceekpetse6440]

Very helpful. Especially the bootstrap file. Thanks guys for working on making DX better and better.

[@frozen_tortus]

wooa what a video!

[@kalesmca]

I have a question. Lets consider we have App1, App2, and Main app. => App1 and App2 is exposes into port 3000 and 3001 => Main-App importing those 2-apps. => If App1 is down what will happen? => how to resolve it. => How to catch this kind of exception when we import in Main-app ? Please help me

[@KevinGhadyani]

That's a great question. I'm actually not sure.
My implementation of Module Federation was customized, so I had a way of handling it.
Not sure how it's done in the official implementation. I'd ask in the Module Federation Slack group for more information.

[@arbrix2503]

what are the benefits of federation, would'nt that just increase the number of request and delay the loading of the application?

[@KevinGhadyani]

Module Federation does increase the initial number of requests. This is why HTTP/2 is recommended.
But the overall payload size could be less with multiple micro frontends on the page, and your payload-over-time cost is even lower. More beneficial to apps unless you do what I did and federate dependencies.

[@madhuchilipi]

i have a question on app1 and app2(if I have 2 developers who want to develop app1- devloper1 app2- developer2 parallelly how can we manage the code and deployments to production)?

[@KevinGhadyani]

Each developer would work on their apps independently. When pushed to production, there are a few ways this works.
1. Your client pulls the latest version dynamically when someone goes to a route where app2 is used.
2. You have app2 deployed as a node_module and the bundle is published separately.
There are many other ways to handle it too.
Think of these as separate apps. The configuration from there depends on if you need server-side rendering or not.

[@Tranquility_00]

Is it possible to manually download the script and manually load it? The download magic is so stupid.

[@KevinGhadyani]

Which script are you referring?

[@Tranquility_00]

@@KevinGhadyani Thank you for the reply, i was probably wrong, it is probably possible. At 15:39 for example. As i understand, the plugin under the hood uses fetch to download app2 module using the url seen on the screen. After a bit of watching various videos, i think you can just dont put the url and add the script tag in the html (mannually or by code). That would solve webpack making requests to the server, which you can't control or customize.

[@Tranquility_00]

@@KevinGhadyani However there is another problem: In case plugin configuration has many exposed modules in the 'exposes' option, it creates a separate file for each exposed module. This is just bad design and could result in many small network requests. Also, this is against the webpack philosophy, which is to BUNDLE things, not to make many small files.

[@KevinGhadyani]

I see what you're saying. That script is on disk, and yes, you can load it yourself.
That's how I used Module Federation because I was dealing with an existing app that had 3-6 separate bundles on the same page which needed to share federated modules.

[@KevinGhadyani]

Webpack has the concept of chunking. I've never released a production app as a single monolithic bundle since 2015.
Webpack even complains if you're bundle is too large.
With HTTP/2, those small network requests aren't an issue.