Architectural pattern extending microservices to the frontend, allowing independent teams to develop and deploy parts of a web application autonomously.
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.
| 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 |
The most popular technique: each micro frontend exposes modules that others can consume at runtime, without needing to rebuild.
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.
JavaScript library for building user interfaces through declarative, reusable components, with an ecosystem spanning from SPAs to full-stack applications with Server Components.
Code organization strategy where multiple projects coexist in a single repository, sharing dependencies, configuration, and build tooling.
Architectural style structuring an application as a collection of small, independent, deployable services, each with its own business logic and data.
Native web standards for creating reusable, encapsulated components that work in any framework or without one.
Reusable template for creating micro frontends with React, TypeScript, Tailwind CSS, and Vite. Includes design system, testing, and CI/CD.
Micro frontend shell with a complete design system, 24 components, 666 tests, and WCAG AA compliance. Published on npm as @jonmatum/react-mfe-shell.
Interactive demo application for the React MFE Shell design system with PWA support, automated metrics, and component showcase.
Patterns and libraries for managing frontend application state predictably, from local component state to shared global state.
Architectural pattern where each client type has its own dedicated backend adapting microservice APIs to that client's specific needs.