Introduction to Micro Frontends
summary
Claims a microservice architecture on the frontend actually works and explains three concrete implementations: a simple fat wrap loader that injects bundles and calls a global init, using iframes with postMessage for isolation, and the single-spa NPM module with bootstrap mount unmount lifecycle and lazy loading. Shows an evie event bus (≈80 lines, zero deps) handling ~50 services in tests, reports a year of production use that enables independent repos, per-service deploys, mixed React/Angular apps, and fewer merge conflicts.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 0:35Legacy languages
- 1:39Micro Frontends
- 6:56Why use Micro Frontends
- 10:58FatTrap function
- 12:47Global function
- 13:35Render function
- 17:27iframes
- 18:10postmessage
- 21:40Single Spa
- 23:07Lazy Loading
- 24:36Single Spark Configuration
- 25:40Single Spark Activity
- 27:51Bootstrap
- 29:43React
- 31:22Micro Frontend implementations
- 32:48Things you shouldnt do
- 33:37Standards
- 34:25Questions
related talks
34mIntroduction to Micro Frontends
45mMicro Frontends in Action!
36mMicro Frontends in Action!
51mMicro Frontend: the microservice puzzle extended to frontend
46mMicro Frontend: the microservice puzzle extended to frontend
44mMicro Frontend: The Microservices Headache Extended to the FrontEnd
48mMicrofrontend Architecture – technical implementation.
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development