Module Federation
Loading code from another build at runtime, with versioning and failure to think about.
4 to work through
-
advanced
A shell application loads three remote modules at runtime. Two were built against one major version of the UI framework and one against the next. Everything works in the shell's local development setup and breaks in production with errors about invalid hook calls and missing context. What is happening, and how should the platform prevent it?
3 min answer -
advanced
A shell application loads three remote modules from other teams at runtime through module federation. What happens when one remote is unreachable at load time, and separately when a remote ships a change that breaks the shell's assumptions?
3 min answer -
advanced
Module federation lets teams share components at runtime rather than through published packages. What does that buy and what does it cost?
1 min answer -
advanced
When do micro frontends solve a real problem, and what do they cost?
2 min answer
4 terms in this topic
Module Federation
Composing a frontend from independently deployed pieces — solving an organisational problem at a real technical cost.
patternRemote Module Loading
Importing code from another application's build at runtime, with the versioning, availability and failure questions that a normal import does not have.
conceptRuntime Composition Risk
The class of failures created by resolving module existence, export shape and shared-dependency versions in the user's browser instead of at build ti…
conceptShared Singleton Skew
The failure class created when independently built front-end bundles expect different versions of a library that must exist once per page, producing …
Neighbouring topics
Frontend & Experience Architecture
General material on architecting the surface the user actually touches.
Rendering Strategies
Client, server, static and incremental rendering, and what each costs on first paint.
Edge Rendering
Running the render close to the user, and the personalisation and cache trade it implies.
Hydration Cost
The gap between visible and interactive, and the JavaScript that closes it.
Micro-Frontends
Independent deployment of UI slices, and the shared runtime that undermines it.
UI Monorepo Strategy
One repository for many front ends, and the build graph that makes it viable.
Design Systems
Components as a versioned internal product, with adoption and deprecation like any API.
Component Contracts
Props, slots and events as an interface, and the breaking change hidden in a style.
Client State Architecture
Server state, UI state and derived state, and why conflating them causes most bugs.
Client Caching & Data Layer
Stale-while-revalidate, invalidation and optimistic updates on the client.
BFF for Experience
One backend per experience, shaped by the screen rather than by the domain.
API Shapes for UI
REST, GraphQL and RPC judged by over-fetching, round trips and client coupling.
Web Performance Budgets
A number a build can fail against, rather than a performance sprint once a year.
Core Web Vitals
LCP, INP and CLS — what they measure, and the architecture that moves them.
Accessibility Architecture
Semantics, focus management and announcements designed in rather than audited in.
Internationalisation
Locale, direction, pluralisation and dates as structural concerns, not string tables.
Client Feature Flags
Flag evaluation on a device you do not control, and the flicker and staleness it brings.
Real User Monitoring
Field data from real devices and networks, against the synthetic run that looked fine.
Frontend Security
CSP, XSS, CSRF, token storage, and the trust boundary that ends at the browser.