Aplicaciones Sin Zone.js: Migración a Signals en Angular

La evolución de Angular hacia un modelo de reactividad basado en signals representa un cambio fundamental en cómo desarrollamos aplicaciones modernas. Este nuevo enfoque no solo mejora el rendimiento, sino que también simplifica la detección de cambios, permitiendo crear aplicaciones más eficientes y con mejor experiencia de usuario. Exploraremos cómo implementar aplicaciones "Zoneless" en Angular y los beneficios que esto conlleva para nuestros proyectos.

¿Qué son las Zoneless Applications en Angular?

Las Zoneless Applications (aplicaciones sin Zone.js) representan un nuevo paradigma en Angular donde se prescinde de Zone.js como mecanismo de detección de cambios. Este cambio es posible gracias al nuevo modelo de reactividad basado en signals que Angular ha implementado.

Angular ahora ofrece un ecosistema completo de herramientas reactivas:

• Signal
• Computed signal
• Effect
• RX resource
• To signal
• Query signals
• Input signals
• Output signals

El beneficio principal de migrar a una aplicación Zoneless es el rendimiento en runtime. Al utilizar signals, Angular implementa una reactividad granular similar a la que ofrecen frameworks como SolidJS, Vue o Svelte, donde solo se actualizan los componentes que realmente cambiaron, sin necesidad de recorrer todo el árbol DOM como lo hacía anteriormente.

Requisitos para implementar Zoneless Applications

Antes de migrar a una aplicación sin Zone.js, debemos asegurarnos de cumplir con dos requisitos fundamentales:

1. Tener toda la aplicación basada en signals: Es necesario que toda la reactividad de nuestra aplicación esté implementada utilizando la API de signals.

2. Configurar todos los componentes con OnPush: Como medida de seguridad adicional, debemos configurar la estrategia de detección de cambios OnPush en todos nuestros componentes.

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './home.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomeComponent {
  // Componente con OnPush
}

Es importante destacar que esta funcionalidad aún está en fase experimental, por lo que se recomienda probarla en una rama separada antes de implementarla en producción.

Implementando OnPush en todos los componentes

El primer paso para preparar nuestra aplicación es configurar todos los componentes con la estrategia de detección de cambios OnPush. Aunque actualmente no existe una migración automática para esto, podemos hacerlo manualmente:

1. Importar ChangeDetectionStrategy en cada componente:

import { ChangeDetectionStrategy } from '@angular/core';

2. Agregar la configuración en el decorador del componente:

@Component({
  // Otras configuraciones...
  changeDetection: ChangeDetectionStrategy.OnPush
})

Para componentes futuros, podemos configurar que se creen automáticamente con OnPush modificando el archivo angular.json:

"schematics": {
  "@schematics/angular:component": {
    "changeDetection": "OnPush",
    "standalone": true,
    "skipTests": true
  }
}

Una vez configurados todos los componentes, debemos verificar que la aplicación siga funcionando correctamente antes de proceder con la eliminación de Zone.js.

Habilitando una aplicación Zoneless

Para habilitar una aplicación sin Zone.js, debemos seguir estos pasos:

1. Configurar la aplicación para funcionar sin Zone.js

En el archivo app.config.ts, debemos importar y utilizar la función provideZonelessChangeDetection:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideZonelessChangeDetection } from '@angular/core/rxjs-interop';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideZonelessChangeDetection()
  ]
};

2. Eliminar Zone.js de los polyfills

Debemos eliminar Zone.js de los polyfills en el archivo angular.json:

"polyfills": [
  // Eliminar "zone.js" de aquí
]

También debemos revisar y eliminar Zone.js de los polyfills en la configuración de pruebas si los tenemos.

3. Desinstalar Zone.js como dependencia

Finalmente, podemos desinstalar Zone.js como dependencia del proyecto:

npm uninstall zone.js

Después de estos cambios, debemos verificar nuevamente que nuestra aplicación siga funcionando correctamente. Si hemos migrado correctamente a signals y configurado OnPush en todos los componentes, la aplicación debería funcionar sin problemas.

Consideraciones importantes sobre Zoneless Applications

Aunque las aplicaciones sin Zone.js ofrecen mejoras significativas en rendimiento, hay algunas consideraciones importantes:

• Testing: Actualmente, las APIs de testing de Angular todavía dependen de Zone.js. Si utilizamos pruebas unitarias o de integración, es posible que necesitemos mantener Zone.js hasta que las librerías de testing se actualicen.

• Funcionalidad experimental: Al ser una característica experimental, puede haber cambios en futuras versiones de Angular.

• Migración gradual: Podemos prepararnos para esta migración de forma gradual:

  1. Migrar toda la reactividad a signals
  2. Configurar todos los componentes con OnPush
  3. Habilitar la aplicación sin Zone.js cuando estemos seguros de que todo funciona correctamente

La reactividad granular comenzará a funcionar tan pronto como implementemos signals y OnPush, incluso antes de eliminar Zone.js completamente.

La evolución hacia aplicaciones Zoneless representa un paso importante en la madurez de Angular como framework, acercándose a modelos de reactividad más eficientes y modernos que ya utilizan otros frameworks populares. Esta transición nos permite crear aplicaciones más rápidas y con mejor experiencia de usuario, aprovechando al máximo las capacidades de la web moderna.

¿Has comenzado a implementar signals en tus proyectos de Angular? Comparte tu experiencia en los comentarios y cuéntanos cómo ha mejorado el rendimiento de tus aplicaciones.