When enterprise engineering teams scale beyond one hundred frontend developers, single monolithic frontend codebases collapse under their own organizational weight: hour-long CI build queues, merge conflict gridlock, dependency version lock-in, and constant friction over release schedules.
Micro-Frontends decompose monolithic SPAs into autonomous, independently deployable frontend applications assembled seamlessly inside a unified customer browser window.
The Three Dominant Composition Paradigms
- Client-Side Module Federation (Webpack / Vite): Micro-apps dynamically import remote JavaScript bundles at runtime, sharing single instances of core dependencies (React, design tokens) to prevent duplicate payload weight.
- Server-Side Routing (Edge Gateways): Decoupling micro-frontends by URL path (e.g.,
/checkoutvs/dashboard) routed by edge proxies like Cloudflare or Fastly. - Hardened Web Components with Shadow DOM: Providing complete CSS and JavaScript encapsulation when micro-apps are built by external vendor teams.
Figure 6: Host Shell Container orchestrating federated remote micro-apps.
