Micro-Frontends and Module Federation

As organisations and frontends grow, a single large React codebase deployed as one unit can become a bottleneck: many teams stepping on each other, slow builds, and coupled releases where one team's change blocks everyone's deploy. Micro-frontends are an architectural approach that splits a frontend into independently developed and deployed pieces, each owned by a team — applying microservice thinking to the UI.

Module Federation is the key enabling technology, originally from Webpack 5 and now available for other bundlers including Vite. It lets one application (a host) load code from another (a remote) at runtime, sharing dependencies like React so they are not duplicated. This runtime composition is what allows separately-built, separately-deployed pieces to come together as one application in the browser.

This lesson explains what micro-frontends are, how Module Federation enables runtime integration, the host/remote model and shared-dependency handling, and — importantly — the significant trade-offs. Micro-frontends solve real organisational problems at scale but add substantial complexity, so understanding when they are worth it, and when they are overkill, is as important as the mechanics.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.