Micro-Frontends (MFE)
1. Skill Context
Focus: Scaling frontend development across multiple independent teams, decoupling monolithic SPAs (React/Vue/Angular), and continuous delivery for UI.
Triggers: micro-frontends, module-federation, spa, architecture, web-components.
2. The Monolithic SPA Problem
At enterprise scale, a single React repository (Monolith) becomes a bottleneck.
- 50 developers trying to merge into the same
package.json.
- A 10-minute CI/CD build time.
- The Marketing team cannot deploy a typo fix without dragging the heavy E-Commerce codebase with them.
Micro-frontends apply the microservices philosophy to the browser. The UI is assembled from independent fragments maintained by different teams.
3. Implementation Strategies
A. Webpack Module Federation (Run-time Integration)
The Modern Standard.
Allows a JavaScript application to dynamically load code from another application at runtime.
- Host App (App Shell): Handles routing, authentication, and the global layout (Sidebar, Header).
- Remote App (e.g., Checkout Team): Exposes its
CheckoutComponent. The Host dynamically imports it.
- Pros: Shared dependencies (React is only loaded once). Seamless UX.
- Cons: High coupling in tooling. Requires Webpack 5 (or Vite equivalents).
B. Web Components (DOM Integration)
Teams build their fragments using framework-agnostic Web Components (<checkout-button></checkout-button>).
- Pros: Tech-agnostic. The Host can be Angular, the Remote can be React.
- Cons: Passing complex data structures (objects/functions) across DOM attributes is clunky.
C. IFrames (Isolation Integration)
The Legacy/Nuclear Option.
- Pros: Absolute CSS and JS isolation. Zero chance of a memory leak in the Remote crashing the Host.
- Cons: Terrible UX, routing nightmares, slow performance, impossible to create overlapping overlays (like a global modal).
4. Architectural Anti-Patterns
- The "Shared State" Trap: Trying to use a global Redux store across 5 micro-frontends. If MFE A changes the Redux structure, MFE B crashes. MFEs should communicate via standard DOM Events (
CustomEvent) or query parameters, maintaining minimal shared state.
- CSS Bleeding: If the Checkout MFE defines
.btn { color: red; }, it will globally override the Host's CSS. MFEs must enforce CSS Modules, Styled Components, or Shadow DOM to scope their styles.
- Dependency Bloat: If Team A uses React 17, Team B uses React 18, and Team C uses Vue, the user downloads 3 MB of frameworks. Technology diversity is a theoretical benefit of MFEs, but a practical nightmare. Enforce a unified tech stack at the enterprise level.
1---2name: micro-frontends-23description: Micro-Frontends (MFE)4---5# Micro-Frontends (MFE)67## 1. Skill Context8**Focus**: Scaling frontend development across multiple independent teams, decoupling monolithic SPAs (React/Vue/Angular), and continuous delivery for UI.9**Triggers**: micro-frontends, module-federation, spa, architecture, web-components.1011## 2. The Monolithic SPA Problem12At enterprise scale, a single React repository (Monolith) becomes a bottleneck.13- 50 developers trying to merge into the same `package.json`.14- A 10-minute CI/CD build time.15- The Marketing team cannot deploy a typo fix without dragging the heavy E-Commerce codebase with them.1617**Micro-frontends** apply the microservices philosophy to the browser. The UI is assembled from independent fragments maintained by different teams.1819## 3. Implementation Strategies2021### A. Webpack Module Federation (Run-time Integration)22*The Modern Standard.*23Allows a JavaScript application to dynamically load code from another application at runtime.24- **Host App (App Shell)**: Handles routing, authentication, and the global layout (Sidebar, Header).25- **Remote App (e.g., Checkout Team)**: Exposes its `CheckoutComponent`. The Host dynamically imports it.26- *Pros*: Shared dependencies (React is only loaded once). Seamless UX.27- *Cons*: High coupling in tooling. Requires Webpack 5 (or Vite equivalents).2829### B. Web Components (DOM Integration)30Teams build their fragments using framework-agnostic Web Components (`<checkout-button></checkout-button>`).31- *Pros*: Tech-agnostic. The Host can be Angular, the Remote can be React.32- *Cons*: Passing complex data structures (objects/functions) across DOM attributes is clunky.3334### C. IFrames (Isolation Integration)35*The Legacy/Nuclear Option.*36- *Pros*: Absolute CSS and JS isolation. Zero chance of a memory leak in the Remote crashing the Host.37- *Cons*: Terrible UX, routing nightmares, slow performance, impossible to create overlapping overlays (like a global modal).3839## 4. Architectural Anti-Patterns40- **The "Shared State" Trap**: Trying to use a global Redux store across 5 micro-frontends. If MFE A changes the Redux structure, MFE B crashes. MFEs should communicate via standard DOM Events (`CustomEvent`) or query parameters, maintaining minimal shared state.41- **CSS Bleeding**: If the Checkout MFE defines `.btn { color: red; }`, it will globally override the Host's CSS. MFEs must enforce CSS Modules, Styled Components, or Shadow DOM to scope their styles.42- **Dependency Bloat**: If Team A uses React 17, Team B uses React 18, and Team C uses Vue, the user downloads 3 MB of frameworks. Technology diversity is a theoretical benefit of MFEs, but a practical nightmare. Enforce a unified tech stack at the enterprise level.
j4flmao