Frontend Engineering — Ground-Up Deep Dive
A complete zero-to-senior reference library: from programming principles and the browser, through React and rendering, up to architecture, systems, and cross-cutting quality. Read it in order as a curriculum, or jump to what you need.
Foundations
Programming Principles
DRY, KISS, YAGNI, SOLID, SoC, coupling/cohesion, composition over inheritance, Law of Demeter
Object-Oriented Programming Foundations
Objects/classes, four pillars, JS prototypes vs `class`, composition, GoF design patterns
Functional Programming Foundations
Pure functions, immutability, HOFs, composition, currying, functors/applicatives/monads, FP in React
Data Structures & Algorithms (for Frontend)
Big-O, arrays/maps/trees/graphs/tries, traversals, interview & real-world patterns
Platform & Language
Browser Engines & the Rendering Pipeline
V8/Blink/Gecko, parsing, CRP, layout, paint, compositing, GPU, the event loop's home
JavaScript Deep Dive
Types, scope, closures, prototypes, `this`, async, modules, memory, the engine pipeline
TypeScript
Structural typing, generics, conditional/mapped types, variance, declaration files, config
The Web Platform (DOM, Events, Workers, Storage, APIs)
DOM/CSSOM, events, fetch/streams, storage, Web/Service/Shared workers, observers, Web Components
Building UIs
React Internals & Patterns
Fiber, reconciliation, Lanes, hooks, concurrent features, RSC, React Compiler, patterns
State Management & Store Libraries
Redux Toolkit vs Zustand vs Jotai vs Valtio vs MobX vs XState vs Signals; server vs client state
Rendering Strategies (CSR · SSR · SSG · ISR · RSC · Streaming · Islands)
CSR, SSR, SSG, ISR, RSC, streaming, hydration, islands, the rendering decision tree
Next.js & Meta-Frameworks
App Router, RSC, Server Actions, caching layers, Remix/TanStack Start/Astro comparison
Architecture & Scale
Micro Frontends (MFE)
Composition models, Module Federation 2.0, Native Federation, contracts, the hard parts
Frontend Architecture
Hexagonal, onion, clean architecture, DDD, feature-sliced design, dependency rule on the frontend
Design Systems
Atomic design, tokens, headless primitives, theming, governance, distribution
Architecture Decisions & Trade-offs
Monolith vs microservices (e-commerce), SPA vs MPA vs MFE, modular monolith, Conway's Law, ADRs
Systems
BFF & Data Enrichment
Backend-for-frontend, aggregation, enrichment, GraphQL/BFF tradeoffs, caching, resilience
Microservices & Orchestration
Orchestration vs choreography, sagas, API gateways, service mesh, event-driven systems
Build Tools & Bundlers
Webpack, Vite, Rspack, esbuild, Rollup, Turbopack, SWC, tree-shaking, code-splitting
Networking & Protocols
HTTP/1.1→2→3/QUIC, TLS, DNS, CDNs, caching, WebSockets, SSE, compression
System & Infrastructure Architecture
Scaling, load balancing, caching, DBs, queues, containers/K8s, CI/CD, IaC, observability, deploys
Cross-cutting Quality
Performance & Core Web Vitals
LCP/INP/CLS, profiling, bundle budgets, runtime perf, network perf
Testing
Test pyramid/trophy, Vitest/Jest, Testing Library, Playwright, contract & visual testing
Frontend Security
XSS, CSRF, CSP, CORS, auth (OAuth2/OIDC/JWT), supply chain, RSC-era threats
Accessibility (a11y)
WCAG, ARIA, semantics, keyboard/focus, screen readers, testing a11y
Authentication & Authorization
authn vs authz, sessions vs tokens, OAuth 2.0/OIDC + PKCE flows, tokens, RBAC/ABAC/ReBAC, BFF auth, passkeys/WebAuthn, SSO