El equipo de Angular finalmente está publicando los primeros comentarios y prototipos con respecto a traer Signals, una nueva primitiva reactiva, al marco de trabajo central.

PR: hazaña (núcleo): agregar señales angulares a la API pública

Lo que debe saber: TL;DR:

• Hasta cierto punto, Signals es poderoso como RxJS pero con una sintaxis más simple.
• Si se implementa, podría cambiar la forma en que funciona la detección de cambios. Posiblemente, eliminando zone.js.
• Las señales no van a reemplazar a RxJS en el corto plazo

Una señal es una fuente de valor
Alex Rickabaugh

Las señales han sido popularizadas recientemente por Solid.js , que las describe de la siguiente manera:

Las señales son la piedra angular de la reactividad en Solid. Contienen valores que cambian con el tiempo; cuando cambia el valor de una señal, automáticamente actualiza todo lo que la usa.

Si está familiarizado con RxJS, esto podría recordarle a BehaviorSubject o, de manera más general, a valores multidifundidos. Sin embargo, a diferencia de BehaviorSubject, Signals no requeriría que los observadores se suscriban para recibir notificaciones de cambios.

Con Signals, las suscripciones se crean y destruyen automáticamente bajo el capó. Más o menos lo que sucede al usar la tubería asíncrona en RxJS. Sin embargo, a diferencia de los Observables, Signals no requiere una Suscripción para usarse fuera de la plantilla.

Las señales hacen todo lo posible para ocultar algunas de las complejidades de RxJS.

Como se dijo anteriormente, las señales contienen valores que cambian con el tiempo. Entonces, echemos un vistazo a eso.

Ejemplo de señales

El siguiente ejemplo comienza con Introducción/Señales y muestra cómo el countvalor cambia con el tiempo y se refleja en el DOM.

Luego veremos cómo podría implementarse en Angular.

Comencemos por crear una señal.

1. Cree una señal, importando createSignaldesde solid-js.
2. Pasar un argumento a createSignal. Este es el valor inicial.
3. createSignaldevuelve una matriz con dos funciones, un getter y un setter.
4. Al desestructurar , podemos nombrar estas funciones como queramos. En este caso, llamamos getter county setter setCount.

const [count, setCount] = createSignal(0);

Las similitudes no terminan aquí. El enfoque general de Solid consiste en envolver cálculos reactivos en funciones y utiliza JSX.

Así es como se desarrolla:

import { createSignal} from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);

  return <div>Count: {count()}</div>;
}

Mediante el uso de JavaScript, setIntervalcreamos un contador que se incrementa periódicamente y que se refleja en la interfaz de usuario.

import { createSignal } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  setInterval(() => setCount(count() + 1), 1000);

  return <div>Count: {count()}</div>;
}

Añadimos la siguiente línea en Counter:

const doubledCount = () => 2 * count();

return <div>Count: {count()}, Double: {doubledCount()}</div>;

Esto es genial porque simplifica la experiencia del desarrollador haciendo que el código sea más reactivo.

Señales en Angular — Ejemplo

Veamos un ejemplo de cómo podría verse en Angular.

Tenga en cuenta que si desea usar Signals en Angular, debe usar Angular v16.0.0-next.0 que se acaba de lanzar.

No hace falta decir que todavía es un prototipo y es posible que no desee usarlo en producción :)

Otra forma de probarlo es usando StackBlitz e importando la carpeta de señales.

Así es como se verían las señales en Angular:

...

@Component({
  selector: 'signals-not-noise',
  standalone: true,
  template: `
    <div>Count: {{ count() }}</div>
    <div>Double: {{ doubledCount() }}</div>
  `
})
export class App {
  count = signal(0);
  doubledCount = computed(() => this.count() * 2);

  constructor() {
    setInterval(() => this.count.set(this.count() + 1), 1000);
  }
}

En otras palabras, doubleCountdepende de, o se calcula a partir de ella, county esta dependencia se refleja automáticamente cada vez que cambia esta última.

Gracias a computedpodemos tomar el valor de otras Señales y construir sobre ellas. Además, se memoriza, por lo que no necesita ejecutar el cálculo cada vez que necesita el valor, sino solo cuando cambia.

Esto conduce a una reactividad de grano fino que podría respaldar una mejor detección de cambios.

Llamadas a funciones en plantillas angulares

¿Realmente vamos a usar llamadas de función en plantillas Angular?

¿No es eso malo?

Respuesta corta: puede ser malo.

Respuesta más larga : no es tan malo si la evaluación es barata y las señales van a ser baratas.

No llamar funciones en plantillas es una regla general que previene algo que puede ser un problema en lugar de algo que siempre es un problema.

Si la función a la que llama en la plantilla ejecuta operaciones costosas, es posible que tenga problemas. El sistema de detección de cambios tiene que volver a evaluar la función ante cualquier cambio, y pueden acumularse costosas operaciones.

Puedes leer más en el siguiente post de Enea Jahollari .

¿Qué está mal con RxJS?

Usando RxJS necesitaríamos hacer algo como esto:

import { Component } from '@angular/core';
import { BehaviorSubject, map, take } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  count$ = new BehaviorSubject(0);
  doubleCount$ = this.count$.pipe(map((value) => value * 2));

  constructor() {
    setInterval(() => {
      let currentCount = 0;
      this.count$.pipe(take(1)).subscribe((x) => (currentCount = x));
      this.count$.next(currentCount + 1);
    }, 1000);
  }
}

• Tener que administrar un valor nulo hasta que la solicitud asíncrona se complete y devuelva otro valor
• El uso de la tubería asíncrona varias veces crea suscripciones separadas y solicitudes HTTP separadas. Es posible que desee utilizar shareReplay para evitar múltiples efectos secundarios.

Puede parecer que Signals se hará cargo y reemplazará a RxJS.

Sin embargo, Signals no maneja muy bien las condiciones de carrera, por lo que RxJS se quedará y admitirá operaciones asincrónicas.

También es posible convertir Señales en Observables y viceversa.

Puedes ver una explicación de Joshua Morony.

El uso de Signals en Angular podría facilitar el aprendizaje de Angular, al menos al principio.

Detección de nuevos cambios

Esto podría ser un gran cambio para Angular.

Gracias a Signals, podemos ver un futuro sin zone.js.

Las señales permiten comprobar los cambios a un nivel más granular en lugar de comprobar todo el árbol de componentes en busca de cambios. A su vez, esto podría usarse para mejorar la detección de cambios angulares.

Por el momento, diferentes marcos verifican qué cambios en el árbol DOM en diferentes niveles, por ejemplo en

• Nivel de árbol de aplicaciones — Angular
• Nivel de árbol de componentes — Reaccionar
• Elementos individuales — Sólido

Según Alex Rickabaugh (la misma persona detrás de The Little-known Story Behind Angular Standalone Components y líder técnico en el Angular Core Team), no lo necesitarías ngOnChangeen un mundo Signal.

Buen material

• Introducción de Joshua Morony a Signals en Angular en YouTube
• Ejemplo de Stackblitz por Enea Jahollari
• Reactividad con Signals llega a Angular — Brandon Roberts y Alex Rickabaugh
• La evolución de las señales en JavaScript por Ryan Carniato en DEV

¡Gracias por ser parte de nuestra comunidad! Antes de que te vayas:

• Aplaude la historia y sigue al autor
• Ver más contenido en la publicación Level Up Coding
• Curso gratuito de entrevista de codificación ⇒ Ver curso
• Síguenos: Twitter | LinkedIn | Boletin informativo