Book 0 · Lesson 0.6

The browser as a runtime

Describe HTML → DOM → JS → paint pipeline
Connect SolidJS signals to fine-grained UI updates

Prerequisites: 0.5

The radar dashboard is not magic — it is a browser running JavaScript downloaded from Vite.

What the browser does

Fetch HTML/JS/CSS
Parse into DOM + executable JS
Run SolidJS — subscriptions update only what changed
Network — TanStack Query polls /api/metrics/summary
Paint pixels when metrics or SSE rows update

Download HTML/JSVite serves SolidJS bundle to the browser

SolidJS vs “reload the page”

Classic sites re-render big chunks. SolidJS signals mean when total_events increments, only that card’s text node updates — good practice for live dashboards.

Book 6 goes deeper. You already have the running app at :5174.

Teach-back prompt

What runs in the browser vs on the analyzer server when metrics refresh?

Inspect SolidJS in DevTools

Open http://localhost:5174 with DevTools → Network.
Find /api/metrics/summary polling every ~5s.
Open Elements — locate a metric card updating.
Note: fine-grained DOM updates without full page reload.

Lesson 0.6 check

1. TanStack Query in radar primarily handles… Kafka consumption Server state fetching TLS certs WASM compile