Micro-Frontend Architecture
The microservices pattern applied to the UI: independent teams own and deploy independent modules.
Micro-frontends apply the microservices pattern to the frontend: independent teams own independent UI modules that compose into one application. This is relevant for a multi-module platform (AP, CN, PO, Expense, etc.) where different teams could independently deploy their modules.
Key technologies: Webpack Module Federation (share code between separate builds at runtime), Single-SPA (orchestration framework), and Web Components (native browser encapsulation).
The trade-offs: greater team autonomy and independent deployments, but complexity in shared state, consistent UX, and routing coordination.
- Module Federation lets separately built and deployed bundles import each other's code at runtime, which is what makes independent deploys possible.
- The win is organizational — team autonomy and independent release cadence — not technical performance.
- The hidden costs are shared state, consistent UX/design, dependency duplication, and routing coordination across modules.
Interview-Ready Q&A
Build-time integration (publishing each module as an npm package) is simplest but couples releases — you must rebuild the container to ship a change. Runtime integration via iframes gives strong isolation but poor UX and hard cross-frame communication. Runtime integration via JavaScript (Module Federation or Single-SPA) loads modules dynamically into one page, giving real independent deploys and shared runtime, at the cost of coordinating dependencies and shared state. Web Components offer native encapsulation as the integration unit. The tradeoff axis is isolation versus shared UX and deploy independence versus coupling.
- 1Micro-frontends are microservices for the UI: independent teams, independent deploys, composed into one app.
- 2Module Federation = runtime code sharing; Single-SPA = orchestration; Web Components = native encapsulation.
- 3Buy autonomy and independent deploys; pay with shared-state, UX-consistency, and routing complexity.