Frontend

Micro-Frontends

Compose the UI from independently deployable frontend modules

Splits the browser app into team-owned slices (by route or widget), integrated via module federation, iframes, or web components. Mirrors microservices on the frontend.

Enterprise scalehigh complexity

Architecture diagram

High-level component relationships

Key components

App shell

Routing, auth shell, shared layout

Micro-frontends

Team-owned bundles loaded at runtime

Design system

Shared tokens and components for consistency

Integration layer

Module federation, single-spa, or iframes

Data flow

Shell loads route-specific micro-frontend bundle
Each MFE calls APIs (shared or dedicated BFFs)
Cross-MFE communication via events or shared state bus

Pros

Team autonomy for UI releases
Incremental migration from legacy UI
Technology diversity per slice (React + Vue)

Cons

Bundle size and performance coordination
Inconsistent UX without strong design system
Complex CI/CD and versioning across MFEs

When to use

Large frontend org with multiple product areas
Migrating legacy UI piece by piece

When to avoid

Small team with one React app
Performance-critical single-page experience

Real-world examples

Spotify web
IKEA composable storefront
Large bank portals

Related technologies

Module Federationsingle-spaWeb ComponentsNx