Applications instead of libraries: Micro frontends implemented through module federation
summary
Team splits a monolith into microfrontends using Webpack 5 Module Federation to load a remote navigation widget that handles a few million hits/day; integration takes about three to four months to production and a colleague spends ~3 weeks building a dynamic loader (~200–300 lines). Shared-dependency choices (React 16→17) force singletons and coord upgrades, state uses React Context and a small shared provider library, testing relies on isolated bundles plus Cypress synthetic tests and Datadog monitoring with error boundaries.
AI-written summary · about
chapters (11)
- 0:00Applications Instead of Libraries Micro Frontends with Module Federation
- 1:13Distributing front end applications
- 11:292 What is module federation?
- 12:17Load modules remotely at runtime
- 15:59a Application
- 19:59Shared Dependencies
- 28:59Error Handling
- 30:37Testing remote components
- 34:20Scaling Usage
- 35:38Encouraging Adoption
- 37:19Lessons Learned
related talks
45mMicro Frontends in Action!
36mMicro Frontends in Action!
28mModule Federation: Theory vs Practice
47mMicro Frontends Unmasked
30mMicro Frontends in React — a State of the Art Approach
29mFrom Monolithic Web App to Micro-Frontends – Extending Microservices Architecture to the Frontend
51mMicro Frontend: the microservice puzzle extended to frontend
31mMicro frontends and the multiverse of Frameworks