Cheat sheetMS-04

Micro-Frontends

Microservices & APIs / Micro-Frontends

Micro-frontends extend independent deployability and team ownership to the browser, giving each team a full vertical slice. Composition choice governs how much autonomy you keep.

01
Vertical ownershipA team owns UI-to-data for a capability, often fragment plus its own BFF, and deploys it alone.
02
CompositionBuild-time (simple, re-couples deploys), server-side (good perf, independent), run-time (max autonomy, more client coordination).
03
Shared concernsA shared design system and cross-fragment conventions keep look and behavior consistent - the governance role.
04
Trade-offsGain autonomy and independent deploys; pay with duplicated bundles and integration/consistency work.
⚑

Reach for micro-frontends when a shared frontend has become the bottleneck to team autonomy, not by default. Prefer server-side or run-time composition to preserve independent deployment; back it with a shared design system and a lightweight contract for navigation and shared state.

Run-time splitCatalog, Product Detail, and Checkout ship fragments independently; a thin container composes them per route so Checkout can hotfix alone.
ConsistencyAll fragments consume one design system, so buttons and typography stay uniform despite separate deploys.
Build-time composition = fragment is a dependency -> container must redeploy
Run-time mechanisms: web components, module federation, iframes
Pair each fragment with its team's BFF for a full vertical slice
micro-frontendscompositionteam-autonomyvertical-slicedesign-system
review in 6d