Five Module Federation/Micro-Frontend Mistakes

Module Federation is an advanced front-end topic, that's for sure, so let's talk about some mistakes that people make, and misconceptions people have, about the this Webpack 5 functionality, as well as how to avoid them.

👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa

00:00 Introduction
00:19 #1 Module Federation != Micro-Frontends
05:19 #2 Module Federation Doesn't Manage State
11:34 #3 Federated Modules are Deployed Like Assets
13:39 #4 Federated Modules are Not Versioned
17:39 #5 Federated Modules Do NOT Have TypeScript Types
27:45 Outroduction

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#moduleFederation #react #microFrontends

[yassinebouchoucha]

I transformed my enterprise ERP solution from monolith create-react-app to micro-front-ends architecture with webpack 5 Module Federation: that was very risky move: we went through 3 weeks of red and blank screen of errors, rethinking some feature implementation, debugging MaterialUi Css, and re-working deployment pipeline to production, and added complexity to incoming junior developer... in total 3 month without updating our customer product.
After that the effort and sacrifice worth it, the rate at which we implement new big feature or ERP module is scaled to 5x time faster, and we can work independently on single business domain.
Thank You Jack, your channel helped me to take this strategic decision !

[alekseikolesnikov]

One of the best videos which explains Module Federation concept. Now I finally know where I did my mistakes in a solution. Thanks!

[leonidas]

Excellent work through of these issues. As someone behind the curve, I barely followed along on the code, but I understood from the explanations of the conditions for each scenario. Really impressive grip on your tools and frameworks in addition to being lucid on the solution architecture!

[dannybrown]

This is excellent. Item number four here, and your separate video on semantically versioned module federation, were incredibly helpful.
I understand why you don't spend more time on detailing all of the different defensive strategies, but it is a good call out that the contract is something to be aware of.

[cherryfuchs]

That error boundary tip was new to me. Thank you very much

[AssFaceNFT]

Many thanks for your amazing content Jack, we can't get enough!! 🔥💯

[marcelsdev]

Thanks for the explanation and examples :)

[jacobsheets]

I love that you talked a bit about what this architecture looks like in a real deployed environment (ie. assets vs. server). Sometimes tutorials focus so much on the dev setup you forget a production-ready solution needs more than that. I'm also really curious about the sharing of types and if there is a way to share those types across repositories and projects. You could publish an NPM package with the types, and I'm sure you wouldn't be changing the type definitions as often as the components themselves. Would that be the only way?

[garywaddell]

Wow Jack you fly through these videos, you definitely know your sh!t. Great content!

[cheikhsaadbouh]

thank you for this valuable information, well explained

[androidgeeking]

Do you have a video covering routing with MFEs? Trying to figure out how you would export your routes or guarded routes from remote.

[notramiras]

Nx's module federation boilerplates have cross-module typescript coverage.

[pratikwalkhade]

HI Jack,
Thanks for a great videos on module federation and micro-front ends.
looking for an example of MF with Angular and react. Can you please help with this?

[matthew]

Thanks Jack! For Q4 I'm rolling out MF for my team.

[MadsMtzkeTandrup]

Thanks for the great overview 👏🏻 Any thoughts on untrusted or semi trusted modules? So for example if a third party is developing a component you want to embed, my knee jerk react would be to put it in an iframe. But do you see a way to do that with module federation securely?

[michaelmenard]

This is good info. Knowing these things while adopting the technology is really helpful in avoiding some pitfalls. I did want to ask you one question around sharing router history. is that a thing? if a hosted app has its own internal routes how does that get captured? in an ideal world everyone would use the same stack and could pass around a router history object but if you have some apps on react, and others on vue, does that make it impossible to keep router history state?

[MrNathanShow]

Making me want to move to Organ with that view

[AlirezaMotevallian]

Thanks for your great videos.
I followed the FMs and I am almost convinced it won't get any tractions.
Besides the complexity in the last misconception you tried to fix a fundamental problem with runtime code sharing, i.e. guaranteeing the contract.
And to solve it you had to go back to the old practice of sharing via libs.
If I wanted to share code or contract via libs why would I need the FMs in the first place?

[hk_build]

Great content 👍👍
What if I want to expose whole redux store from remote app how to do that....??
Since I want expose whole remote app along with store

currently am only able to expose static hello world but not component which is connected to store...

[EthanStandel]

I know that this is an older video (by YT standards), but I just have to say... if you're going to make the remote package and the host app both rely on a @types library then what's the point of module federation? Why wouldn't you just publish the remote app as a package and then make sure that the host updates... that way you can catch any errors created by a new version at build time rather than run time?