Micro Frontends
Micro frontends is an architectural pattern that decomposes a web application's frontend into smaller, independently developed and deployed pieces, often owned by separate teams, that are composed together into a single user-facing…
Definition
Micro frontends is an architectural pattern that decomposes a web application's frontend into smaller, independently developed and deployed pieces, often owned by separate teams, that are composed together into a single user-facing application.
Overview
Micro frontends extend the philosophy behind backend microservices to the frontend: instead of one large, monolithic single-page application maintained by one team, the UI is split into independently buildable and deployable units — for example, a checkout team owns the checkout flow, a search team owns the search experience — that are integrated into a cohesive product at runtime or build time. Several integration approaches exist: build-time integration (publishing each micro frontend as a package and combining them during a shared build), runtime integration via iframes or Web Components, and techniques like Webpack Module Federation that allow separately built and deployed JavaScript bundles to share dependencies and be composed dynamically in the browser. Each approach makes different trade-offs between deployment independence, shared dependency bloat, and cross-team consistency. Micro frontends are most valuable at organizational scale, where multiple teams need to ship frontend changes independently without coordinating a single monolithic release — companies like Spotify, IKEA, and Zalando have published accounts of adopting the pattern. For smaller teams or products, the added architectural complexity (shared design systems, versioning, cross-team contracts) often outweighs the benefits, and a well-organized monolithic frontend is simpler to build and reason about. It is often mentioned alongside Single Page Application (SPA) in this space. It is often mentioned alongside Microservices in this space.
Key Concepts
- Frontend split into independently developed and deployed pieces
- Enables separate teams to own and release parts of the UI independently
- Integration via build-time packages, iframes, Web Components, or Module Federation
- Requires shared conventions (design system, routing, auth) across pieces
- Trades some consistency and simplicity for team-level deployment independence
- Most valuable at organizational scale with multiple autonomous frontend teams