A Hands-on Introduction to Fine-Grained Reactivity
by Ryan Carniato · DEV Community
Choosing between the three frameworks is easier once you understand the reactivity model they now share. This piece teaches that model framework-neutrally, so Vue refs, Svelte $state/$derived and Angular signal()/computed() read as variations on one idea. Published 2021 — predates runes and Angular Signals but covers concepts, not APIs. Ryan Carniato, creator of SolidJS, explains the three primitives behind modern front-end reactivity: signals, effects and derived values (memos). He builds them from scratch in plain JavaScript and notes that Vue, Svelte, MobX and Knockout all rely on the same model.
More resources on Vue, Svelte & Angular
Learn Angular (Official Interactive Tutorial on angular.dev)
The Angular team's in-browser tutorial for modern Angular, where each step teaches one concept with live code and a reveal-answer option. It covers components, template control flow, property and event binding, inputs and outputs, deferrable views, routing, forms, services with dependency injection, and pipes. It is hands-on, free and kept in step with each Angular release.
Svelte Interactive Tutorial (Svelte 5 and SvelteKit)
The official in-browser Svelte tutorial, with a live editor and a solution for each step. It has four parts: Basic Svelte, Advanced Svelte, Basic SvelteKit and Advanced SvelteKit. Together they cover runes-based reactivity, props, bindings, transitions, snippets, context, routing, data loading and forms.
Vue.js Guide (Official Vue 3 Documentation)
The official Vue 3 guide, written by the core team. It covers template syntax, reactivity, components, composables, single-file components, tooling, routing, state management, TypeScript and SSR. A switch lets you read every example in either the Options API or the Composition API.