Skip to content

Interactive frontend engineering

Don't just read how the system works. Interact with it.

Frontend Systems Lab is a set of runnable experiments for frontend developers. Change the inputs, watch the runtime behave, measure the result, then read the explanation.

Explore LabsHow it works
  1. Concept
  2. Interaction
  3. Observation
  4. Measurement
  5. Explanation
  6. Understanding

Featured experiments

View all
JavaScript / Runtime

Event Loop Visualizer

Step through the call stack, microtask queue and task queue to see exactly why asynchronous code runs in the order it does.

Intermediate~12 min
  • event loop
  • microtasks
  • async
React / Rendering

React Re-render Visualizer

Trigger state updates and watch render counts propagate through a component tree, with and without memoization.

Intermediate~10 min
  • react
  • rendering
  • memo
Performance / Virtualization

Virtualization Benchmark

Render 1,000 to 50,000 rows with and without windowing, and compare initial render time and interaction responsiveness.

Intermediate~12 min
  • virtualization
  • lists
  • benchmark

Categories

02 labs

JavaScript

The language runtime: execution order, asynchrony, events and the cost of the work you schedule.

  • Runtime
  • Async
  • Events
  • Performance
02 labs

React

How React decides what to render, when state propagates, and why components re-render more than you expect.

  • Rendering
  • State
  • Context
  • Component behavior
02 labs

Browser

The platform underneath the framework: the DOM, event propagation, the rendering pipeline and storage.

  • DOM
  • Events
  • Rendering
  • Storage
02 labs

Performance

Main-thread budgets, rendering cost and the techniques that keep interfaces responsive at scale.

  • Rendering
  • Main thread
  • Virtualization
  • Web performance
02 labs

Networking

Request strategy and caching: how the shape of your network work decides perceived speed.

  • HTTP
  • Requests
  • Caching
  • Concurrency