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

Contenido del curso

Configuración Inicial

Gestión de Entornos

Nuevas Funcionalidades en Angular

Server-Side Rendering (SSR) y Navegación

Optimización de Rendimiento

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:02

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

Curso de Angular Avanzado

Clase 35 de 36

Clase 35 / 36

Recursos

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:

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.
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:

Importar ChangeDetectionStrategy en cada componente:

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

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.

Resumen

¿Qué son las Zoneless Applications en Angular?

Angular ahora ofrece un ecosistema completo de herramientas reactivas:

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

Requisitos para implementar Zoneless Applications

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

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.
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

Importar ChangeDetectionStrategy en cada componente:

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

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

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.

¿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.

Configuración Inicial

Curso Avanzado de Desarrollo con Angular para eCommerce

Clona y explora el proyecto base de Angular

Configuración de ESLint y Prettier en proyectos Angular

Prettier y ESLint sin conflictos en Angular

Gestión de Entornos

Manejo de environments en Angular

Ambiente de staging en Angular paso a paso

Nuevas Funcionalidades en Angular

Variables locales con @let en Angular

Lazy loading de imágenes con ngSrc en Angular

URLs amigables para SEO en Angular

"Reactividad en Angular: Migración a Input Signals"

Migración automática de @Input a signals en Angular

Migración de Outputs en Angular: De Decoradores a Funciones

linkedSignal en Angular: computed con set

Sincronización de Componentes en Angular con Model y Signals

toSignal: Observables de RxJS como Signals

Conversión de Observables a Signals en Angular con toSignal

Interoperabilidad de RXDS y Signals en Angular: Uso de RX Resourcers

Manejo de Parámetros Reactivos con RX Resource en Angular

Manejo de Promesas y Fetch en Angular sin RXJS

Reactividad en Angular: Uso de Signals para Consultas DOM

Configuración de Prettier para HTML en Angular

Server-Side Rendering (SSR) y Navegación

Migración al Application Builder de Angular

Server Side Rendering con Angular: Mejora Rendimiento y SEO

afterNextRender: código seguro solo en el browser

Geolocalización y APIs: Creando un Mapa de Tiendas Cercanas

Pre-rendering en Angular con ng build

Desplegando Angular SSR en Firebase

Optimización de Rendimiento

Generación de Meta Tags Dinámicos con Angular y Open Graph

Creación de MetaTags Dinámicos en Angular

Proceso de Hydration y Event Replay en Angular

Productos relacionados con RxResource en Angular

Carga diferida de componentes en Angular para mejorar rendimiento

Optimización de Incremental Hydration en Angular

Configuración de Server Routing en Angular

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

Cierre del curso avanzado de Angular

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