Algunas personas parecen estar descontentas con la nueva dirección. A algunas personas simplemente no les gustan los cambios innovadores.
Pero el equipo de Angular ha afirmado su compromiso con la compatibilidad con versiones anteriores y ejecutó una RFC completa en Angular Signals antes de lanzar los nuevos cambios de signals de Angular.
Así que depende totalmente de usted si adopta o no el nuevo sistema de detección de cambios. Zone.js sigue existiendo y seguirá existiendo durante un tiempo.
Pero, ¿por qué signals de Angular? ¿Por qué un nuevo sistema de detección de cambios?
La razón de las signals de Angular es simple: mejorar el rendimiento de la detección de cambios.
Las signals permiten que el marco de trabajo de Angular optimice el rendimiento de la detección de cambios. Además, son una dependencia ligera: 2 KB para ser exactos.
Esto es realmente bueno si tienes una aplicación empresarial Angular grande que requiere mucha representación del cliente.
Así que, hoy, voy a mostrarte todo lo que necesitas saber sobre las signals de Angular.
Empecemos con un poco de historia.
¿Cómo hemos llegado hasta aquí?
El framework Angular depende de su mecanismo de detección de cambios. La detección de cambios es la forma en que Angular actualiza la interfaz de usuario en el navegador cuando cambia el estado de la aplicación.
Como dijo Misko (el creador original de Angular), en su día, cuando Zone.js era el nuevo sistema de detección de cambios, se suponía que era lo mejor.
Cuando AngularJS era popular, utilizaba algo llamado ciclo de resumen para la detección de cambios.
Luego, el equipo de AngularJS comenzó a trabajar en Angular y eligieron un nuevo sistema de detección de cambios basado en una biblioteca llamada zone.js.
Zone.js fue desarrollado por Brian Ford y se lanzó por primera vez alrededor de 2014. Su objetivo era abordar los retos de gestionar operaciones asíncronas en JavaScript, especialmente en el contexto de marcos de trabajo que necesitan rastrear cambios en diferentes contextos de ejecución.
Esta biblioteca ha sido el sistema de detección de cambios predeterminado para Angular desde su creación.
Sin embargo, a medida que Angular ha ido creciendo, el equipo vio la necesidad de una mejor forma de hacer la detección de cambios.
¡Y ahora tenemos Angular Signals! 💥 💥 💥
El increíble equipo de Angular introdujo por primera vez las signals en Angular 16 como vista previa para desarrolladores y desde entonces ha seguido trabajando y madurando las signals de Angular.
Las signals de Angular son muy ligeras, de unos 2 KB, y no tienen dependencias de terceros.
Entonces, exactamente, ¿por qué signals de Angular?
Las signals de Angular son un sistema que rastrea cómo y dónde se utiliza su estado a lo largo de una aplicación, lo que permite al marco optimizar las actualizaciones de representación.
Ese es el objetivo de las signals de Angular: permitir que el marco de trabajo de Angular optimice las actualizaciones de detección de cambios.
La detección de cambios se produce constantemente en toda la aplicación Angular. Lo cual está bien si la aplicación no es muy grande. Pero a medida que crece, el ciclo de detección de cambios aumenta. Con las signals, el marco de trabajo de Angular puede realizar cambios de detección de cambios «inteligentes».
Las signals de Angular permiten a Angular comprender mejor la detección de cambios. Y permiten que el marco de trabajo realice actualizaciones de precisión que son importantes para el rendimiento.
La mejor manera de entender las signals es empezar a construir con ellas, ¡así que empecemos!
Escribir tu primera signal
Empecemos con un ejemplo sencillo. Imaginemos que tenemos un componente Angular incremental.
Antes de que existieran las signals de Angular, nuestro código se vería más o menos así.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [],
template: `
<button (click)="increment()">Increment</button>
<p>{{ this.counter }}</p>
`
})
export class AppComponent {
counter = 0;
increment() {
this.counter++;
}
}Cuando se hace clic en el botón de incremento, el mecanismo de detección de cambios de Angular actualiza automáticamente el HTML para que coincida con el nuevo valor del contador.
Pero con la signals de Angular todo cambia.
Nuestro componente ahora tiene este aspecto.
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [],
template: `
<button (click)="increment()">Increment</button>
<p>{{ this.counter() }}</p>
`
})
export class AppComponent {
counter = signal(0);
increment() {
this.counter.set(this.counter() + 1);
}
}Lo que hemos tomado es convertir la variable de contador en el tipo de signal.
Las 3 funciones de signals
Hay 3 funciones simples relacionadas con la signal.
La signal que ya hemos visto en acción. No es más que una declaración de un valor dinámico.
firstName = signal('Daniel');El cálculo es una forma de combinar múltiples signals en una sola signal de solo lectura.
firstName = signal('Daniel');
lastName = signal('Kreider');
fullName = computed(() => firstName() + ' ' + lastName());Y por último, el efecto es una operación que se ejecuta cuando cambia un valor de signal. Esto le permite reaccionar mediante programación a los cambios de signals.
firstName = signal('Daniel');
lastName = signal('Kreider');
fullName = computed(() => firstName() + ' ' + lastName());
effect(() => {
console.log(`The current name is: ${fullName()}`);
});Las signals en angular son sencillas:
¿Debería migrar a las signals?
Las signals de Angular han llegado para quedarse. Y son, sin duda, el futuro del ecosistema de detección de cambios de Angular.
También han madurado más allá de la fase beta y ahora son estables desde Angular vs 17.2.
Así que, en resumen, sí, empiece a migrar a las signals de Angular.
El futuro de las signals de Angular
Por ahora, el equipo de Angular ha empezado a plantear la idea de formularios de Angular basados en signals
¿Cómo serían? ¿Formularios Angular basados en signals?
Y eso, amigo mío, es todo lo que necesitas saber sobre las signals de Angular. En resumen, las signals de Angular te permiten indicarle a la interfaz de usuario qué datos le interesan a tu aplicación y cuándo cambian esos datos.
Angular puede mantener tu interfaz de usuario sincronizada con esos datos cuando cambian.