← Lessons

quiz vs the machine

Platinum1850

System Design

The Micro Frontends

Split a large frontend into independently deployable pieces owned by teams.

6 min read · advanced · beat Platinum to climb

What micro frontends are

Micro frontends extend the microservice idea to the browser. A page is composed from several independently built and deployed frontends.

  • Each team owns one piece end to end, from code to deploy.
  • Pieces are integrated at build time, run time, or via the server.
  • The goal is independent delivery without a single shared release.

How a page composes

A shell loads several remote frontends and arranges them into one experience.

Integration approaches

  • Run time composition loads remotes in the browser, often via module federation.
  • Server side composition assembles fragments before sending HTML.
  • Build time composition bundles packages together at compile.

Tradeoffs

  • Teams ship independently, which speeds delivery for large orgs.
  • But you risk duplicated dependencies and inconsistent UX.
  • Shared design systems and clear contracts keep the pieces coherent.

Practical notes

  • Budget bundle size since each remote adds weight.
  • Define ownership of shared concerns like auth and routing.
  • Use a design system so the seams between apps stay invisible.

Key idea

Micro frontends let teams build and deploy parts of a page independently, trading shared releases for autonomy at the cost of consistency you must actively manage.

Check yourself

Answer to earn rating on the learn ladder.

1. What is the main benefit of micro frontends?

2. Which approach loads remote frontends in the browser?

3. How do you keep micro frontends visually consistent?