Portfolio ↗

Client State Architecture

Server state, UI state and derived state, and why conflating them causes most bugs.

4Questions
10Flashcards
3Terms
Drill this topic All of Frontend & Experience Architecture
Questions

4 to work through

  1. intermediate Multiple choice

    What is the difference between server state and client state, and why does conflating them cause bugs?

    2 min answer
  2. advanced

    A front-end team wants to replace their global state library because "state management is unmanageable". How do you evaluate the request?

    2 min answer
  3. advanced

    An application keeps significant state on the client and synchronises with a server. What are the architectural decisions?

    2 min answer
  4. advanced

    Design client state for a document application supporting offline editing, real-time collaboration and instant navigation.

    1 min answer
Terminology

3 terms in this topic

practice

Client State Architecture

Separating server state, client state and URL state — the distinction that removes most frontend complexity.

 pattern

Optimistic Update Reconciliation

The policy deciding what happens when a change already shown to the user differs from what the server ultimately accepts - the part of optimistic UI …

 concept

Server State Versus UI State

The distinction between data owned elsewhere and cached locally, and state that exists only in this session — conflating them causes most client stat…
Frontend & Experience Architecture

Neighbouring topics

Frontend & Experience Architecture

General material on architecting the surface the user actually touches.

4 quiz 8 cards 2 terms

Rendering Strategies

Client, server, static and incremental rendering, and what each costs on first paint.

5 quiz 10 cards 3 terms

Edge Rendering

Running the render close to the user, and the personalisation and cache trade it implies.

5 quiz 8 cards 3 terms

Hydration Cost

The gap between visible and interactive, and the JavaScript that closes it.

5 quiz 11 cards 4 terms

Micro-Frontends

Independent deployment of UI slices, and the shared runtime that undermines it.

5 quiz 9 cards 3 terms

Module Federation

Loading code from another build at runtime, with versioning and failure to think about.

4 quiz 9 cards 4 terms

UI Monorepo Strategy

One repository for many front ends, and the build graph that makes it viable.

4 quiz 8 cards 2 terms

Design Systems

Components as a versioned internal product, with adoption and deprecation like any API.

5 quiz 8 cards 2 terms

Component Contracts

Props, slots and events as an interface, and the breaking change hidden in a style.

4 quiz 9 cards 3 terms

Client Caching & Data Layer

Stale-while-revalidate, invalidation and optimistic updates on the client.

6 quiz 10 cards 4 terms

BFF for Experience

One backend per experience, shaped by the screen rather than by the domain.

4 quiz 8 cards 2 terms

API Shapes for UI

REST, GraphQL and RPC judged by over-fetching, round trips and client coupling.

4 quiz 11 cards 3 terms

Web Performance Budgets

A number a build can fail against, rather than a performance sprint once a year.

3 quiz 8 cards 5 terms

Core Web Vitals

LCP, INP and CLS — what they measure, and the architecture that moves them.

5 quiz 10 cards 3 terms

Accessibility Architecture

Semantics, focus management and announcements designed in rather than audited in.

6 quiz 6 cards 3 terms

Internationalisation

Locale, direction, pluralisation and dates as structural concerns, not string tables.

5 quiz 11 cards 4 terms

Client Feature Flags

Flag evaluation on a device you do not control, and the flicker and staleness it brings.

4 quiz 10 cards 4 terms

Real User Monitoring

Field data from real devices and networks, against the synthetic run that looked fine.

4 quiz 10 cards 5 terms

Frontend Security

CSP, XSS, CSRF, token storage, and the trust boundary that ends at the browser.

5 quiz 9 cards 4 terms