Novedades de Angular V16 (Signals)

En mayo, se lanzará la esperada versión Angular 16. En este artículo, nos sumergiremos en  una de las novedades y mejoras que incorporará esta actualización.

Signals

Con la introducción de Signals en Angular 16, los desarrolladores contarán con una herramienta poderosa que simplifica la gestión de estados y mejora la capacidad de respuesta de las aplicaciones, lo que se traduce en una mejor experiencia de usuario y un desarrollo más ágil y efectivo.

¿Qué es un signal?

Un Signal es un concepto en la programación que se refiere a una función que gestiona el estado y las dependencias entre valores en una aplicación. Los signals permiten la creación de relaciones reactivas entre datos, de modo que cuando un valor cambia, los valores que dependen de él también se actualizan automáticamente.

Un signal típicamente tiene dos funciones principales: obtener (get) el valor actual y establecer (set) un nuevo valor. Cuando se establece un nuevo valor, los signals informan a otros signals o partes del código que dependen de ese valor sobre el cambio, lo que a su vez desencadena actualizaciones automáticas en las dependencias.

¿BehaviorSubject?

En Angular, ya existía un concepto similar a los Signals mediante el uso de RxJS y BehaviorSubject. No obstante, aunque ambos enfoques comparten similitudes en la gestión de estados y la creación de aplicaciones reactivas, también presentan diferencias significativas en cuanto a ciertas características, como:

1. Implementación: Mientras que RxJS y BehaviorSubject se basan en observables y patrones de programación reactiva, los Signals en Angular adoptan un enfoque más funcional y simplificado, inspirado en Solid.js.
2. Granularidad: Los Signals permiten una mayor granularidad en la gestión de dependencias, ya que cada signal es responsable de un único valor y sus dependencias. En cambio, con BehaviorSubject, la gestión de estados se realiza mediante la emisión de eventos a través de observables, lo que puede resultar en una mayor complejidad en ciertos casos.
3. Rendimiento: El uso de Signals en Angular puede mejorar el rendimiento de las aplicaciones, ya que las actualizaciones se realizan únicamente cuando es necesario, evitando actualizaciones innecesarias. Por otro lado, BehaviorSubject y RxJS pueden requerir un manejo más cuidadoso de las suscripciones y desuscripciones para evitar problemas de rendimiento.

Y si. Signals puede coexistir con RxJS.

Fundamentos

Los Signals son básicamente de solo lectura, y se pueden utilizar para gestionar el estado y las dependencias en aplicaciones reactivas.

Los WritableSignals son una extensión de los Signals que permiten modificar el valor del Signal mediante métodos integrados (set, update, mutate). Se pueden crear instancias de Signals modificables utilizando la función de creación de signals.

// Creación de un signal
const counter = signal(0);

// Remplaza el valor por el nuevo
counter.set(5);

// Actualiza el signal basado en valor el existente
counter.update(currentValue => currentValue + 1);

Otro ejemplo con un objeto:

//...
interface IUser {
  id: number;
  name: string;
  lastname: string;
}

//...

const userSignal = signal<IUser>({
  id: 1,
  name: 'John',
  lastname: 'Doe',
});

//...

// Leer el valor actual del Signal
const currentUser: IUser = userSignal();

// Actualizar el nombre del usuario utilizando el método 'update'
userSignal.update((user) => ({ ...user, name: 'Jane' }));

// Cambiar completamente el objeto de usuario utilizando el método 'set'
userSignal.set({
  id: 2,
  name: 'Alice',
  lastname: 'Smith',
});

La documentación expone de manera detallada otras características de Signal, como los Effects, que consisten en operaciones con efectos secundarios que leen el valor de cero o más signals, y se ejecutan de nuevo automáticamente al cambiar dichos signals. Estos Effects pueden emplearse para sincronizar datos, gestionar solicitudes de red o llevar a cabo acciones de renderizado. Por otro lado, los Computed Signals generan valores derivados basados en uno o más signals de dependencia, actualizándose de forma automática cuando sus dependencias experimentan cambios.

Puedes acceder a la documentación aquí.