Skip to content

Lecture slides

Slides for teaching Modern Front-End Engineering.

Lecture decks for the book. Open a deck to present it, use the arrow keys or space bar to move between slides, and press F for fullscreen. Each deck also prints one slide per landscape page for handouts or PDF export.

The Modern Web Platform & Browser Internals

Chapter 1: follow a page from resource discovery to rendering and interaction, then test the model in DevTools.

Semantic HTML, Accessibility, Internationalization & the DOM

Chapter 2: choose meaningful HTML, build accessible interfaces, respect language and direction, and work with the DOM safely.

Modern CSS Architecture & Layout Systems

Chapter 3: make the cascade predictable, compose responsive layouts, support internationalized interfaces, and choose a maintainable styling architecture.

Modern JavaScript & Asynchronous Programming

Chapter 4: understand scope, closures, modules, promises, concurrency, cancellation, and locale-aware output.

TypeScript, Runtime Contracts & Safe Data Boundaries

Chapter 5: model data precisely, narrow unknown values, use generics, and validate every external boundary.

Component-Driven Architecture & Design Patterns

Chapter 6: find component boundaries, design stable APIs, compose behavior, and organize front-end systems by responsibility.

Reactivity & Rendering Mechanics

Chapter 7: follow state through render trees, dependency graphs, scheduling, identity, and side-effect boundaries.

State Management, Routing & Form Architecture

Chapter 8: classify state, assign ownership, design URL-driven views, and build resilient form workflows.

Client–Server Communication, APIs & Cache Management

Chapter 9: design reliable HTTP boundaries, represent remote UI states, and manage caches, mutations, retries, and recovery.

Real-Time Communication, Offline Systems & Client Persistence

Chapter 10: choose live communication deliberately, persist useful client data, and synchronize offline work safely.

Rendering Topologies: CSR, SSR, SSG & Beyond

Chapter 11: choose where and when rendering happens, manage hydration and handoff costs, and design hybrid routes deliberately.

Modern Build Systems, Development Tooling & Team Workflows

Chapter 12: understand module graphs, transformation, bundling, code splitting, environment boundaries, and reproducible team workflows.

Front-End Security, Authentication & Browser Isolation

Chapter 13: reason about origins, untrusted input, authentication, authorization, browser defenses, and layered security boundaries.

Scaling Front-End Architecture: Design Systems, Monorepos & Micro-Frontends

Chapter 14: scale shared UI, packages, teams, and deployments without turning reuse into hidden coupling.

Core Web Vitals & Performance Engineering

Chapter 15: measure real user experience, diagnose LCP, INP, and CLS, and optimize from evidence rather than instinct.

Testing Strategies for Resilient Interfaces

Chapter 16: build layered confidence around user behavior, accessibility, network boundaries, failure recovery, and production workflows.

Continuous Delivery, Observability & Maintenance

Chapter 17: build a safe frontend delivery loop with reproducible artifacts, progressive releases, production signals, rollback, and maintenance.

Front-End Architecture & Technical Decision-Making

Chapter 18: make evidence-backed architecture decisions using quality attributes, constraints, boundaries, trade-offs, and reversible learning.