Introduction to Micro Frontends
summary
Claim: treat the UI like microservices and run independently deployed widgets. Implementation details: a simple fetch-and-inject bootstrap that loads JS/CSS and calls a global mount function, iframe + postMessage for isolated apps, and the open source single-spa modules with bootstrap/mount/unmount hooks for React/Angular/Vue. Small event bus Evee is used for cross-app events. Real usage: injected React into a large Rails monolith to avoid 20,000-test deployments, Google/Microsoft/Facebook use variants, and lazy loading and independent deploys work.
AI-written summary · about
chapters (13)
- 0:00Intro
- 3:19Microservice principles
- 6:34How did we get here?
- 8:08What problem does it solve?
- 11:09Implementation
- 12:22External app bootstrapping
- 15:31React app export
- 15:51Fetching React app in the Root app
- 17:02Event bus - Eev
- 21:50Single-spa library
- 24:35Loading function
- 30:21Reactive Programming
- 31:59Conclusion
related talks
37mIntroduction to Micro Frontends
36mMicro Frontends in Action!
45mMicro Frontends in Action!
57mMicro Frontends – a strive for fully verticalized systems
36mMicro Frontends - Breaking Monoliths
29mMicro Frontends, how to evolve to an extensible frontend
19mHarnessing Microfrontends: Platforms for Web Apps
32mYou don't know Microfrontends