Phases & Modules
This repository holds three parallel tracks, all sharing the same module shape:
| Track | Prefix | Modules | What it builds |
|---|---|---|---|
| Frontend Principal Engineering | fe-NN | 51 planned, 6 built | Architectural and organisational judgment, measured |
| Browser Internals | bi-NN | 17 | Chromium, Blink and V8 — from source to pixels |
| Framework Internals | fw-NN | 12 | Build a React, a signals runtime, a bundler, a router, a query cache |
They are siblings, not stages. The frontend track develops judgment; the internals tracks remove abstraction boundaries. Cross between them when a topic genuinely stalls without the other — the hooks are enumerated in the Curriculum Map §2.
The phase structure below applies to the frontend track. The bi- and fw- tracks are ordered
but not phased; see their own roadmap modules
(bi-00, fw-01).
Seven phases, 51 modules, plus a continuous AI-assisted-engineering spine. The ordering is derived from real dependencies, not topic popularity — see the Curriculum Map for the dependency graph and the five load-bearing chains.
Legend: ✅ built & measured · 🟡 scaffolded · ⬜ planned
Phase 1 — Platform Substrate · Foundation → Senior
Before any abstraction, know what the abstraction is hiding.
| Module | Title | Status | Headline measured result |
|---|---|---|---|
| fe-01 | Execution Model, Scheduling & the Rendering Pipeline | ✅ | Microtask chunking rendered 0 frames vs 49; naive worker worst of 7 strategies |
| fe-02 | Memory Model, Retention & Leaks | ✅ | An unused sibling closure retained 38 MB vs 0.01 MB (5744×) |
| fe-03 | Object Shapes, Hidden Classes, ICs & JIT | ✅ | One forced layout = 1,448 de-megamorphised property reads |
| fe-04 | HTML as an Application Platform | ✅ | Native <dialog> 7/7 behaviours in 222 bytes; custom 6/7 in 5.4× |
| fe-05 | CSS Architecture, Containment & Invalidation | ✅ | content-visibility cut initial layout 98%, identical DOM |
| fe-06 | Layout: Flex, Grid, Intrinsic Sizing, Container Queries | ✅ | 1.4× across six layout modes; absolute positioning slowest |
| fe-07 | Networking: HTTP/1.1→3, Caching, ETags, CDN | ⬜ | |
| fe-08 | TypeScript as a Contract System | ⬜ | |
| — | Capstone 1 — Foundation | ⬜ | Production-quality accessible responsive application |
Gate 1 → 2: predict execution order and rendering timing of unfamiliar async code unaided · find a leak from a heap-snapshot diff · read a waterfall and name the bottleneck class.
Phase 2 — Framework Mechanics · Senior
A framework is a scheduling and diffing policy with ergonomics attached.
| Module | Title | Status |
|---|---|---|
| fe-09 | Component model, reconciliation, Fiber, render vs commit | ⬜ |
| fe-10 | Hooks mechanics, stale closures, the useEffect pathology | ⬜ |
| fe-11 | Memoization economics | ⬜ |
| fe-12 | Concurrent rendering, transitions, Suspense as scheduling | ⬜ |
| fe-13 | Reactivity models compared (Vue / Svelte / Solid / Web Components) | ⬜ |
| fe-14 | UI algorithms: diff, LRU, tries, intervals, virtualization | ⬜ |
Phase 3 — Architecture & Data · Senior → Staff
A frontend is a distributed system with a rendering engine attached.
| Module | Title | Status |
|---|---|---|
| fe-15 | State taxonomy: local / lifted / URL / server / global / derived | ⬜ |
| fe-16 | Server state ≠ client state; query caches & invalidation | ⬜ |
| fe-17 | Races, cancellation, idempotency, optimistic update + rollback | ⬜ |
| fe-18 | API integration as a distributed-systems problem | ⬜ |
| fe-19 | Application architecture — and its overengineering critique | ⬜ |
| fe-20 | Designing for the unhappy path | ⬜ |
| fe-21 | Rendering architectures: CSR / SSR / SSG / ISR / streaming / islands / RSC | ⬜ |
| — | Capstone 2 — Intermediate | ⬜ |
Phase 4 — Quality Attributes · Staff
These are properties of the architecture, and they are measurable.
| Module | Title | Status |
|---|---|---|
| fe-22 | Performance engineering & budgets | ⬜ |
| fe-23 | Loading architecture: splitting, tree shaking, preload, Early Hints | ⬜ |
| fe-24 | Accessibility as engineering | ⬜ |
| fe-25 | Frontend security | ⬜ |
| fe-26 | Internationalisation | ⬜ |
| fe-27 | Mobile web & PWA | ⬜ |
| fe-28 | Workers & parallelism | ⬜ |
| fe-29 | WebAssembly | ⬜ |
| fe-30 | Large-scale UI performance | ⬜ |
| — | Capstone 3 — Senior | ⬜ |
Phase 5 — Quality Engineering · Staff
Thousands of tests can still produce low confidence.
| Module | Title | Status |
|---|---|---|
| fe-31 | Test strategy economics | ⬜ |
| fe-32 | UI testing | ⬜ |
| fe-33 | E2E & flaky-test prevention | ⬜ |
| fe-34 | Integration & contract testing | ⬜ |
| fe-35 | Visual regression | ⬜ |
| fe-36 | AI-assisted QA | ⬜ |
| fe-37 | Principal quality engineering | ⬜ |
Phase 6 — Platform & Delivery · Staff → Principal
You stop building applications and start building the conditions under which others build them.
| Module | Title | Status |
|---|---|---|
| fe-38 | Design systems | ⬜ |
| fe-39 | Build tooling | ⬜ |
| fe-40 | Monorepos | ⬜ |
| fe-41 | Microfrontends — taught critically | ⬜ |
| fe-42 | Frontend platform engineering | ⬜ |
| fe-43 | Observability | ⬜ |
| fe-44 | Reliability | ⬜ |
| fe-45 | CI/CD & release engineering | ⬜ |
| — | Capstone 4 — Staff | ⬜ |
Phase 7 — Principal Judgment · Principal → Distinguished
The work is now decisions, influence, and being right about reversibility.
| Module | Title | Status |
|---|---|---|
| fe-46 | Architecture Decision Records | ⬜ |
| fe-47 | Technical decision-making: one-way vs two-way doors | ⬜ |
| fe-48 | Technical debt | ⬜ |
| fe-49 | Migrations | ⬜ |
| fe-50 | Principal skills, strategy, technology radar | ⬜ |
| fe-51 | Failure case-study gauntlet — all 12 incidents, cold | ⬜ |
| — | Capstone 5 — Principal | ⬜ |
| — | Capstone 6 — Distinguished / SME | ⬜ |
The spine — AI-assisted engineering
Specification areas §20–24 are not a phase. They run continuously from Phase 1, because deferring them means practising the workflows only after your judgement is good enough not to need practice. The governing rule: an agent may produce anything whose failure modes you can enumerate yourself.
Sibling tracks
Browser Internals (bi-00 … bi-16) — Chromium architecture, the HTML parser, DOM internals,
the V8 binding layer, the CSS engine, layout, paint, the compositor, scheduling, tracing, Web
Platform Tests, and the contribution workflow. Start at bi-00.
Framework Internals (fw-01 … fw-12) — build a Redux, a React core, a signals runtime, a
concurrent scheduler, a Vue renderer, a template compiler, a bundler, a router, a query cache and a
virtualised list, then read the production sources. Start at
fw-01.
Both derive from Browser & Framework Internals and are tracked in PROGRESS.md.