Deadline
A dense instrument dashboard that treats 50ms as a hard deadline, on Android hardware nobody would choose.
A wall-mounted instrument dashboard — a dozen live gauges, all moving — with one non-negotiable rule: touch to visible response in under 50ms, on a cheap Android tablet.
The interesting part isn’t the gauges. It’s that the budget was fixed first and everything else had to fit inside it.
What the budget forces
One loop, not twelve. Every gauge is a canvas, and the naive build gives every canvas its own requestAnimationFrame. Twelve loops means twelve independent schedulers fighting over one thread, and the frame time becomes a lottery. There is a single rAF driving every canvas, in a fixed order. One loop, one budget, one place to look when it blows.
React runs at 20Hz. The canvas runs at 60. They are not the same clock and pretending otherwise is what kills these dashboards. State batches to ~20Hz — that’s faster than a human reads a number — while the drawing loop stays at 60 because motion is what the eye catches. Once you stop routing every telemetry tick through React’s reconciler, most of the jank disappears.
desynchronized: true on the contexts, which lets the canvas skip a compositing round-trip. It’s a real win on weak GPUs and costs nothing on strong ones.
DPR capped at 2. A cheap tablet reporting 3× device pixel ratio is asking you to push 2.25× the pixels for a difference nobody can see at arm’s length. Cap it and hand the frame budget back.
contain: strict, and animation restricted to transform and opacity only. Anything that touches layout is a bug, not a style choice.
Bursts go off-thread. A worker takes anything that would stall the loop, because the loop missing a frame is the only failure mode that matters.
The lesson
None of this is clever. It’s a list of things you can only justify once you’ve written the number down and agreed to be beaten by it.
Every one of these decisions is boring in isolation and unarguable in aggregate — and none of them would have survived a review that started from “what’s the nicest architecture?” instead of “what fits in 50 milliseconds?”
Pick the number first. The architecture falls out of it.