Micro Frontends

Micro frontends split a large UI into independently owned and deployed slices, composed into a single user experience.

When to use

• Multiple teams need independent release cycles.
• The UI spans distinct product domains with separate roadmaps.
• Different tech stacks must coexist during migration.

When not to use

• A single team owns the app end-to-end.
• The product is small or changes rapidly with no clear domain boundaries.
• You cannot support the added operational overhead.

Composition options

• Module federation: Host shell loads remote bundles at runtime.
• Web components: Encapsulate features as custom elements.
• Iframe isolation: Strongest isolation, but heavier and harder to integrate.
• Server-side composition: Assemble UI fragments at the edge or server.

Ownership and routing

• A shell app owns global nav, auth, and top-level routing.
• Each micro frontend owns its sub-routes and feature state.
• Define route contracts so teams can evolve independently.

Shared dependencies

• Align core runtime versions to avoid duplication (React, Angular, UI libs).
• Prefer shared design tokens and a common component library.
• Keep shared dependencies minimal and versioned.

Cross-app communication

• Use explicit event contracts and schemas.
• Avoid direct imports between micro frontends.
• Prefer message buses or custom events with clear payloads.

type AuthEvent = { type: 'auth:changed'; userId: string | null };

type Listener = (event: AuthEvent) => void;

class EventBus {
  private listeners = new Set<Listener>();
  subscribe(listener: Listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  }
  publish(event: AuthEvent) {
    this.listeners.forEach((listener) => listener(event));
  }
}

Styling and design system

• Use shared tokens for spacing, typography, and color.
• Decide on isolation strategy: CSS modules, shadow DOM, or style scoping.
• Test for visual regressions across host and remotes.

Build and deployment

• Each micro frontend has its own CI pipeline and release cadence.
• Version remotes and pin compatible versions in the shell.
• Use feature flags for gradual rollout and rollback.

Performance and reliability

• Minimize duplicate bundles; share runtime libraries.
• Track Web Vitals per micro frontend and for the shell.
• Ensure error boundaries at integration seams.

Interview checklist

• Explain trade-offs versus a modular monolith.
• Describe how you handle shared dependencies and design systems.
• Outline cross-app communication contracts and ownership boundaries.
• Discuss deployment, rollback, and observability strategy.