GnoseedGnoseed
Start Learning
Frontend Architecture · 7 modules

Micro-Frontend Architecture

Scale a frontend across many teams without it collapsing into a monolith. Learn the splits, the decisions framework, domain boundaries, composition and the modern tooling that makes it real — and remember it with spaced repetition.

Start learning See sample questions
practice cards
101
practice cards
per day
~10 min
per day
level
Intermediate → Advanced
level
modules
7
modules
About this topic

What are micro-frontends?

Micro-frontends extend the ideas behind microservices to the browser: instead of one large single-page app that every team commits into, the frontend is split into independent pieces — each owned end-to-end by one team, deployed on its own schedule, and aligned to a business domain rather than a technical layer.

The hard parts are not the widgets but the decisions. Vertical or horizontal split? Where do the bounded contexts fall? Should pages be composed on the client, the server, or the edge — and where does routing live? How do independently deployed pieces talk to each other without quietly coupling again? This track is built around Luca Mezzalira's decisions framework — definition, composition, routing and communication — so these trade-offs become deliberate, not accidental.

It closes with the tooling that actually ships micro-frontends today: Module Federation (and 2.0), single-spa, native browser import maps, and Native and Vite federation. Spaced repetition turns all of it from "I read the book once" into recall you can reach for in an architecture review.

What you'll learn

7 modules, seed to bloom

Each module is a set of practice cards — 101 in total. Answer, review, and watch your knowledge grow from seed to full bloom.

Frontend Architecture Landscape

SPAs, CSR/SSR, PWAs, Jamstack, and why monolithic frontends push teams toward micro-frontends

15 cards

Micro-Frontend Principles

Domain modeling, autonomy, independent deployment, fault isolation, observability, and when not to adopt

15 cards

Decisions Framework: Split

Horizontal vs vertical splits, the App Shell, global vs local routing, and sizing by bounded context

15 cards

DDD & Bounded Contexts

Bounded contexts, Core/Supporting/Generic subdomains, ubiquitous language, and finding domain seams

13 cards

Composition & Routing

Client, server, and edge composition, ESI, client vs server routing, the App Shell, and the fat-shell trap

15 cards

Inter-App Communication

Decoupling, the Event Bus, Custom Events and postMessage, Web Storage, URL passing, and message contracts

13 cards

Modern Tooling

Module Federation and 2.0, hosts/remotes, shared singletons, single-spa, import maps, Native and Vite federation

15 cards
Try before you plant

Sample questions

A taste of the real cards. Pick an answer, then reveal the explanation.

Sample · Micro-Frontend Architecture

Which four characteristics define a micro-frontend as an autonomous unit?

  • AA business domain, an autonomous codebase, independent deployment, and single-team ownership
  • BA shared codebase, a common framework, coordinated releases, and a central platform team
  • CServer-side rendering, edge caching, lazy loading, and a single global state container
  • DA REST API, a message queue, a service mesh, and one container per single UI component
Sample · Micro-Frontend Architecture

What characterizes a horizontal split technically and organizationally?

  • ASeveral micro-frontends from different teams coexist on the same view, demanding strong orchestration
  • BOne team owns each full page, so the separate views never share any components between teams
  • CAll of the micro-frontends compile into a single bundle that ships on the very first page load
  • DEach view is rendered entirely on the server and then cached at the edge for every single user
Sample · Micro-Frontend Architecture

Why is "zero communication" the ideal between micro-frontends?

  • AIt keeps domains fully decoupled and self-sufficient, which is key to deploying them independently
  • BIt removes the need to ever load more than a single micro-frontend onto any one page at a time
  • CIt lets every micro-frontend freely share one global variable without any coordination at all
  • DIt guarantees that two separate micro-frontends can never be shown together on the same view
Sample · Micro-Frontend Architecture

What is Webpack Module Federation?

  • AA runtime mechanism that lets separately built and deployed apps share code with one another
  • BA build-time plugin that merges every one of the apps into one single bundle compiled together
  • CA CSS methodology for sharing design tokens across many independently styled applications today
  • DA server-side proxy that stitches the HTML fragments from each app into one combined response
How Gnoseed works

Learn it once, keep it for good

1

Answer a question

Each card is one practical concept with multiple options. Pick what you think is right.

2

Get the full answer

See the correct option plus a clear explanation, and a link to deeper docs when one is available.

3

Review at the right time

A spaced-repetition engine (SM-2 or FSRS) resurfaces each card just before you would forget it.

Why learn this

Why micro-frontend architecture is worth your time

Scale teams, not just traffic

Independent deployment and clear ownership let many teams ship in parallel without a coordinated big-bang release.

Decide on purpose

The decisions framework turns vague "it depends" debates about splits and composition into a structured, defensible choice.

Know the modern toolbox

Module Federation, single-spa and import maps are what teams actually reach for — understand them, not just the buzzwords.

Architect-interview ready

Bounded contexts, Conway's law and fault isolation are staple senior frontend and architecture interview topics.

FAQ

Common questions

Who is this track for? +

Software architects and senior frontend engineers weighing or running a micro-frontend setup. A working grasp of SPAs, SSR and basic DDD helps, but the track starts from the landscape and builds up.

Is it tied to one framework or tool? +

No. Most of the deck is architecture and principles that apply regardless of stack. The Modern Tooling module covers Module Federation, single-spa, import maps and Native/Vite federation so you can map the concepts to real tools.

Are micro-frontends always the right choice? +

No — and the deck says so. A whole theme is when NOT to adopt them: if the added technical and organizational complexity outweighs the benefit, a well-structured monolith is the better call.

Is it free? +

Yes, completely free. No registration or credit card is required, and all your progress is stored locally in your browser.

Ready to master micro-frontends?

Plant your first seed today. Ten minutes a day is all it takes to grow real, lasting frontend-architecture judgment.

Start learning free