LearnViz CompSci
Home / Learn / Web Development / Micro-Frontends

Advanced Topic 50 of 51 Web Development

Micro-Frontends

Splitting a frontend into independently delivered pieces.

How it works

Micro-frontends extend microservice ideas to the user interface: a web application is composed of independently developed, tested and deployed front-end pieces, each owned by a different team and possibly using different frameworks. Composition happens at build time, on the server, via iframes, through Web Components or at runtime with module federation, with shared design systems and contracts for navigation, state and events.

Step-by-step walkthrough

  1. A shell page composes independent frontends.
  2. Each team builds and deploys its own feature.
  3. The shell loads them at runtime, for example with module federation.
  4. The shell loads Team B's feature too.
  5. A shared design system keeps the look consistent.

Where it is used

Large organizations with many teams working on one product, such as e-commerce sites with separate catalog, cart and checkout teams, use micro-frontends to scale development and release independently.

Common pitfall

Duplicated dependencies increase bundle size, inconsistent look and feel can creep in, and cross-team coordination for shared state and routing is complex. Performance suffers when many apps load on one page. They add operational overhead and are unnecessary for small teams. Define strong boundaries, shared tokens and an integration contract before adopting.

Where it fits in the course

Micro-Frontends is topic 50 of 51 in Web Development, rated Advanced. It follows Canvas and WebGL. The next topic is Edge Computing for Web.

Practice and explore

How to study this topic

  1. Read the explanation above and restate the definition in your own words.
  2. Open the interactive lesson and answer its mini quiz.
  3. Read the common pitfall, then write a short example that avoids it.
  4. Check your understanding in the Web Development quiz, and revisit the topic if you miss a question.

Frequently asked questions

What is Micro-Frontends?
Splitting a frontend into independently delivered pieces. It belongs to Web Development and is an advanced-level topic.
Where do people use Micro-Frontends?
Large organizations with many teams working on one product, such as e-commerce sites with separate catalog, cart and checkout teams, use micro-frontends to scale development and release independently.
What is the most common mistake with Micro-Frontends?
Duplicated dependencies increase bundle size, inconsistent look and feel can creep in, and cross-team coordination for shared state and routing is complex.
What should I learn before this topic?
Start with Canvas and WebGL, the topic just before it in Web Development.
How can I practice it?
Answer the mini quiz in the interactive lesson, then take the Web Development quiz.
Is Micro-Frontends hard to learn?
It is an Advanced topic. Expect to read the explanation more than once and to connect it with earlier topics. Working through a small example by hand helps most.
How long does it take to learn Micro-Frontends?
Most learners can read the explanation and finish the interactive lesson in under an hour. Fluency comes from applying the idea, so plan a few short practice sessions with the quiz.
Which topics are related to Micro-Frontends?
Canvas and WebGL, Edge Computing for Web, Web Components are closely connected. The full list is in the related topics section of this page.
What should I study after Micro-Frontends?
Continue with Edge Computing for Web, the next topic in Web Development.

Related topics