Breaking Down Monoliths: Microfrontend Architecture with React
summary
Demo converts a monolithic React feed into a runtime-loaded microfrontend using Module Federation and webpack, with a simple host app that loads a feeds remote. Code is on GitHub and the demo shows live updates when feeds are redeployed independently. Benefits: team-level deployments and isolated failures. Gotchas: shared dependencies require strict versioning, APIs for cross-module communication need design, and documentation or a CLI-generated template is essential to onboard new teams.
AI-written summary · about
chapters (14)
- 0:00Introduction and speaker background
- 0:53Story of Dev Connect app
- 2:18Need for microfrontend architecture
- 3:41What are microfrontends
- 4:44Module Federation in webpack
- 5:27Code demo setup
- 6:53Feeds module implementation
- 7:14Host app configuration
- 7:57Demo of host app integration
- 8:40Independent team workflow
- 9:43Benefits of microfrontends
- 11:08Challenges of microfrontends
- 12:54Documentation and resources
- 13:38Closing and Q&A
related talks
45mMicro Frontends in Action!
36mMicro Frontends in Action!
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development
01h 17mChallenges in Building Micro Front Ends
20mBuilding Microfrontends on AWS
44mApplications instead of libraries: Micro frontends implemented through module federation
28mModule Federation: Theory vs Practice
47mMicro Frontends Unmasked