Micro-Frontend Architecture: Modular UI

← Back to Architecture Hub

Micro-Frontend Architecture: Modular UI

1. Why Micro-Frontends? (The "Team" Scale)

Imagine you have $100$ frontend developers.

If they all work in one GitHub repo, the code reviews will be an endless nightmare.
The Solution: Team A builds the "Dashboard" in React. Team B builds the "Search" in Svelte.
They deploy their apps to different servers. A central "Shell" app pulls them together.
The Benefit: Team A can update the dashboard at 2:00 PM without Team B even knowing. It is total independence for the UI.

2. Orchestration: How to Combine Them?

IFrames (The Old Way): Very safe but slow and looks terrible for the user. (Avoid this in 2026).
Web Components (The Standard): Wrap your React app in a standard HTML tag like <my-dashboard>.
Module Federation (The Pro Way): A built-in feature of Webpack and Vite. It allows a "Shell" app to download a JavaScript file from another server and run the component as if it was local.

3. The Shared State Problem

If the "Header" needs the User's name, and the "Profile App" also needs it, how do they share it?

Don't use Redux for everything.
The Fix: Use Custom Events or a simple Local Storage bridge.
The Golden Rule: Keep communication between micro-frontends to a Minimum. If they are constantly talking to each other, you have built a "Distributed Monolith" in the browser.

4. Design Consistency: The Design System

If $10$ teams are building $10$ apps, the buttons will all look different.

Mandatory Requirement: You MUST have a shared Design System (Package) that contains the CSS, the Colors, and the standard Components (Buttons, Inputs).
Every micro-frontend imports this package to ensure the user feels like they are using ONE website, not ten.

Frequently Asked Questions

Is it slow to load? If you aren't careful, YES. If every micro-frontend downloads its own copy of React, the site will be $20$MB.

The Fix: Use Module Federation to "Share" dependencies. The Shell app downloads React once, and all other micro-frontends use that same shared version.

Is it overkill? For a small team? Absolutely. Micro-frontends add a massive amount of "Orchestration" complexity. Only use this if you have more than $3$ independent teams and your current frontend is becoming unmanageable.

Key Takeaway

Micro-Frontends are about "Decoupling User Experience." By mastering Module Federation and the discipline of a shared Design System, you gain the ability to scale your UI across hundreds of developers without sacrificing speed or quality. You graduate from "Managing a React App" to "Architecting a Web Ecosystem."

Part of the Software Architecture Hub — engineering the UI.