wandres.dev
El grafo, el dueño y la propagación

Domina Motores de Reactividad
hasta nivel dios

Cómo funciona un motor de reactividad por dentro: el grafo de dependencias, tracking automático, push-pull, glitches, el árbol de dueños y los motores comparados.

La ruta

13 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa de los motores de reactividad

Qué es un motor de reactividad, las familias que existen, y por qué todos resuelven el mismo problema distinto.

Mapa mentalMotoresOntología

Grano fino y grano grueso Nivel 1 · La distinción fundamental

Re-renderizar un componente frente a actualizar un nodo del DOM: las dos filosofías y su coste real.

GranularidadVDOMFino

El grafo reactivo Nivel 2 · Nodos, aristas y dependencias

La estructura de datos que hay debajo: fuentes, computaciones, observadores, y cómo se descubren las dependencias.

GrafoDependenciasTracking

Tracking automático Nivel 3 · Cómo sabe de qué depende

El observador actual como variable global, la recolección durante la ejecución, y por qué las condicionales cambian el grafo.

Auto-trackContextoDinámico

Push, pull y push-pull Nivel 4 · Los tres modelos de propagación

Propagar el cambio hacia adelante, calcular bajo demanda, y el modelo híbrido que evita glitches y trabajo inútil.

PushPullHíbrido

Glitches y consistencia Nivel 5 · El diamante y el estado imposible

El problema del rombo en el grafo, la consistencia glitch-free, el marcado sucio en dos fases y la topología.

GlitchDiamanteConsistencia

Memoización Nivel 6 · Cachés que se invalidan solas

Qué hace un memo por debajo, la igualdad como frontera de propagación, y el memo como corta-circuitos.

MemoIgualdadCorte

El árbol de dueños Nivel 7 · Ownership y disposal automático

El mecanismo que ninguna otra familia tiene igual: quién posee a quién, la limpieza en cascada, y las raíces.

OwnerDisposalCleanup

Lotes y planificación Nivel 8 · Batching y el momento de ejecutar

Agrupar cambios, la cola de efectos, síncrono frente a asíncrono, y el orden de ejecución garantizado.

BatchColaOrden

Reactividad profunda Nivel 9 · Proxies y el estado anidado

Hacer reactivo un objeto entero, el coste del proxy, la reactividad perezosa y la trampa de la desestructuración.

ProxyAnidadoPerezoso

Los motores comparados Nivel 10 · Solid, Vue, Angular, Svelte, Preact

Las decisiones de diseño de cada uno lado a lado: qué comparten, en qué divergen y qué paga cada elección.

ComparativaSignalsRunes

Compilar la reactividad Nivel 11 · Cuando el compilador hace el trabajo

Svelte y sus runes, el compilador de Solid, React Compiler: qué se puede mover a build time y qué no.

CompiladorRunesBuild time

Nivel Dios Nivel 12 · Síntesis de la reactividad fina

El diseño completo de un motor de reactividad desde cero, las decisiones y sus consecuencias, y hacia dónde va TC39.

SíntesisDesde ceroTC39
65lecciones
13niveles
0→∞de cero a dios

¿Listo para dominar Motores de Reactividad?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →