Hola 👋
Angular publicó Angular v16 hasta el momento su última versión con la gran característica próxima, que es señales como una vista previa para desarrolladores!
Signal trae un gran cambio a todo el framework y, en mi opinión, hará que Angular sea más popular en los próximos años, ya que esta característica solucionará una limitación histórica de Angular, que es Zone.js.x
Esta es la historia detrás de Signals.
Para entender por qué el equipo de Angular está considerando cambiar el sistema de reactividad de Angular para actualizar componentes, necesitamos entender el sistema usado actualmente para detectar cambios, que es Zone.js.
Zone.js, el sistema de detección de cambios
Hasta ahora, Angular utiliza Zone.js para actualizar componentes. Esto funciona asumiendo que cualquier manejador de eventos puede teóricamente cambiar uno o algunos componentes o datos vinculados.
El reto aquí es que todos estos eventos son disparados por el navegador y no por el framework. Cuando hacemos clic, es el navegador el que desencadena el evento. Aquí es donde Zone.js entra en juego, mediante monkey patching, extiende objetos JS (ventana, documento, etc) modificando construcciones estándar, y Zone puede averiguar cuando un manejador de eventos se ha ejecutado. Su trabajo termina aquí y Angular toma el relevo encargándose de la detección de cambios.
El problema con Zone.js
Aunque Zone.js es muy potente y ha funcionado bien hasta ahora. Tiene sus limitaciones.
Zone.js sólo puede notificarnos cuando algo podría haber ocurrido en la aplicación. El problema está en el "podría". Zone.js no es capaz de darnos más información sobre qué ha pasado, dónde y qué ha cambiado.
Zone.js monkey patching es mágico pero...
Como los objetos del navegador se modifican, los errores son difíciles de diagnosticar. async y await no pueden ser monkey patched ya que son palabras clave.
La solución para esta limitación es utilizar la CLI de Angular para convertirlas en promesas. Esto es una pena ya que todos los navegadores soportados ya soportan async y await de forma nativa.
Cuando se realizan cambios, siempre se comprueba todo el árbol de componentes. No es posible identificar directamente los componentes modificados.
Las grandes aplicaciones empresariales se ven muy afectadas por estas limitaciones, ya que a medida que el árbol de componentes de la aplicación crece, el ciclo de detección de cambios será cada vez más costoso.
Sería estupendo poder notificar el cambio únicamente a los consumidores y no comprobar sistemáticamente todo el árbol de componentes. Ya existen algunas técnicas para mejorar este problema con tuberías puras y componentes con estrategia onPush, pero esto no es suficiente.
Signals, la futura detección de cambios de Angular
¡Las signals pueden hacerlo por nosotros! Pero antes, ¿qué es una signal?
Signal
Una signal es una envoltura alrededor de un valor, que es capaz de notificar a los consumidores interesados cuando ese valor cambia. Hay diferentes tipos de señales.
Tipos o naturaleza de las signals
→ Signals escribibles: tienen su valor actualizado directamente a través de una API de mutación. Por tanto, las signals pueden saber cuándo son mutadas e informar del cambio a los lectores anteriores. Sólo a los interesados (consumidores) del cambio y no a todo el árbol de componentes.
→ Signals computadas: Tienen un valor que no se puede cambiar directamente, sino que se deriva de los valores de otras señales.
Un gran ejemplo intuitivo proporcionado por el equipo de Angular es el ejemplo Celsius/Fahrenheit:
@Component({
signals: true,
selector: 'temperature-calc',
template: `
<p>C: {{ celsius() }}</p>
<p>F: {{ fahrenheit() }}</p>
`,
})
export class SimpleCounter {
// A writable signal of type WritableSignal<number>, always set with a default value
celsius = signal(25);
// A computed signal, only re-evaluates if celsius() changes.
fahrenheit = computed(() => this.celsius() * 1.8 + 32);
}
La solución de las signals es interesante, porque:
→ Las signals son útiles porque pueden notificar a los consumidores interesados cuando cambian: Una operación que se realiza cuando cambian las señales de las que depende se denomina "efecto". Por lo tanto, Angular utilizará una función de efecto para actualizar la interfaz de usuario de un componente cada vez que cambie cualquier señal leída dentro de la plantilla de ese componente.
→ Seguimiento automático de dependencias: Cuando se ejecutan señales computadas y efectos, mantienen un registro de qué señales se leyeron como parte del cómputo o efecto. Y como las dependencias ya se conocen, el sistema de señales volverá a ejecutar el cálculo/efecto automáticamente siempre que cambien las dependencias. Esto resuelve perfectamente el principal problema de Zone.js.
→ Las signals computadas pueden ser perezosas y solo recomputar valores intermedios bajo demanda.
→ Se componen fácilmente con otros sistemas de reactividad, como RxJS y la actual reactividad basada en zonas de Angular. Esto no es despreciable, ya que no necesitaremos cambiar código heredado, y será posible una combinación de detección de cambios tradicional y detección de cambios basada en señales.
Lo que se nos puede haber pasado por la cabeza
Algunos desarrolladores pueden encontrar esta gran innovación difícil de digerir, ya que aprender el framework ya es difícil, y cambiar el sistema de detección de cambios será una nueva cosa compleja de aprender:
- Entradas basadas en señales
- Salidas basadas en señales
- Consultas basadas en señales
- Sin decoradores y nuevas formas de manejar los cambios con efectos en lugar de los ganchos tradicionales del ciclo de vida de los componentes.
...y mucho más.
Bueno, es cierto, pero a veces, con un gran dolor vienen grandes resultados, ¡y sin dolor no hay ganancia! Esto actualizará sólo el lugar que debe ser actualizado y no preguntará sistemáticamente a todo el mundo si hay un cambio que actualizar. Sin duda mejorará el rendimiento de la aplicación y facilitará su reactividad.
¿Cómo será una aplicación Angular con signals?
Este artículo ya tiene mucha información para digerir, ya que presenta la idea global y la historia de signals.
Eso es todo por hoy, nos vemos 🙋