Micro frontends decompose a large frontend application into smaller, independently deployable pieces owned by different teams. Each team owns a vertical slice of the user experience.
When micro frontends make sense: multiple teams working on the same frontend, need for independent deployment cycles, teams wanting different technology choices, or a legacy application requiring incremental modernization.
When micro frontends do not make sense: small teams (under 20 developers), single-product applications, or when the complexity cost exceeds the organizational benefit. Most applications do not need micro frontends.
Module Federation (webpack): share modules between independently built applications at runtime. One application exposes components, another consumes them. The most popular micro frontend approach for React applications.
Composition approaches: build-time composition (npm packages), runtime composition (Module Federation), server-side composition (ESI/SSI), and iframe isolation (simplest but most limited).
Shared dependencies: avoid loading React multiple times. Share common libraries through Module Federation's shared configuration. Version mismatches are the most common micro frontend challenge.
Design system consistency: a shared component library ensures visual consistency across micro frontends. The design system should be the only dependency all micro frontends share.
State management across micro frontends: minimize shared state. Use custom events, a shared event bus, or URL parameters for communication between micro frontends. Tight coupling defeats the purpose.
Routing: decide between a shell application managing all routes, each micro frontend owning its routes, or a combination. The shell approach is simpler for users but creates a coordination point.
Performance implications: multiple bundles, duplicate dependencies, and cross-origin requests add overhead. Careful optimization (shared chunks, lazy loading, CDN caching) mitigates performance impact.
Related services from Verbsz Technologies
If this article is relevant to a project on your roadmap, these are the services our team typically delivers.