Edge-Deployed Frontend Discipline for Real-Time Market Data

Latency budgets, streaming connections, and the cache-coherence calculus.

§ IFrame

A trader watches a Polymarket order book on a dashboard. The first quote refreshes at 220 ms after the underlying tick. The next refreshes at 410 ms. The third arrives 80 ms after the second, two ticks after the matching engine has already cleared the level. The trader closes the dashboard and goes to read the API directly.

That is the failure mode this lesson defends against.

Production frontend for real-time market data is a network-coordination problem dressed as a UI problem. The work happens at three levels: at the matching engine that produces the tick, at the edge node that ships the tick to the operator's browser, and at the browser frame that paints it. A latency budget allocates time across these three levels. A cache-coherence rule decides what the browser is allowed to show when it does not yet have the freshest tick. The discipline of shipping production frontend for real-time data is the discipline of holding these allocations honestly.

This is the Sunday discipline. Pure DevOps with no pair-refraction, executed at the frontend tier, oriented to the production-ship surface where the operator actually meets the data.

§ IIFoundations

Three foundations carry the lesson.

The latency budget as a contract. A latency budget is a per-tier allocation that sums to the total operator-perceived latency. A 300 ms total operator-budget allocates as 50 ms at the engine, 150 ms at the edge, 100 ms at the browser. The engine guarantees the first 50 ms or it is broken. The edge guarantees the middle 150 ms or it is broken. The browser guarantees the final 100 ms or it is broken. Each tier owns its portion. Cross-tier blame is forbidden when the budget is structured this way. Each tier reports its own measurement, the three measurements sum to total, and the breach is named to the tier that breached it.

The streaming-connection topology as a choice. Four shapes carry production traffic. Long-poll HTTPS is the simplest, the worst-fitting, useful as a fallback. Server-Sent Events ship one-way streaming, simple to operate, well-suited to market data where the operator never sends back. WebSocket adds bidirectional traffic, more complex to operate, required when the operator sends orders back. WebTransport over HTTP/3 is newer, datagram-oriented, useful where loss-tolerance is acceptable and latency floor must be lowest. Each shape carries an operational cost. The choice is not a preference. The choice is a fit to the data-flow geometry.

The cache-coherence rule as a defense. Real-time data has a freshness ceiling beyond which the operator should not be shown stale values. A coherence rule says: if the most recent tick is older than 500 ms, the frontend renders a stale-indicator overlay; if older than 2 seconds, the frontend disconnects and reconnects; if older than 10 seconds, the frontend logs the disconnect and surfaces an alert to the operator. The rule prevents the operator from acting on data the system already knows is unsafe to act on. The freshness ceiling is set by the trade discipline, not by the network capacity.

§ IIIMechanism

Three mechanisms operationalize the foundations.

The edge POP as the coordination point

Cloudflare Workers, Vercel Edge Functions, Fastly Compute, AWS Lambda@Edge: all variants of the same primitive. Code runs at the geographic edge, between the operator's browser and the origin matching engine. The edge POP is where the latency budget's middle tier lives. The edge does three jobs. It terminates the operator's TLS connection close to the operator, saving round-trip time on handshake. It holds an open streaming connection to the origin, avoiding per-message connection costs. It enforces the cache-coherence rule before any value is shipped to the operator.

The edge coordinates. The matching engine computes; the browser paints; the edge holds the open pipe and enforces the freshness contract.

The streaming connection as the through-line

Where REST polling carries one round trip per quote, a streaming connection carries one round trip per session. The connection is opened once, kept alive, and used to push every tick. The session-open cost amortizes across thousands of ticks; the per-tick cost approaches the wire-time floor.

The trade-off is operational. A streaming connection is stateful. The edge holds it, the origin holds the other end, and either end's failure breaks the through-line. Production discipline names the failure modes plainly. Connection-drop is the case where the edge or origin closes the channel; recovery is reconnect-with-backoff. Connection-stall is the case where the connection stays open but no data flows; recovery is a heartbeat-timeout that forces a reconnect. Connection-out-of-order is the case where the tick sequence breaks; recovery is a snapshot-resync where the frontend re-fetches the full state and replays subsequent ticks against it.

Each failure mode is a known pattern. Each pattern has a defined recovery. The system does not improvise at the edge under load; the system executes the recovery procedure that was written before the load arrived.

The browser's paint loop as the final tier

A browser paints at 60 frames per second on a healthy machine. That is one paint every 16.6 ms. If a tick arrives 5 ms before a paint, it shows on the next frame. If a tick arrives 5 ms after a paint, it waits 11 ms for the next paint. The frontend's job at the final tier is to coalesce ticks into the paint cycle without losing the freshness contract.

The pattern is requestAnimationFrame coordination. Ticks accumulate in a buffer. The buffer is drained at the paint callback. Only the most recent value within the freshness ceiling is rendered. Older ticks in the buffer are dropped before the callback returns.

§ IVWorked Example — A Polymarket Order-Book Dashboard at 300 ms Operator-Budget

