Micro-Frontend Concepts & Trade-offs
Understand why teams adopt micro-frontends, the runtime vs build-time split approaches.
Micro-Frontend Concepts & Trade-offs is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Are Micro-Frontends?
Micro-frontends extend microservices to the UI layer. A single web application is split into independently owned, developed, and deployed frontend pieces owned by separate teams.
Integration Strategies
There are three main integration strategies: build-time (npm packages), server-side (edge composition), and runtime (Module Federation, iframes, web components).
Build-Time Integration
Publish shared components as npm packages. Simple, but any change requires re-releasing and re-deploying all consumers — not truly independent deployment.
// Team A publishes:
npm publish @company/design-system
// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independentRuntime Integration via Module Federation
Webpack 5 Module Federation lets one app (host) load components from another app (remote) at runtime — true independent deployment.
iframe Integration
Embed micro-frontends in iframes for maximum isolation. Pros: zero CSS/JS conflicts. Cons: poor UX (scroll, focus, sizing), hard to share state, SEO unfriendly.
Web Components
Wrap each micro-frontend in a custom element. Works with any framework and provides native isolation, but lacks React-specific features like context sharing.
// Remote team builds:
customElements.define('product-detail', ProductDetailElement);
// Host team embeds:
<product-detail product-id="123" />Trade-offs: Benefits
Independent deployment (deploy one team's UI without touching others), team autonomy (choose own stack and dependencies), and scalability (teams work in parallel without code conflicts).
Trade-offs: Costs
Operational complexity (more repos, CI pipelines, deployments), bundle duplication (React loaded multiple times without sharing), performance overhead, and harder debugging across boundaries.
When to Choose Micro-Frontends
Micro-frontends are most valuable for: multiple large teams working on the same product, different tech stacks for different sections, or the need to deploy sections completely independently.
When NOT to Choose Micro-Frontends
Avoid for small teams (the overhead outweighs benefits), simple apps, or when you have full control of the whole frontend — monorepos with Nx/Turborepo are usually sufficient.
Shared Design System
Regardless of integration strategy, a shared design system (published as a package or exposed via Module Federation) ensures visual consistency across micro-frontends.
Quick Check
Which integration approach enables truly independent deployment of micro-frontends at runtime?
Recap
Micro-frontends decompose the UI for team autonomy and independent deployment. Integration options range from npm packages (simple, not independent) to Module Federation (runtime, truly independent). Weigh the operational costs — micro-frontends suit large multi-team products but add complexity for smaller projects.
Frequently asked questions
Is the “Micro-Frontend Concepts & Trade-offs” lesson free?
Yes — the full text of “Micro-Frontend Concepts & Trade-offs” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Micro-Frontend Concepts & Trade-offs”?
Understand why teams adopt micro-frontends, the runtime vs build-time split approaches. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Micro-Frontend Concepts & Trade-offs” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Micro-Frontend Concepts & Trade-offs
- Module Federation with Webpack 5
- Shared State & Routing Between MFEs
- Independent Deployment & CI Pipelines for MFEs