Scaling Micro-Frontends with Custom Elements
summary
Claim: use custom elements (web components) + templates + shadow DOM to compose independently deployed micro-frontends that register via custom tags (must include a dash), expose lifecycle callbacks (connected/disconnected, attribute changes) and communicate via message passing. Trade-offs: multiple frameworks load per page (React/Angular/Vue), duplicated runtimes and larger JS cost versus iframes or standardizing a single framework. Server-side rendering and shared theming are possible but require coordination.
AI-written summary · about
chapters (19)
- 0:00Introduction and speaker
- 1:27Company and team structure
- 3:15Micro-frontends concept
- 7:36Custom elements basics
- 10:10Framework independence challenges
- 13:01Custom elements communication
- 15:29Custom element lifecycle
- 17:16Styling custom elements
- 19:23Shadow DOM explained
- 21:49Theming and CSS trade-offs
- 24:23Centralized styling solutions
- 26:20Templates and shadow roots
- 27:47Framework compatibility
- 29:11Performance considerations
- 31:03Loading multiple frameworks
- 34:18Political vs technical solutions
- 36:06Brand consistency issues
- 38:16Useful resources
- 39:42Q&A session
related talks
34mMicro Frontends
31mMicro frontends and the multiverse of Frameworks
45mMicro Frontends in Action!
24mScaling Frontend Development using Micro-frontends
30mMicro Frontends in React — a State of the Art Approach
36mMicro Frontends in Action!
29mMicro Frontends, or How to Evolve to an Extensible Frontend
57mMicro Frontends – a strive for fully verticalized systems