Tier allocation. Engine 50 ms. The matching engine emits the tick within 50 ms of fill. Edge 150 ms. The Cloudflare Worker forwards the tick to the browser within 150 ms of engine emission. Browser 100 ms. The browser paints the tick within 100 ms of receipt.

Connection topology. Server-Sent Events from edge to browser. WebSocket from edge to origin (the matching engine already emits via WS). One-way to the browser, because the trader does not send orders through this dashboard; orders go through a separate authenticated channel where the operator confirms each send explicitly.

Cache-coherence rule. Most-recent-tick age must be under 500 ms or the dashboard renders a yellow border. Over 2 seconds, the dashboard renders a red border and the trader knows not to act. Over 10 seconds, the dashboard reconnects automatically and logs to operator-side telemetry.

Edge code outline:

on connection from browser:
  open SSE channel to browser
  open WS channel to origin matching engine
  on tick from origin:
    timestamp the tick at edge
    if browser channel is open:
      push tick to browser SSE
    update last-tick-time
  on heartbeat (every 1s):
    if last-tick-time > 2s ago:
      close browser SSE  (force reconnect)

The edge code does three things only. It bridges the two streaming connections. It timestamps every tick at the edge so the browser knows the network-tier latency. It enforces the heartbeat-timeout that the cache-coherence rule mandates.

Browser code outline:

on SSE message:
  push tick to buffer
on requestAnimationFrame:
  if buffer non-empty:
    take most recent tick
    check tick age against coherence rule
    apply visual treatment per age band
    render

The browser code does three things only. It accepts ticks into a small buffer. It runs the coherence check at every paint. It paints the freshest in-band tick or surfaces the staleness state.

The result is a dashboard where the trader can trust what they see. The freshness contract is named, measured, and visibly broken when broken. The trader's judgment about whether to act on the data is informed by the data itself, including by what the data refuses to claim.

§ VConnection to Prior Lessons

Production Signal Pipelines for Adversarial Markets (Friday γ). The signal pipeline emits filtered signal events. Those events are the matching-engine analog in this lesson's geometry. The pipeline's selectivity discipline does not absolve the frontend of its own discipline. If the pipeline ships clean signals on a budget, the frontend tier must ship those signals to the operator on its own budget. The two budgets compose. A trader cannot act on a clean signal that arrives 8 seconds late.

Validator Operations (Saturday δ). Validator operations produce telemetry: block heights, vote rates, slashing alerts, identity-key health checks. Operator dashboards over validator clusters carry the same latency-budget discipline as market-data dashboards. A validator-cluster dashboard that shows a stale vote-rate misleads the operator about whether the validator is online. The cache-coherence rule has the same shape. Paint the freshest value, surface staleness visibly, force a reconnect when the contract breaks. The operator running validators is doing the same essential work as the operator running market dashboards: making decisions on streaming telemetry whose freshness determines whether the decision can be trusted.

Workload Identity for Multi-Agent Pipelines (Wednesday β). mTLS at the edge tier is the security perimeter of the edge POP. SPIFFE-issued identities for edge workers let the origin matching engine know which edge node is connecting. That identity-binding is required when the operator's authentication is bound to a session and the session lives at the edge. The edge node is not a passive cache. It is an authenticated party in the cryptographic chain. SPIFFE makes the edge a first-class identity, not a relay.

§ VIConnection to Today's Dev Lesson

The Web Dev lesson today covers the three languages of the frontend (JavaScript, TypeScript, HTML) through the same data-flow geometry this Ops lesson maps. JavaScript implements the runtime streaming primitives that this Ops lesson assumes exist: EventSource for SSE consumption, WebSocket for bidirectional streaming, fetch with ReadableStream for HTTP-streaming patterns, the requestAnimationFrame callback for paint-loop coordination. TypeScript adds the type-safety contract at the data boundary so a malformed tick from the edge is caught at compile time rather than at the paint frame. HTML provides the chassis that the JavaScript animates and the TypeScript constrains: custom elements that isolate render scope, link rel=preconnect that opens the network handshake before the page asks for the stream, shadow DOM that prevents cross-component style leakage when the operator runs multiple dashboards in one tab.

Read the Dev lesson next. The Ops discipline names what the system must do. The Dev lesson shows what the languages give the operator to do it with.

Paired Dev lesson → Polyglot-Dev/Web/2026-05-24-streaming-market-data-in-the-browser-js-typescript-and-html-as-three-layers-of-one-pipe

§ VIIClosing

A production frontend for real-time market data is honest about three things: where each tier's budget begins and ends, what streaming-connection shape fits the data-flow geometry, and what the operator is allowed to see when the freshness contract breaks. These three are the Sunday-discipline minimum. A dashboard that holds them is a dashboard the operator can trust. A dashboard that does not, the operator will close.

This is the production-ship discipline at the frontend tier. The trader who closes the dashboard and reads the API directly is the trader the discipline exists to keep.

Examine the latency budget on the dashboard you ship next. Name each tier. Measure each tier. Set the cache-coherence rule before the first operator sees the first tick.