Micro-Frontends with Module Federation: Beyond the Basics

on YouTube ↗27m

" summary

Module Federation actually loads separately compiled front ends at runtime via dynamic import and a small webpack plugin that extends the Angular CLI; demo runs a shell on localhost:5000 and an MFE on 3000. Version resolution chooses the highest compatible version by default, supports singleton or strictVersion modes and can even bootstrap two Angular versions side by side with workarounds. Dynamic Federation uses the webpack runtime API to register unknown remotes at runtime, and monorepo vs multi-repo tradeoffs are compared with concrete build and deployment consequences.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 0:36Overview
3. 6:57Example
4. 14:40Demo
5. 17:07Mono vs MultiRepo
6. 19:38Avoiding coupling
7. 20:52Loading whole applications
8. 22:07Advantages and challenges
9. 22:40System with multiple versions
10. 23:16Azure Cloud example
11. 25:24Conclusion

" related talks

• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 21mAngular based Micro frontends with module federationManfred Steyer · ng-conf 2022
• 30mFederated Angular: Micro Frontends with Module FederationManfred Steyer · JSWorld Conference 2021
• 38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with AngularManfred Steyer · AngularNL 2020
• 41mThe Microfrontend RevolutionManfred Steyer · angularday 2020
• 33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with AngularManfred Steyer · ngVikings 2020
• 29mThe Micro Frontend Revolution: Webpack 5 Module Federation and AngularManfred Steyer · AngularUP Experience 2020
• 31mMFEs , Micro-Frontends with Module Federation and AngularManfred Steyer · Reliable Web Summit 2021