Comprensión de las señales Angular: una guía completa

En el mundo en constante evolución del desarrollo web, Angular continúa abriendo camino al mejorar implacablemente las capacidades de los programadores de Angular. Conocido por su compromiso inquebrantable con la mejora, una vez más supera los límites de lo que es posible y, esta vez, presenta una nueva y emocionante característica con el lanzamiento Angular v16: Angular Signals.

Si eres nuevo en él o ya has probado la vista previa para desarrolladores pero quieres saber más sobre cómo funciona Signal, esta guía completa te ayudará a entenderlo.

¿Qué son las señales Angular y por qué es importante aprender a usarlas ahora mismo?

En esencia, Angular Signals es un modelo de reactividad que funciona como una función de argumento cero [(() => T)] y devuelve un valor específico cuando se ejecuta. ¿Cómo lo hace? Hay una cosa importante aquí: la función getter. La llamada de la función getter devuelve el valor actual y, Angular reconoce y actualiza estos valores reactivos automáticamente cuando cambian sus dependencias.

Aquí hay un diagrama para ayudar a visualizar este proceso:

Ahora, cuando actualice su modelo, Angular aplica automáticamente los cambios a la vista correspondiente. Esto permite una interacción fluida y sincronizada entre el modelo y la vista, lo que en última instancia conduce a una experiencia de usuario más fluida.

Dado que Angular Señales se basan en un patrón llamado Patrón de Diseño del Observador, hay un Publisher que almacena el valor y una lista de Suscriptores que están interesados en él. Una vez que el valor cambia, reciben una notificación. En otras palabras, indica que solo una cosa ha cambiado y, por lo tanto, debe actualizarse. Esto elimina la necesidad de que Angular compruebe si hay cambios en todo el árbol de componentes. Aquí no hay operaciones demasiado complejas.

Si hay una ventaja importante de esta característica, es su capacidad para simplificar la actualización de los valores de estado y optimizar el rendimiento de la representación. Al usarlo, los desarrolladores obtienen un control detallado sobre los cambios de estado mientras se benefician de cosas como:

• Seguimiento automático de dependencias: Angular reconoce y actualiza automáticamente los valores reactivos.
• Actualizaciones de estado más sencillas de manejar: control detallado de los cambios de estado con una complejidad mínima.
• Rendimiento optimizado: No es necesario comprobar si hay cambios en todo el árbol de componentes, lo que mejora el rendimiento.
• Valores calculados que se evalúan de forma diferida.
• Granular state tracking.
• Posibilidad de implementar señales fuera de los componentes (funcionando bien con la inyección de dependencias).
• Improved Angular Change Detection.
• Mejor rendimiento y capacidad de mantenimiento de la aplicación.

Angular Signals vs RxJS

Con todo esto, muchos consideran que Angular Signals es tan potente como RxJS pero con una sintaxis más sencilla. ¿Qué significa esto para RxJS? ¿Está condenado? En mi opinión, no. La nueva función puede ser capaz de ocultar algunas de las complejidades de RxJS, como la gestión manual de suscripciones y los riesgos de pérdida de memoria, pero no reemplazará a RxJS en el corto plazo.

He resaltado la importancia de esta nueva característica y la he definido. Pasemos a explicar cómo crear y cómo usar Signals en Angular.

Manos a la obra: Primeros pasos con Angular señales

Examinaré tres primitivas y le mostraré cómo funcionan y cuándo usar cada una.

Prerrequisitos:

• Experiencia previa con Angular.
• Conocimiento básico de los principios reactivos del marco.
• Angular 16 version installed or running.

Lo primero es lo primero, esta nueva función presenta tres primitivas reactivas: Señales grabables, Señales calculadas y Efectos, para permitirle lograr reactividad en su aplicación Angular.

1. Uso de señales grabables

Se trata de Señales que se pueden actualizar directamente, pero para tenerlas, primero hay que definirlas. He aquí una demostración técnica:

