Portfolio ↗

API Shapes for UI

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

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

4 to work through

  1. intermediate Multiple choice

    A marketplace of eBay's kind ranks its feed per user and re-ranks continuously as listings end and prices change, so an item's position can move within seconds. Users scroll infinitely on mobile. Which pagination approach should the API use?

    3 min answer
  2. intermediate

    A mobile client makes eleven requests to render one screen. What is the architectural problem, and what are the options?

    2 min answer
  3. intermediate

    A mobile screen makes six sequential API calls and takes two seconds on a good connection. What are your options?

    2 min answer
  4. advanced

    A developer platform exposes both a resource-oriented API and a graph query API. What does each do well, and what breaks?

    1 min answer
Terminology

3 terms in this topic

practice

API Shapes for UI

Designing APIs for what screens actually need — reducing round trips without coupling the backend to the interface.

 concept

Client Request Waterfall

A chain of requests where each one can only start after the previous response arrives, so the screen's load time is set by the depth of the chain tim…

 concept

Over-Fetching

Transferring fields the interface will not display, which costs bandwidth and parse time on exactly the devices least able to afford them.
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 State Architecture

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

4 quiz 10 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

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