Frameworks & Reactivity

React, Vue, Svelte, Solid and Angular as different answers to the same questions: how change is detected, how much work is compile-time, and what reaches the DOM.

Reactivity Models
▶ lab

Re-run and diff, tracked proxies, compile-time analysis, fine-grained signals, zone-based change detection: five ways of finding out that something changed.

Q · How does a framework find out that something changed, and what does each answer cost?
The React Mental Model

State and props go in, the component function runs and returns a description of the UI, a reconciler compares descriptions, and the difference becomes DOM calls.

Q · What actually happens between calling a state setter and a pixel changing in React?
The Vue Mental Model

Reactive state records who read it. A component re-renders when a reactive value it actually read during its last render has changed — not because its parent did.

Q · How does Vue know which components to re-render, without being told?
The Svelte Mental Model

A compiler reads your component, works out which parts of the markup depend on which values, and emits code that updates exactly those parts.

Q · What can a build step know about my UI that a runtime cannot, and what does it do with that knowledge?
The Solid Mental Model

The component function runs once. Signals hold values with subscriber lists, and setting one re-runs only the small computations that read it — each writing to the node it owns.

Q · What changes when the component function never runs a second time?
The Angular Mental Model

An integrated framework rather than a view library: components and templates, dependency injection, routing, forms and a build system, shipped and versioned together.

Q · What does it mean for the framework to supply the whole application structure, not just the rendering?
Reconciliation and Keys

Deciding what changed between one UI state and the next comes down to identity: which node in the new list is the same thing as which node in the old one.

Q · How does a framework decide whether to update a node or replace it, and what does it use to tell items apart?
Choosing a Framework

There is no winner. There are constraints — team, existing code, hiring, rendering strategy, bundle budget, support horizon — and the framework that fits the most of yours.

Q · Given what my team, my product and my users actually need, how do I choose, and what am I signing up for?