Frontend & Experience Architecture
General material on architecting the surface the user actually touches.
4 to work through
-
intermediate
What decides whether a product should render on the server or the client?
2 min answer -
advanced
A browser-based design tool must render complex documents at sixty frames per second while several people edit simultaneously. What does that force in the client architecture?
2 min answer -
advanced
A product manager asks why the app feels slower on Android than on iOS when it is the same web application. Walk me through what you investigate and what you tell them.
3 min answer -
advanced
In 2015 Flipkart built Flipkart Lite as a progressive web app after a period of pushing users to its native app. The published case study on web.dev reports time on site rising from about 70 seconds to about 3.5 minutes with 3x lower data usage and 63% of those users arriving over 2G. What problem forced the decision what did it actually buy and where would copying it be a mistake?
2 min answer
2 terms in this topic
Client Runtime Constraint
The properties of the browser or device you do not control — CPU, network, version, extensions — which make the client a distributed system component…
conceptFrontend Architecture
The structural decisions in client applications — rendering strategy, state ownership, boundaries and delivery — which have the same character as bac…
Neighbouring topics
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.
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.