Micro Frontends REX - Divide to Rule Better!
summary
Describes a production Micro Frontends setup using Webpack Module Federation and Angular to assemble a single shell from remote widget apps with a shared design/core library, three deployed apps and ~15 developers. Explains concrete artifacts (remoteEntry bundles, declarative shell layout, drag‑and‑drop widget catalogue) and discusses failures and fixes: replacing a brittle event bus with a contextual global store, preventing duplicate API calls with a request‑coalescing cache, and moving toward standalone components to avoid Angular module injector issues.
AI-written summary · about
chapters (18)
- 0:00Introduction
- 3:51Banking monolith G2
- 7:00Micro frontend concepts
- 11:14Webpack Module Federation
- 15:06Prototype analysis
- 16:31Design and core libraries
- 18:38Widget communication and state
- 23:10Global state challenges
- 25:38Widget state and context
- 27:00Network requests and caching
- 28:46Angular module challenges
- 31:14Micro frontend benefits
- 33:21Team autonomy
- 35:48Team collaboration and domains
- 37:13Testing and monitoring
- 39:00Project status and next steps
- 42:07Prototype demo
- 43:09Conclusion
related talks
36mMicro Frontends in Action!
47mMicro Frontends Unmasked
45mMicro Frontends in Action!
31mMicro frontends and the multiverse of Frameworks
46mMicro Frontend: the microservice puzzle extended to frontend
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development
33mThe Microfrontend Revolution - Using Webpack 5 Module Federation with Angular
38mThe Microfrontend Revolution: Using Webpack 5 Module Federation with Angular