Angular Signals
Una nueva propuesta de reactividad de grano fino.
Debido a la complejidad de la programación reactiva la curva de aprendizaje se vuelve demasiado compleja y abrumadora para personas que quieren iniciar con Angular, pero esto está a punto de cambiar
- Que es la reactividad de grano fino
- Como funcionan los signals
- Qué diferencia tiene de RxJs
- Como ayuda a facilitar el uso de Angular
Que es el manejo de estado de grano fino
La reactividad de grano fino es un paradigma de programación que permite la reevaluación automática del código en respuesta a cambios en los datos o el estado. En este paradigma, el código se divide en pequeñas unidades reactivas independientes que son sensibles a los cambios en sus datos de entrada. Cuando los datos de entrada cambian, estas unidades reactivas se vuelven a evaluar automáticamente, actualizando su salida en consecuencia.
La reactividad de grano fino se usa comúnmente en frameworks de programación como Solid.js, Vue.js y Svelte y parcialmente Angular, donde la interfaz de usuario se actualiza automáticamente en respuesta a los cambios en los datos subyacentes. En estos frameworks, los componentes de la interfaz de usuario se definen como unidades reactivas que se vuelven a evaluar en respuesta a los cambios en el estado de la aplicación.
La reactividad de grano fino puede mejorar el rendimiento y la capacidad de mantenimiento de aplicaciones complejas al reducir la necesidad de actualizaciones manuales de la interfaz de usuario y permitir un procesamiento de datos más eficiente. También puede ayudar a garantizar que la interfaz de usuario de la aplicación se mantenga coherente con los datos subyacentes en todo momento, lo que mejora la experiencia del usuario.
Como funcionan los signals
Imaginemos que tenemos una variable que contiene un valor así como las de toda la vida, lo interesante radica en que si el signal cambia también cambiará todo lo que de ese signal esto ahorra tiempos y recursos, ya que de esta manera no se consulta todo el árbol de componente para poder determinar si hay un cambio por ejemplo
Angular actualmente:
template `
{{ count }}
<button (click)="AgregarPersona()"> Agregar Persona<button/>
`
export class App {
personas = 0;
AgregarPersonas(){
this.personas = 5;
}
}
Usando Signals:
import { signal } from './signals/signal';
import { computed } from './signals/computed';
export class AppComponent {
personas = signal(0);
duplicarPersonas = computed(() => this.duplicarPersonas() * 2);
}
Usando RxJs:
personas$ = new BehavoirSubject(0);
duplicarPersonas$ = this.personas$.pipe(map((duplicarPersonas) => duplicarPersonas * 2));
Qué diferencia tiene de Rxjs
La principal diferencia entre RxJs y la reactividad de grano fino es que RxJs es una biblioteca específica para la programación reactiva, mientras que la reactividad de grano fino es un paradigma de programación más general que se puede implementar utilizando diferentes técnicas y bibliotecas, incluido RxJs.
Como ayuda a facilitar el uso de Angular
Al usar signals los cambios que se hacen en DOM pueden ser manejadas de manera más rápida y precisa, ya que los signals no so observables y podremos acceder a su información sin necesidad de subscribirnos de manera asíncrona para obtener su valor.
Ejemplos: https://stackblitz.com/edit/angular-ednkcj?file=src%2Ftesting-objects.component.ts