1. Load a remote
The host dynamically imports a remote module exposed by another app at runtime.
const Cart = await import("cart/CartApp")Typorithm · medium
Micro-Frontends
micro-frontendsarchitecturemodule-federationcompositiondeployment
Saved on this device
Full lesson · 8 learning steps Open any exercise for focused practice
10%
Step 1 of 8 · intro card
Learn Micro-Frontends
Scale & Decoupling
Micro-frontends are independently built and deployed frontend apps composed at runtime — often via Module Federation. Each is owned by a team that ships on its own cadence, traded against the cost of runtime composition.
Instead of one monolithic frontend, each team builds and deploys its own app — cart, search, checkout — and the host stitches them together at runtime.
Module Federation lets a remote expose modules (cart/CartApp) that the host imports dynamically, so the cart team can ship without rebuilding the host.
The trade-off is composition cost: shared dependencies, version skew, and runtime integration must be managed, in exchange for true independent deployment per team.
01
Each frontend app is built and deployed independently.
02
Module Federation composes remotes at runtime.
03
Independence trades against composition complexity.
// host app loads a remote at runtime
const Cart = await import("cart/CartApp")
// Module Federation exposes "cart/CartApp"
// from an independently deployed remote
mountWidget(Cart.default)Read the implementation
Connect each part of the code to the concept before you type.
2. Remote name
The string names a Module Federation remote and the module it exposes.
"cart/CartApp"3. Compose at runtime
The host composes the remote into its page only once it has loaded.
mountWidget(Cart.default)4. Module Federation
Module Federation lets a separately built and deployed app expose modules to the host.
// Module Federation exposes "cart/CartApp"A complete learning loop
01
Understand
Read the concept map and follow the code breakdown.
02
Reconstruct
Type the implementation, repair mistakes and work through every recall exercise.
03
Verify
Use the final check without hints; revisit weak concepts in short practice sessions.