Micro Frontends in Action!
summary
Claims that micro frontends split a frontend monolith into vertical, independently deployable slices that include front and back ends, using Webpack Module Federation for runtime remotes and dependency sharing. Shows a working demo: a React container plus remote apps (outdoor events and book-event) wired with CustomEvent addToCart to increment a header counter, using useEffect listeners and cleanup. Explains tradeoffs: build-time vs runtime integration, bundle bloat when duplicates occur, and the singleton shared React 18 rule that picks the highest compatible version.
AI-written summary · about
chapters (10)
- 0:00Start
- 12:07Drawback Build Time integration
- 13:33What is Runtime integration?
- 14:14What is Webpack Module Federation?
- 16:24Version mismatch shared lib
- 18:45Generate Container
- 19:05Generate Micro Frontends
- 19:22Implement Components
- 19:59Change configurations
- 20:11Implement Routing
related talks
36mMicro Frontends in Action!
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development
01h 17mChallenges in Building Micro Front Ends
30mMicro Frontends in React — a State of the Art Approach
57mMicro Frontends – a strive for fully verticalized systems
48mMicrofrontend Architecture – technical implementation.
31mMicro frontends and the multiverse of Frameworks
27mMicro Frontends: Break Up You Web App!