Angular 21 de Cero a Experto / Signals a fondo

Reto: construye tu propio sistema de señales

Reto40 min100 XP

Este es el reto que sella tu comprensión de la reactividad de Angular. Vas a construir tu propio signal, computed y effect —con rastreo automático de dependencias— desde cero, en TypeScript puro. Cuando funcione, no habrá magia en Angular que no entiendas: sabrás exactamente por qué un computed se recalcula, por qué un effect corre, y qué significa "grano fino". Es el sello "construye tu versión" del curso, aplicado al núcleo del framework.

Reto

Un mini-Angular reactivo en 40 líneas

Difícil40 min100 XP(×2 sin mirar la solución)

Qué debes construir

Tres funciones que reproduzcan el comportamiento de las de @angular/core:

signal<T>(inicial) — devuelve una función lectora con .set(v) y .update(fn). Al leerla dentro de un consumidor (computed/effect), registra la dependencia.
computed<T>(fn) — señal derivada de solo lectura que se recalcula cuando cambia cualquier señal que fn lea. Debe funcionar en cascada (un computed que depende de otro).
effect(fn) — ejecuta fn una vez y la re-ejecuta cada vez que cambie alguna señal que haya leído.

Luego, úsalas para modelar "Mi Bolsillo": una señal gastos, un computed total, un computed saldo (presupuesto − total), y un effect que "guarde" el saldo (con console.log). Al modificar gastos, todo debe actualizarse en cascada, solo.

Reglas

Rastreo AUTOMÁTICO de dependencias: nada de pasar arrays de dependencias a mano.
computed debe soportar cascadas (saldo depende de total, que depende de gastos).
Todo en TypeScript, tipado. Nada de librerías.

40:00

Cuando estés listo, arranca el reloj.

El razonamiento. Todo el sistema reactivo se apoya en una sola idea: leer registra, escribir notifica. Para que "leer registre", necesitamos saber QUIÉN está leyendo —por eso existe la variable global observadorActual: el consumidor (effect o computed) se anuncia antes de ejecutar su función, de modo que cualquier señal que lea durante esa ejecución sepa a quién apuntar—. Para que "escribir notifique", cada señal guarda un conjunto de sus dependientes y los re-ejecuta al cambiar. computed no es más que un effect cuyo efecto secundario es guardar su resultado en una señal interna: así se vuelve consumible como cualquier señal, y las cascadas (saldo→total→gastos) funcionan porque cada nivel es a la vez lector (de los de abajo) y señal (para los de arriba).

Qué observar al ejecutar:

El effect del saldo se imprime en la CORRIDA INICIAL y luego SOLO cuando el saldo cambia —nunca tú lo llamas—.
Al agregar "Cine", se disparan total → saldo → el effect, en cascada, en el orden correcto.
Al cambiar el presupuesto, reacciona saldo (depende de él) pero total no vuelve a calcularse por esa vía —solo lo que realmente depende del cambio—. Eso es grano fino.
El Object.is en set evita notificar cuando el valor no cambió de verdad: una pequeña optimización que Angular también hace.

Angular añade sobre esto: memoización real (un computed que nadie lee no recalcula), pereza, detección de ciclos, e integración con el renderizado. Pero el ESQUELETO es exactamente lo que acabas de escribir. Ahora, cuando leas signal, computed y effect en código Angular real, sabrás qué ocurre por dentro.

Qué sigue

Terminaste el módulo más importante del curso: dominas signals de arriba a abajo, y las construiste desde cero. El próximo módulo pone esa reactividad al servicio de la arquitectura: servicios e inyección de dependencias —inject(), providers, tokens— para compartir estado y lógica entre componentes sin pasarlo de mano en mano. El sistema que hace a Angular tan potente en apps grandes.