Phases & Modules
Two strands, 29 modules. The browser strand (bi-*) removes the abstraction boundary between your
code and the pixels; the framework strand (fw-*) rebuilds the runtimes that sit on top. They run
in parallel, not in sequence — the framework strand is what fills the Chromium build's dead time —
and they join at the cross-layer vertical traces.
The sibling project ../frontend-principal-journey/ covers application- and
organisation-level frontend engineering. Two of its modules are hard prerequisites here, noted
below.
Browser Internals · bi-00 … bi-16
Remove the abstraction boundary between your code and the pixels.
Two setups, not one. Phases 0–2 require no local Chromium build — source navigation, spec mapping, archaeology and tracing all work on a stock browser plus a checkout. Treating the build as a gate is the standard way this track stalls.
Phase 0 — Instrumentation · no build required
| Module | Title | Build? | Headline |
|---|---|---|---|
| bi-01 | Navigating Chromium Independently | no | 8 timed drills; the deliverable is the query log, not the answers |
| bi-03 | HTML Parsing | no | 76 tokenizer states, 21 insertion modes; 7 of 21 are tables |
Gate 0 → 1: locate any Blink behaviour in ≤3 queries · state which process owns a subsystem from its path alone · read a Perfetto trace and name five pipeline events.
Phase 1 — Foundations · no build required
| Module | Title | Headline |
|---|---|---|
| bi-02 | Architecture & the Process Model | SiteInfo / SiteInstance / BrowsingInstance / ProcessLock; why the principal is a site |
| bi-04 | DOM Internals & Object Lifetime | unified heap; Node/CSSValue/LayoutObject get typed heap spaces |
| bi-05 | Web IDL, V8 & the Binding Layer | ~0.5 MB of generated filenames; four costs of crossing |
Phase 2 — Style · no build required
| Module | Title | Headline |
|---|---|---|
| bi-06 | Chromium C++ for Frontend Engineers | just-in-time reference, not a course |
| bi-07 | The CSS Engine | 822 properties, 311 declare invalidate: — 34 layout-only, 95 layout+paint, 4 compositing |
Phase 3 — Layout & Paint · build helpful
| Module | Title | Headline |
|---|---|---|
| bi-08 | Layout | four coordinate spaces; constraint-in / fragment-out makes results cacheable |
| bi-09 | Paint, Display Items & Property Trees | a PaintChunk is display items sharing one property-tree state |
Phase 4 — Compositor, Scheduling & Tooling · build required from bi-12
| Module | Title | Headline |
|---|---|---|
| bi-10 | Compositor & GPU | composited effects modify the active tree — no main thread needed |
| bi-11 | Blink Scheduling | 2 s gesture deferral · 5 min mobile freeze · timers only are throttleable |
| bi-12 | Debugging & Tracing | trace event names are greppable identifiers — the rung 3 ↔ rung 1 bridge |
Phase 5 — Tests, Contribution & Synthesis · build required
| Module | Title | Headline |
|---|---|---|
| bi-13 | Test Architecture & WPT | TestExpectations is 9,418 lines; a bare [ Skip ] is forbidden |
| bi-14 | Contributing to Chromium | rungs 0–5; correct-per-spec is necessary and not sufficient |
| bi-15 | Cross-Layer Vertical Traces | 8 traces; the deliverable is the layer-skipping table |
| bi-16 | Capstone — Component to Pixel | explain setCount(count+1) through eight layers, twice |
Framework Internals · fw-01 … fw-12
Build it, break it, then read the production source — never the other way round.
The strand runs in parallel with Track 2, not after it. It is what fills the Chromium build's dead time, and two of its modules have hard prerequisites in Track 2.
| Module | Title | Prerequisite | Headline |
|---|---|---|---|
| fw-01 | mini-redux + reading Redux entire | — | first, not last: the only library small enough to read end to end |
| fw-02 | mini-react I — elements → effects | bi-04 | one change in 200 items must cost ≤5 DOM ops |
| fw-03 | Reactivity: mini-vue + signals | fw-02 | build both back-to-back; the contrast is the content |
| fw-04 | mini-react II — deriving Fiber | bi-11 | derive the work loop; the spec catches tearing |
| fw-05 | Vue-like Renderer & the Matrix | fw-03 | the §47 matrix, including a Blink row |
| fw-06 | Template & JSX Compilers | bi-03 | a wrong patch flag is a silent correctness bug |
| fw-07 | A Minimal Bundler | fw-06 | cache-invalidation, for the fourth time in the curriculum |
| fw-08 | A Client-Side Router | fw-02 | only the most recent navigation may commit |
| fw-09 | A Server-State Query Cache | fw-08 | build every race deliberately |
| fw-10 | A Virtualized List Engine | bi-08–bi-10 | price what virtualization breaks, not just what it saves |
| fw-11 | Production Source Apprenticeship | all of the above | classify: essential / hardening / accretion |
| fw-12 | Testing Library, Automation & DevTools | fw-02 | a synthetic click ignores hit testing — the overlay experiment |
Gate: for any UI operation, state which layers run and which are skipped — and defend it from mechanism rather than recall.
The eight patterns
Both tracks converge on the same eight structural findings. Each appears in both a C++ rendering engine and a JavaScript runtime, which is the evidence that they are properties of the problem rather than idioms of either. They are the exportable output of the whole curriculum, and they are enumerated in bi-16.