Micro Frontends
Architectural pattern extending microservices to the frontend, allowing independent teams to develop and deploy parts of a web application autonomously.
seed#micro-frontends#architecture#react#module-federation#frontend
What it is
Micro frontends extend the microservices concept to the frontend. Instead of a frontend monolith, the application is composed of independent fragments developed by autonomous teams, integrated at runtime or build time.
Integration strategies
| Strategy | Integration | Example |
|---|---|---|
| Build-time | npm packages | Monorepo with packages |
| Runtime (JS) | Module Federation | Webpack/Vite MF |
| Runtime (iframe) | iframes | Legacy integration |
| Server-side | SSI/ESI | Edge composition |
Module Federation
The most popular technique: each micro frontend exposes modules that others can consume at runtime, without needing to rebuild.
When to use
- Multiple teams working on the same product
- Need for independent deployments per section
- Gradual technology migration
- Large enterprise applications
When NOT to use
- Small team (single team)
- Simple application
- When integration complexity exceeds the benefit
Why it matters
Micro-frontends apply microservices principles to the frontend, allowing independent teams to develop, deploy, and scale parts of the interface autonomously. They are the solution when a frontend monolith becomes an organizational bottleneck.
References
- Micro Frontends — Martin Fowler.
- Module Federation — Official documentation.
- single-spa — single-spa, 2024. Micro frontends framework.