Signals en frameworks

Si has entendido las cuatro lecciones anteriores, ya sabes usar los cinco frameworks que dominan 2026, aunque no lo parezca. Solid, Angular, Preact, Vue y Svelte 5 convergieron en el mismo modelo de signals; lo único que cambia entre ellos es la superficie: dónde pones los paréntesis, si escribes .value o si dejas que un compilador lo haga por ti. Esta lección traduce un único ejemplo a los cinco dialectos para que veas, con tus propios ojos, que debajo late siempre el mismo corazón. Aprender el modelo, no la sintaxis, es lo que te vuelve portátil.

El mismo modelo, cinco dialectos

Falta el quinto, que merece párrafo aparte por ser el más distinto en la forma: Svelte 5 y sus runes. Donde los otros son librerías en tiempo de ejecución, Svelte es un compilador, y eso le permite una sintaxis que parece no tener signals en absoluto.

Cómo se escribe en cada uno

El mismo contador con su doble derivado, cinco veces. Fíjate en que la estructura —un estado, un derivado, una lectura— es idéntica; solo cambia la ortografía:

// Solid: acceso por llamada a funcion
const [contar, setContar] = createSignal(0);
const doble = createMemo(() => contar() * 2);
setContar(contar() + 1);
console.log(doble());

// Angular: acceso por llamada, escritura por set o update
const contar = signal(0);
const doble = computed(() => contar() * 2);
contar.set(contar() + 1);
console.log(doble());

// Preact Signals: acceso por .value
const contar = signal(0);
const doble = computed(() => contar.value * 2);
contar.value += 1;
console.log(doble.value);

// Vue: ref y computed, acceso por .value en el script
const contar = ref(0);
const doble = computed(() => contar.value * 2);
contar.value += 1;
console.log(doble.value);

<!-- Svelte 5: runes; el compilador inserta el rastreo por ti -->
<script>
  let contar = $state(0);
  let doble = $derived(contar * 2);
  function sumar() { contar += 1; }
</script>

Acceso: función, .value o compilador

Las diferencias de sintaxis se reducen a una sola pregunta: cómo se intercepta la lectura para poder rastrearla. Hay tres respuestas, y cada framework eligió una.

La llamada a función —Solid, Angular— es explícita: los paréntesis marcan el punto de rastreo. El .value —Preact, Vue— usa un getter oculto tras una propiedad. Y las runes —Svelte— trasladan el trabajo al compilador, logrando la sintaxis más limpia a cambio de necesitar un paso de build. Tres caminos hacia la misma meta: ejecutar código en el instante de la lectura.

La escritura sigue la misma lógica de fachadas: Solid llama a setContar, Angular a contar.set, Preact y Vue mutan contar.value, y Svelte deja que un contar += 1 de aspecto trivial sea reescrito por el compilador. Detrás de cada gesto ocurre lo mismo —comparar con la igualdad, y si cambió, notificar—, pero la ortografía difiere lo justo para que un principiante crea que son mundos distintos cuando son el mismo mundo con cinco acentos.

El sexto dialecto que los unirá

Hay un sexto dialecto en camino, y es el que podría volver innecesario elegir: el del estándar de TC39. El mismo contador, escrito con los primitivos del lenguaje, no pertenece a ningún framework y funciona bajo cualquiera que los adopte:

// TC39 Signals: el dialecto neutral, propiedad de nadie
const contar = new Signal.State(0);
const doble = new Signal.Computed(() => contar.get() * 2);
contar.set(contar.get() + 1);
console.log(doble.get());

Reconoces el patrón al instante: estado con .get() y .set(), derivado con .get(), la misma trinidad de siempre. Si el estándar prospera, los cinco dialectos podrían converger hacia él como su núcleo compartido, y cada framework quedaría como una capa de ergonomía y de render sobre un motor reactivo común. La lógica de estado se escribiría una vez y viviría bajo cualquier vista.

flowchart TD
SO[Solid createSignal] --> TC[TC39 Signal.State y Signal.Computed]
AN[Angular signal] --> TC
PR[Preact signal] --> TC
VU[Vue ref] --> TC
SV[Svelte 5 runes] --> TC
style TC fill:#a6e3a1,color:#11111b
style SO fill:#89b4fa,color:#11111b
style SV fill:#cba6f7,color:#11111b