Micro-frontends apply the principles of microservices to the frontend. A powerful approach for large organizations, but with its share of complexity not to be underestimated.
The backend world adopted microservices to allow independent teams to deploy their services without central coordination. Micro-frontends apply the same logic to the frontend: each team owns its part of the interface, from backend to button, autonomously. No more merging code from ten teams into a frontend monorepo before each release.
Several implementation strategies exist. The simplest is server-side composition (SSI, Edge Side Includes): the server assembles HTML fragments produced by each team. iframe integration offers maximum isolation but raises performance and UX issues. The most popular solution today is client-side composition via Module Federation (Webpack 5, Vite): each micro-frontend is a dynamically exposed JavaScript module, loaded on demand. Web Components offer a native, framework-agnostic alternative.
The challenges are real. Visual consistency between independent teams requires a strict shared design system. Performance can suffer if dependencies (React, Vue…) are duplicated — Module Federation solves this through dependency sharing. Routing and global state management between micro-frontends requires a clear convention. Our advice: only adopt micro-frontends if your teams are truly independent and your organization large enough to justify the complexity.
- Module Federation (Webpack 5) is the most mature approach
- A shared design system is non-negotiable
- Avoid duplicating heavy dependencies
- Start by splitting along team boundaries, not code boundaries