As frontend applications grow, monolithic codebases become major bottlenecks. Micro-frontends decompose monolithic user interfaces into manageable, independently deployable units. This article outlines the architectural patterns and deployment strategies necessary to successfully operate micro-frontends at scale.
Decomposing the Frontend
Decomposition can occur along horizontal or vertical boundaries. Horizontal decomposition splits a single page into multiple micro-frontends (e.g., search bar, product catalog, cart). Vertical decomposition gives ownership of entire page paths or workflows to individual teams. We recommend vertical decomposition due to cleaner boundary isolation.
"A vertical micro-frontend pattern matches organizational structures, letting teams operate autonomously from database to UI layout."
Orchestration Options
There are three primary orchestration patterns: build-time integration, server-side composition, and run-time client-side integration (using Module Federation or custom shell components). Module Federation in Webpack and Turbopack represents the current state-of-the-art for dynamic run-time loading.
