Growingcase study
Building a Graph Component Library
Case study — designing and shipping a React network-graph library for several teams, and why rendering tech, API shape and Storybook mattered most.
Frontend craft
$ cd ./topics/realtime-ui
Real-time UIs
Interfaces that stay smooth under a firehose. Streaming transports, 60fps rendering, state that doesn't thrash, and connections that heal themselves.
13 notes🌱 1 seed🌿 10 growing🌳 2 evergreen
Some interfaces can’t afford to be even a little late. When data arrives many times a second, as on a trading screen, a network map or a live dashboard, the UI has to decide what to render, what to batch and what to drop, and still feel calm to the person using it.
I build real-time trading interfaces for a fintech, and before that I built large network-graph visualisations. The lesson from both: the network is rarely the bottleneck. What you do with each message is. Patterns only here. The ideas travel, the specifics of any one system don’t.
Start here
- WebSockets: the two-way channel, and the stateful costs nobody mentions in the tutorial.
- Zustand Transient Updates: how to stop every socket message re-rendering your whole React tree.
- Graph Visualisation Libraries: why rendering technology beats API niceties at ten thousand nodes.
Choosing a transport
| You need… | Read |
|---|---|
| Both sides talking often | WebSockets |
| Server pushes only: feeds, progress, token streams | Server-Sent Events (SSEs) |
| A fallback when long-lived connections are blocked | HTTP Long Polling |
| Rare updates, simplest infrastructure | AJAX Polling |
Keeping connections honest
- Heartbeat: noticing when a connection has died silently, before users see stale data that looks live.
- Message Delivery Semantics: replay, sequence numbers and idempotent updates after a reconnect.
- Message Passing: thinking of the UI as a process with a mailbox.
- Regress, Don’t Grind: Graceful Degradation: what the UI should do when the firehose turns into a trickle.
Rendering under pressure
- Zustand Transient Updates: selectors for most things, direct DOM writes for the hottest values.
- Building a Graph Component Library: WebGL, benchmarks and a compound-component API.
- Smart TV Apps on Low-End Devices: performance when the hardware is the constraint.
Open questions I’m exploring
- What’s the right backpressure story in the browser: drop, coalesce or slow the producer?
- When is it worth moving parsing and aggregation to a worker, and what does that do to latency?
- How do you test a real-time UI deterministically, with replayable message streams as fixtures?
- Will WebTransport change any of this for browser apps, or just for games?
- A Testing Strategy Teams Actually Adopted
- AJAX Polling
- Architecture Decision Records
- Balance Is a Control Loop
- Building a Graph Component Library
- Building a Low-Code BPMN Workflow Platform
- Bulletproof React
- Fallacies of Distributed Computing
- FLP Impossibility
- Graph Visualisation Libraries
- Hacking Forums as Learning Communities
- Handstand Technique: Base, Stack, Corrections
- Headless Component Libraries
- Heartbeat
hover to explore · click to open
Case studies
- Growingcase study
Smart TV Apps on Low-End Devices
Case study — building a broadcaster's streaming app for many TV platforms at Accedo. Memory and performance work for slow devices, a back-navigation model that finally made sense, a full rebrand, and a knowledge-sharing culture.
Frontend craft
🌳 Start here
- Evergreen
WebSockets
A persistent, two-way channel between browser and server. Brilliant when both sides talk often; the price is stateful connections you now have to scale, heartbeat and reconnect.
Real-time UIs - Evergreen
Zustand Transient Updates
For high-frequency socket data, write messages into a store and let only the leaf components subscribe — or skip React rendering entirely for the hottest values.
Real-time UIs
Still growing (9)
- Growing
AJAX Polling
The simplest form of "real-time" — ask the server every N seconds. Wasteful at scale, perfectly fine more often than people admit, and the baseline every other technique is compared against.
Real-time UIs - Growingmetaphor
Balance Is a Control Loop
A handstand is a feedback loop with a sensor, a delay and an actuator. So are autoscalers, rate limiters and a real-time UI under load — and they fail the same way.
Calisthenics Lab - Growing
Graph Visualisation Libraries
For large network graphs, the rendering technology matters more than the API — DOM and SVG struggle past a few thousand nodes, canvas goes further, and WebGL stays interactive at 10k+.
Real-time UIs - Growing
Heartbeat
A periodic "I'm alive" message that lets a system notice when a node has failed. Simple to build, subtle to tune, because a slow node and a dead one look the same.
Distributed systems - Growing
HTTP Long Polling
The "hanging GET" — the server holds a request open until there's news, then the client asks again. Near-real-time over plain HTTP, and still the universal fallback.
Real-time UIs - Growing
Message Passing
"Don't communicate by sharing memory; share memory by communicating." Independent processes exchanging messages over channels, from Go and actors to queues and WebSockets.
Distributed systems - Seedmetaphor
Regress, Don't Grind: Graceful Degradation
On a bad training day you drop to an easier progression rather than grinding ugly reps. Systems under stress should do the same — shed the expensive work, keep the core going.
Calisthenics Lab - Growing
Server-Sent Events (SSEs)
One-way server-to-client streaming over plain HTTP, with automatic reconnection built into the browser. The simplest right answer for feeds, progress updates and streaming AI responses.
Real-time UIs - Growing
Social Network Analysis
Modelling people and their interactions as a graph to find who's influential, which communities form and how behaviour spreads. Centrality, clustering, Louvain community detection, and why graph thinking travels so well.
Platform engineering
On the radar
Coming up
- Balance Is a Control Loop article
- Rust + Wasm for a dense live chart experiment
- 60fps under a firehose article
- SSE vs WebSockets vs WebTransport in 2026 explore