Embracing Micro-frontends: A Comprehensive Guide for Modern Web Development
summary
Argues micro-frontends reduce monolith friction and shows a live demo: a React shell built with CRA + craco that loads three remote entries (Angular, React, Vue) via Webpack Module Federation, letting individual teams deploy independently and roll back with blue‑green Kubernetes pipelines. Covers composition strategies (client, edge, server), dependency options (no‑share, CDN, private packages), cross‑frame comms using postMessage, styling isolation via shadow DOM or CSS modules, and testing/deployment tradeoffs with concrete tooling and examples.
AI-written summary · about
chapters (13)
- 0:00Introduction and speaker intro
- 1:03Monolithic frontend challenges
- 2:50What are micro frontends
- 5:59Key considerations for micro frontends
- 7:03Designing micro frontends
- 9:11Rendering approaches for micro frontends
- 10:15Managing dependencies in micro frontends
- 11:40Communication between micro frontends
- 12:25Routing in micro frontends
- 13:51Styling strategies for micro frontends
- 15:36Testing and deployment of micro frontends
- 17:23Live demo of micro frontend setup
- 20:13Best practices and when to use micro frontends
related talks
45mMicro Frontends in Action!
01h 17mChallenges in Building Micro Front Ends
36mMicro Frontends in Action!
30mMicro Frontends in React — a State of the Art Approach
48mMicrofrontend Architecture – technical implementation.
20mBuilding Microfrontends on AWS
47mMicro Frontends Unmasked
52mMicro frontends: prepare for the ride