React + Ember A Practical Guide to Micro Frontend Integration
summary
A practical migration example: an Ember monolith moves one module to a React micro frontend loaded at runtime as a web component with shadow root to stop CSS bleeding; build uses Vite + pnpm, emits a manifest.json and an app-loader.js that the Ember modifier imports, then mounts the fingerprinted bundle. postMessage handles cross-app events. Iframes and single-spa are rejected; runtime composition trades a small load-time cost for independent deployments, smaller host bundles, and successful production use.
AI-written summary · about
chapters (9)
- 0:00Introduction and agenda
- 1:58Micro frontends overview
- 5:09Monolith to micro frontend transition
- 10:21Choosing React for micro frontend
- 11:24Integration approaches compared
- 16:16Final approach and key criteria
- 17:22Code walkthrough and setup
- 26:32Reception impact and benefits
- 28:30Live demo of integration
related talks
45mMicro Frontends in Action!
25mFramework Freedom with Micro Frontends
21mEmbracing Micro-frontends: A Comprehensive Guide for Modern Web Development
36mMicro Frontends in Action!
30mMicro Frontends in React — a State of the Art Approach
21mMigrating critical apps to React
29mFrom Monolithic Web App to Micro-Frontends – Extending Microservices Architecture to the Frontend
37mIntroduction to Micro Frontends