Stop 20 · Advanced TopicsTopics · 7/14

Micro Frontends

In short

So your company has decided to split the frontend. Now the practical questions start: how do the pieces load, share React, talk to each other and still look like one product?

Applying the micro frontend architecture in practice — splitting a large frontend into independently deployable pieces, typically composed at runtime via Module Federation or iframes.

The jaadu holds matching plates in front of three caterer stalls under one wedding tent.

Think of it like this

A wedding with many caterers

Chaat from one vendor, biryani from another, desserts from a third. The family sets shared rules: same plates, same timing, one stage. Micro frontends need the same: a shell that hosts everyone, shared design rules and clear handover points.

Watch it happen

A page made of three teams' apps

Shell

Checkout app

Header app

URL /checkout matched

1/5The shell owns routing. It sees /checkout belongs to the checkout team.

The big ideas

What you need to know

A shell app

A host app owns the layout, login and top-level routes, and loads each micro frontend into its slot.

Ways to compose

Options include runtime loading with Module Federation, web components, iframes, or npm packages combined at build time.

Talk through contracts

Pieces communicate through URLs, custom events or small shared APIs, not by reaching into each other's state.

One design system

A shared component library and tokens keep five teams' screens looking like one app.

Save yourself the pain

Common mistakes

Oops

Letting every micro frontend bundle its own copy of React and the design system.

Do this instead

Share big common libraries, so users don't download React three times.

Oops

One micro frontend reading another's global store directly.

Do this instead

Communicate through URLs, events or a small agreed API, so each team can change internals safely.

Your mission

Compose two mini apps

~45 min

Quick check

Two micro frontends need to react when a user adds an item to the cart. What's a clean way to connect them?

Go deeper

1Prototype two tiny apps that share one component via Module Federation.
2Weigh the added operational complexity against the team-independence benefit.
3Read about routing and shared-state strategies across micro frontend boundaries.