A microfrontend extends the microservice concept to the frontend: the UI is split into independently developed, tested, and deployed pieces, each owned by a separate team.
Problem solved:
- Coordination overhead — large teams merge into one repo; every deploy requires full-team coordination.
- Tech heterogeneity — teams can choose their framework independently (React + Vue + Angular in one app).
- Independent release cadence — checkout team deploys without waiting for recommendations team.
- Codebase scalability — bounded context prevents the monolith from becoming unmaintainable.
Integration approaches:
- Build-time: npm packages (tight coupling — shared releases needed).
- Run-time via iframes — strong isolation, poor UX.
- Run-time via JavaScript — Module Federation, Single-SPA (most common).
- Server-side composition — Edge Side Includes, server-side includes.