Domain
Frontend Development
A systematic learning path for frontend development — from JavaScript/TypeScript to React/Vue, performance optimization, and accessibility, covering component design and architecture.
The Terrain of This Field
The terrain of frontend development can be read as a continent you climb from the "trailhead of language" at the foot, across the watershed of frameworks, to the plateau of quality. The starting point is the footing of JavaScript, where every route converges. From code that runs to code that reads, and on to code guarded by types (TypeScript), you gain your altitude one step at a time while assembling the gear to "extend safely."
Higher on the ridge the path divides toward two main summits: the range of React and the range of Vue. Armed with types you climb a summit, pass through component design, and converge on the universal peak of "how to confront complexity." A framework is not the destination but a route up to the heights of design.
Surrounding the summits is the "plateau of quality" — the cross-cutting tableland you traverse last no matter which peak you came from, spreading across styling, performance, accessibility, and testing. Performance and accessibility are the junctions where multiple routes cross, lifting a "UI you can build" into a "UI that is fast, usable by everyone, and hard to break."
Follow the arrows to read in order / solid = required, dashed = recommended
Share this map
Grouping
Difficulty
Difficulty
Dependencies
Computing layout...
Books in this domain
9 books
Learning React, 2nd Edition
Alex Banks, Eve Porcello
Programming TypeScript
Boris Cherny
The Art of Readable Code
Dustin Boswell, Trevor Foucher
Testing JavaScript Applications
Lucas da Costa
Effective TypeScript, 2nd Edition
Dan Vanderkam
Fluent React
Build Fast, Performant, and Intuitive Web Applications
Tejas Kumar
JavaScript: The Definitive Guide, 7th Edition
JavaScript: The Definitive Guide
David Flanagan
Building Micro-Frontends
Luca Mezzalira
A Philosophy of Software Design, 2nd Edition
John Ousterhout
Dependencies
Reason: Once you understand the basics of TypeScript's type system, you systematically learn the knack of using it 'effectively.' Effective TypeScript provides judgment criteria—eighty-three concrete items on leveraging type inference and taming any—for making types a weapon in practice.
Reason: With TypeScript fundamentals in place, you build on them to advance to React, the flagship of modern frontend. Learning React teaches components, hooks, and state management hands-on, connecting your typed-JavaScript knowledge to a real UI framework.
- 03Effective TypeScript, 2nd EditionA Philosophy of Software Design, 2nd EditionRelated / 型設計から複雑性管理の設計哲学へ
Reason: Once you can write robust code with types, you want to face a more fundamental question—how to curb complexity itself. A Philosophy of Software Design articulates the 'good versus bad' of design that underlies typing, through principles like deep modules and information hiding.
Reason: Having experienced designing how to split and compose frontends, you arrive at the universal question beneath those decisions—how to deal with complexity. A Philosophy of Software Design gives you the language to judge good versus bad decomposition through module depth and cognitive load.
Reason: Once type design is a weapon you can wield, you advance to component-oriented UI development—the proving ground where those types shine most. Learning React gives you the experience of building UI declaratively while guarding props and state with types, letting you feel the benefit of types in making screens.
Reason: Once you've internalized the principles of readable code, you advance to supporting that readability with the mechanism of types. Programming TypeScript shows how type annotations act as 'documentation expressed in code,' letting you write intent-revealing code on the twin wheels of naming and types.
Reason: Grasp the idea of splitting the frontend into independent parts, and you notice it shares the same roots as backend microservices. Building Microservices provides the server-side framework of boundaries, autonomous deployment, and alignment with organization, letting you understand the principles of decomposition from both sides.
Reason: Once you can build UI with React, you raise your mastery by understanding what happens under the hood. Fluent React delves into the rendering mechanism and the Fiber architecture, lifting you to a depth where you can explain 'why it's fast or slow.'
Explore next
Connected fields