Import { signal } from ‘@angular/core’;
const count = signal(0);
Count.set(count() +1);

2. Uso de señales computarizadas

Con las señales calculadas, se obtiene un método declarativo para controlar los valores derivados. Cuando hay un cambio en cualquiera de las señales de las que depende una función, las señales calculadas se recalculan y producen una señal derivada de solo lectura. He aquí una demostración técnica:

import { computed, signal } from '@angular/core';
const count = signal(0);
const doubled = computed(() => count()

3. Uso de efectos

Los efectos en Angular señales ejecutarán su función en respuesta a los cambios en la señal. Dentro del effect() puedes modificar el estado imperativamente, cambiar el DOM manualmente y ejecutar código asíncrono. He aquí una demostración técnica:

import { effect, signal } from '@angular/core';
const count = signal(0);
effect(() => {
  console.log('Count changed to:', count());
});
count.set(1);

Angular Signals Examples

Aquí hay un ejemplo práctico para ver Angular Signals en acción. Vamos a crear una aplicación de contador simple usando las tres primitivas:

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-counter',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <p>Count: {{ count() }}</p>
      <p>Doubled: {{ doubled() }}</p>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);
 
  constructor() {
    effect(() => {
      console.log('Count changed to:', this.count());
    });
  }
 
  increment() {
    this.count.set(this.count() + 1);
  }
}

Angular Señales y Ignite UI: ¿Qué tenemos bajo la manga?

La combinación de señales de Angular con Ignite UI for Angular puede elevar sus aplicaciones web al siguiente nivel. Aquí hay un vistazo rápido a cómo este poderoso combo puede funcionar para usted. Angular Signals simplifica la administración de estado mediante el seguimiento preciso de los cambios, mientras que Ignite UI proporciona componentes de interfaz de usuario sólidos y de alto rendimiento. Juntos, hacen que su aplicación sea más rápida y receptiva.

Ahora, construyamos una cuadrícula de datos en tiempo real utilizando señales de Angular y Ignite UI.

1. Configurar señales: defina señales para sus datos y cualquier filtro

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store our data
  filter = signal('');  // Signal for filtering the data
 
  // Computed signal to apply the filter to the data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
  // Method to fetch and update data
  fetchData(newData) {
    this.data.set(newData);
  }
}

2. Actualizar datos: obtener nuevos datos y actualizar la señal

fetchData(newData) {
  this.data.set(newData);
}

 

3. Experimente actualizaciones fluidas

La red se actualiza en tiempo real a medida que cambian los datos, gracias a la potencia reactiva de las señales de Angular y a la reproducción eficiente de Ignite UI. Pero aquí hay otro ejemplo, sin Angular Señales.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [(ngModel)]="filter" (ngModelChange)="applyFilter()" placeholder="Filter" />
    <igx-grid [data]="filteredData">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = [];  // Data array
  filteredData = [];  // Filtered data array
  filter = '';  // Filter string
 
  applyFilter() {
    this.filteredData = this.data.filter(item => item.name.includes(this.filter));
  }
 
  fetchData(newData) {
    this.data = newData;
    this.applyFilter();
  }
}
With:
import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [value]="filter()" (input)="filter.set($event.target.value)" placeholder="Filter" />
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store data
  filter = signal('');  // Signal for filter
 
  // Computed signal to filter data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
   fetchData(newData) {
    this.data.set(newData);
  }
}

En conclusión...

Aquí hay una explicación simplificada de por qué querría usar Angular Signals: sin Angular Signals, actualiza y administra manualmente el estado y sus efectos. Esto a menudo implica escribir funciones para actualizar el estado y desencadenar cambios, lo que hace que el código sea más complejo y propenso a errores. Con Angular Signals, la administración de estados se vuelve más declarativa, eficiente y menos propensa a errores, lo que mejora tanto el rendimiento como la capacidad de mantenimiento.