Component Contracts
Props, slots and events as an interface, and the breaking change hidden in a style.
4 to work through
-
intermediate
A design system releases 4.3.0. The changelog says no breaking changes. Eleven of forty consuming applications report broken layouts. Review the versioning policy - what is wrong with it?
3 min answer -
intermediate
A team asks for a new prop on a shared component. When do you say no, and what do you offer instead?
2 min answer -
intermediate
What makes a shared component's interface stable enough that consumers can upgrade without breakage?
1 min answer -
advanced
A platform team's design system ships connected components - an avatar that fetches the user from its id, a price tag that calls the pricing service from a sku, and a notification bell that opens its own WebSocket. Forty applications consume it. The package is 180 KB compressed and the bell is in the shared header on every page. Review this. What would you remove, what would you keep, and what would you leave alone even though it looks wrong?
2 min answer
3 terms in this topic
Component Contracts
The interface a shared UI component presents — where the discipline is refusing options as much as providing them.
conceptObservable Component Contract
The full set of things a consumer can depend on in a shared component - DOM structure, class names, computed spacing, specificity and render timing -…
conceptProp Interface Stability
The commitment a component makes about its props, slots, events and emitted structure — including the parts consumers depend on that were never inten…
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.
Module Federation
Loading code from another build at runtime, with versioning and failure to think about.
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.
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.