Angular y Signals: Transformando el desarrollo web

Esto implicaba recorrer y comparar cada propiedad de cada componente en cada ciclo de detección, Aunque esta técnica es efectiva en la mayoría de los casos, se vuelve ineficiente en aplicaciones más grandes con gran cantidad de componentes servicios, a medida que nuestra aplicación va creciendo, la detección se vuelve más lenta, aumentando el consumo de recurso dificultando la escalabilidad y mantenibilidad del proyecto.

Detección de cambios con Signals

En Angular 16, se introdujo Signals, una nueva implementación que ha revolucionado la detección de cambios. Signals se basa en una arquitectura de suscripción y eventos, lo que permite detectar y actualizar solo los cambios relevantes en lugar de recorrer todo el árbol de componentes. Esto conduce a un mejor rendimiento, una mayor velocidad de renderizado y una optimización de recursos al reducir la carga de trabajo del sistema. Además, la arquitectura de Signals facilita la creación de aplicaciones reactivas y permite a los desarrolladores responder eficientemente a los cambios en los datos y en el estado de la aplicación.

Principales ventajas con respecto a Zone.js

La nueva implementación de Signals en Angular 16 ha solucionado muchas de las limitaciones y desventajas del enfoque anterior. Algunas de las ventajas de Signals son:

• Mejor rendimiento:

La implementación de Signals en Angular ofrece un rendimiento mejorado en comparación con el enfoque anterior. Al enfocarse solo en los cambios relevantes, Signals minimiza la cantidad de comprobaciones necesarias.

• Optimización de recursos:

Uno de los mayores beneficios de Signals es su capacidad para optimizar el uso de recursos. Al detectar y actualizar solo los cambios relevantes, Signals reduce la carga de trabajo del sistema. Esto resulta en un uso más eficiente de los recursos disponibles, como la CPU y la memoria. Al minimizar las comprobaciones innecesarias, se libera capacidad de procesamiento para otras tareas críticas y se mejora la eficiencia general del sistema.

• Desarrollo más ágil:

La arquitectura de suscripción y eventos de Signals facilita el desarrollo de aplicaciones reactivas en Angular. Los desarrolladores pueden suscribirse a cambios específicos y responder de manera más eficiente a los cambios en los datos y en el estado de la aplicación.

• Mantenibilidad y escalabilidad:

La introducción de Signals en Angular también tiene un impacto positivo en la mantenibilidad y escalabilidad de las aplicaciones. Signals simplifica el proceso de mantenimiento y mejora la legibilidad del código, además permite que las aplicaciones escalen de manera más efectiva. Esto es especialmente importante en proyectos grandes y complejos, donde la capacidad de mantener y escalar el código es fundamental

Es importante destacar que el uso de Signals en la aplicación es independiente de seguir usando  Zone.js, por lo que ambos pueden usarse de manera conjunta en la aplicación.

• Mantenibilidad y escalabilidad: La introducción de Signals en Angular también tiene un impacto positivo en la mantenibilidad y escalabilidad de las aplicaciones. Signals simplifica el proceso de mantenimiento y mejora la legibilidad del código., además permite que las aplicaciones escalen de manera más efectiva. Esto es especialmente importante en proyectos grandes y complejos, donde la capacidad de mantener y escalar el código es fundamental

Es importante destacar que el uso de Signals en la aplicación es independiente de seguir usando  Zone.js, por lo que ambos pueden usarse de manera conjunta en la aplicación.

¿Cómo implementar Signals (Señales) en nuestra aplicación?

En primer lugar, nuestra versión de angular tiene que ser cómo mínimo la versión 16, ya que es ahí donde se han introducido.

También debemos importarlas desde Angular Core.

Para declarar una propiedad y que sea una señal debemos indicarlo en el componente. También podemos tiparlas como lo hacemos con cualquier elemento indicando si son strings, numbers, booleanos o de una interfaz personalizada.

Así mismo también podemos usar las propiedades “computed”. Una propiedad computada es aquella cuyo valor se calcula en función de uno o más valores existentes. Estas propiedades se actualizan automáticamente cuando los valores subyacentes cambian, lo que facilita la reactividad y evita la necesidad de calcular manualmente los valores cada vez que se necesiten. Así es el ejemplo que tenemos debajo la propiedad computada depende de la señal squareCounter y esta irá cambiando en función de la propiedad counter.

Para poder mostrar una señal en nuestra vista no podemos hacerlo como lo haríamos con una propiedad normal, sino que tenemos que acceder a ella con el get.

Trabajando con señales

Una vez que hemos visto cómo implementar las señales, tenemos que ver como manejarlas, para ello angular nos provee de distintos métodos que podemos usar para este fin.

• Set

Creamos la señal originariamente en 0 pero mediante este método cambiamos su valor

• Update

Si se quiere actualizar el Signal, usaremos el método update.

• Mutate

Para actualizar el valor de una propiedad sin tener que actualizar todo el objeto al completo, signals nos brinda el método mutate,  muy útil para estas situaciones.

Ideal para arrays de objetos. En este caso con el mutate modificamos solo el valor de la propiedad Price.

• Effects

Puede que para capturar algún cambio o disparar un evento, tengamos que controlar los valores de nuestra propiedad (signals) que vaya teniendo a lo largo del flujo. Esto lo podemos hacer con el método effects, cuando cualquier signal cambie ejecutará esa función.

En este caso solo veremos los console.logs cuando se ejecute algún cambio en las señales que se llaman dentro del effect.

Ejemplo con Signals, Contador

Lo que vamos a hacer es crear una aplicación sencilla cuya funcionalidad estará programada con signals.

Básicamente lo que tendremos son los títulos con valores una es el valor del contador que es una signal cuyo valor inicial es 10 y otro título square que es el cuadrado del valor del contador, para ello usaremos una propiedad computada. También tendremos 3 botones que modificarán el valor del contador sumando 1, restando 1 o resteando al valor inicial a 0.

Nuestro archivo TS es muy sencillo en el básicamente definimos tanto la propiedad de contador que será una señal y la propiedad computada que variará cuando se modifique la señal del contador, además tendremos un método que se encargará de sumar, restar o reiniciar el valor.

El archivo HTML simplemente accede a las dos propiedades e implementa el increaseBy mediante un click en los botones. Y un set a 0 en el botón reset

¿Son las Signals el futuro de Angular?

Angular como framework siempre han tenido una dificultad mayor de aprendizaje que, por ejemplo React, que es más sencillo de aprender.  En los últimos años su uso ha ido decreciendo, pero a día de hoy sigue siendo el framework mas recomendado para grandes proyectos, el equipo de Google está en continuo desarrollo y conocedores de sus puntos débiles están intentando mejorarlos, con novedades como los standalone components y ahora las Signals.

Como todo en la vida es difícil de predecir, lo qué si esta claro es que con esta nueva actualización, Angular mejora drásticamente el proceso de detección de cambios, así como el rendimiento de las aplicaciones, eliminando así la complejidad que esto supone.