Compiler vs runtime reactivity: Svelte, Vue, Angular?

WHY IT EXISTS: Frameworks need to know when state changes so they can re-render. Different approaches have different costs. Svelte's bet: most reactivity is predictable, so compile-time analysis wins. Vue/Angular's bet: dynamic patterns are common, runtime detection is cleaner.

THE MENTAL MODEL: Svelte's compiler parses your component code, finds reactive declarations (let count = 0; count++), and transforms them into runtime function calls (count = count + 1 triggers a rerender). No Proxies, no zone.js, no overhead after compilation. Vue 3 wraps reactive objects in Proxies that log property access and mutations, then re-renders on change. Angular wraps async operations (timers, HTTP) via zone.js, detecting when they finish and triggering change detection. Each approach spends cost at different times: Svelte at compile, Vue/Angular at runtime.

HOW IT WORKS: Svelte's compiler runs before bundling. It sees let x = 0; and rewrites it with implicit tracking. When code does x = 1, the compiler inserts a signal-like update call. Result: final JS is compact and fast; no runtime introspection needed. Vue wraps state: const count = reactive({ value: 0 }). Accessing count.value logs the read; mutating it logs the write. Angular's change detection iterates through all components after async events, re-running their templates. It's heavyweight but handles arbitrary dynamic code (any async operation anywhere triggers detection).

WHEN IT MATTERS: Svelte shines for performance-critical, single-page applications where you control all state mutations. Bundle size matters on mobile or low-bandwidth. Vue/Angular shine when state mutations are implicit or scattered (third-party libraries, complex async flows, event-driven code you don't fully control). Large teams often prefer Vue/Angular's transparency (proxies are explicit; zone.js is documented) over Svelte's implicit compiler magic.

ONE CONCRETE EXAMPLE: A counter. Svelte: let count = 0; <button on:click={() => count++}> compiles to count++ triggering a svelte function internally. Bundle includes no Proxy code. Vue: let count = ref(0); <button @click="count++"> wraps count in a Proxy; clicking calls the listener, which mutates the Proxy, which re-renders. Angular: property count = 0; incrementCount() { this.count++; } with change detection running after the click listener fires. Vue and Angular payloads include more infrastructure; Svelte's is leaner.