Federated Modules
Talk Webpack 5 Module Federation
Abstract
For years, we have never been able to consume or share modules from another standalone application. The nearest we had was externals or DLL Plugin. Both of which are not scalable or sustainable in large scale systems. For those who have built a micro frontend stack, likely understand the challenges. Introducing Module Federation, a feature that I bought for Webpack 5. It allows us to import code just like you would within a monolith. No overhead, no learning curves, and no real deviation from standard engineering practices. We have built a universal system for developers to consume modules of other applications at runtime. Be it server or client. This architecture has been considered a game-changer to Javascript and will change how we build applications in the future.
Zack Jackson [link] https://www.youtube.com/watch?v=-ei6RqZilYI
Sharing code is hard (and gets harder at scale)
- Incovinient;
- NPM is slow;
- Grows in complexity;
- Sharing is usually primitive;
- Inneficient and unproductive to share feature code;
Motivation
- Mid to large scale platforms;
- Deploy multiple apps, or parts of an app independetly;
- Multiple teams, autonomous workflows;
- Avoid learning curves
- Avoid multiple copies of the same library;
- Sahre vendor code, stay flexible;
- NO UX drawbacks, like page reloads in user flow;
- Avoid complicated CI.
Context slide (print)
gif https://p192.p3.n0.cdn.getcloudapp.com/items/xQunmG16/1d7c9c20-bebd-4a05-bb1e-e5475060b64a.gif?v=51287dc326286787e6ea28db91c11846
Import modules from a separted compiled app
Share cmopiled apps from other sources
Current solutions are brittle, hard to rollout on shared deps updateds; UX if often impacted (download more javascript, page refresh etc.) lots of code duplication, in house solutions are complexes, requires manual labor, SSR is a nightmare
slide existing options
single build
externals
Native ESM is bad on for web performance Single build is bad on build performance DLL plugin/externals is too much manual work
what we4 look is: good performance slide
work in browser and in node.js
host slide remote bi directional hosts omnidirectional hosts hability: I can use semantic versioning and I can have a patch version os react, the runtimes negociate bweten each other before run (to find best version of react)
what is module federation slide
not a framework
what is slide
an example team b’s perspective
Container ref. plugin
dote lines are async , but can be ‘used’ as a sync
container ref. slide
container orange balls
container is what other teams exposes to you
container plugin
share scope is how they share modules/deps, you can have multiple shared scope (if you want to keep the scope separed, like != versions of react)
creating a container slide
react lazy how to use
example at scale
supporting multiple react versions
basic modern react repo
applied architecture
what could you federate?
? react.lazy? react.suspense
decentralized routing,
non webpack compability
federation dashboard for Saas