This content originally appeared on DEV Community and was authored by Ricardo Chavarria
Si has estado siguiendo la evolución de Angular, sabrás que cada nueva versión trae consigo mejoras y optimizaciones. Pero de vez en cuando, llega una versión que no es solo una actualización, sino un verdadero punto de inflexión. Angular 20 es una de esas versiones, y trae consigo la promoción oficial a Developer Preview de una de las características más esperadas y transformadoras: la ejecución de aplicaciones sin Zone.js.
¿Por qué tanto revuelo? Porque aunque no está listo para producción, nos invita a probar un cambio fundamental en cómo Angular gestiona la detección de cambios, abriendo la puerta a un rendimiento sin precedentes y a un código más explícito y predecible.
En este artículo, vamos a desglosar qué significa "zoneless", por qué es una revolución y cómo puedes empezar a experimentar con la próxima generación de aplicaciones Angular. ¡Vamos allá!
El "Problema" Silencioso: ¿Qué es Zone.js y por qué queremos dejarlo atrás?
Para entender la importancia de un Angular "zoneless", primero debemos entender qué es y qué hace Zone.js.
Desde sus inicios, Angular ha dependido de Zone.js para saber cuándo debe ejecutar la detección de cambios. Zone.js es una librería que utiliza una técnica llamada "monkey-patching" para interceptar casi todas las operaciones asíncronas del navegador: setTimeout, Promise, eventos del DOM (como clics), peticiones fetch, etc.
Cuando una de estas operaciones se completa, Zone.js notifica a Angular, que por precaución, inicia un ciclo de detección de cambios que recorre todo el árbol de componentes.
Las desventajas de este enfoque son claras:
- Sobrecarga de Rendimiento (Overhead): La detección de cambios se ejecuta con más frecuencia de la necesaria.
- Tamaño del Bundle: Zone.js añade un peso extra al bundle final de tu aplicación.
- La "Magia" es Impredecible: El "monkey-patching" puede causar conflictos con librerías de terceros o nuevas APIs del navegador.
- Complejidad Oculta: Oculta el mecanismo de reactividad. El desarrollador no tiene control explícito sobre cuándo se actualiza la UI.
La Solución Elegante: ¡Hola, Detección de Cambios "Zoneless"!
La era "zoneless" elimina por completo la dependencia de Zone.js. En su lugar, Angular adopta un modelo de reactividad mucho más fino, explícito y eficiente.
El protagonista de esta historia son las Señales (Signals).
Introducidas en Angular 16, las Signals son el pilar fundamental del futuro "zoneless". Una señal es un contenedor reactivo para un valor que puede notificar a sus consumidores cuando ese valor cambia.
El nuevo modelo funciona así:
Cuando el valor de un Signal cambia, Angular sabe exactamente qué componentes y qué partes de la vista dependen de esa signal y actualiza únicamente esas partes. No hay un barrido completo del árbol de componentes. La actualización es local, granular y quirúrgica.
Esto es un cambio de paradigma. Pasamos de un modelo de "revisar todo por si acaso" a un modelo de "actualizar solo esto porque sé que ha cambiado".
Aclaración Crucial: ¿Necesito "Zoneless" para usar Signals?
Esta es una de las preguntas más importantes: ¿debo esperar a "zoneless" para empezar a usar Signals?
La respuesta es un rotundo NO.
Puedes y debes empezar a usar Signals hoy mismo en tus aplicaciones Angular (v16+), incluso si siguen utilizando Zone.js. De hecho, son dos conceptos relacionados pero independientes:
- Signals NO necesitan Zoneless para funcionar. Ya ofrecen grandes beneficios en un entorno con Zone.js, proporcionando actualizaciones de vista más rápidas y un código más reactivo.
- Pero Zoneless SÍ necesita Signals. Sin la "magia" de Zone.js para detectar cambios, las Signals se convierten en el mecanismo principal y explícito para que Angular sepa qué partes de la UI necesitan ser actualizadas.
Al usar Signals en una aplicación con Zone.js, tu código ya se vuelve más eficiente. Cuando finalmente migres a "zoneless", la transición será mucho más sencilla porque tus componentes ya estarán preparados.
Manos a la Obra: ¿Cómo Funciona en la Práctica?
Antes: Con Zone.js y Propiedades de Clase
// contador.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-contador',
template: `
<h2>Contador (con Zone.js)</h2>
<p>Valor actual: {{ count }}</p>
<button (click)="incrementar()">Incrementar</button>
`
})
export class ContadorComponent {
count = 0;
incrementar() {
this.count++;
}
}
Aquí, cuando incrementar() se ejecuta, Zone.js intercepta el evento click, notifica a Angular y se inicia la detección de cambios que actualizará la vista.
Ahora: El Futuro "Zoneless" con Signals
¡Nota importante! La siguiente funcionalidad está en Developer Preview. Esto significa que la API es funcional, pero podría cambiar y no se recomienda para aplicaciones en producción. Es el momento perfecto para probarla en proyectos personales y para dar feedback valioso al equipo de Angular.
Para habilitar el modo "zoneless", primero debemos configurar el arranque de nuestra aplicación.
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [
// ¡Aquí está la magia! Activamos el modo zoneless.
provideZonelessChangeDetection()
]
}).catch(err => console.error(err));
Ahora, podemos refactorizar nuestro componente para usar Signals.
// contador-zoneless.component.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-contador-zoneless',
standalone: true, // ¡Los componentes Standalone son el camino!
template: `
<h2>Contador (Zoneless con Signals)</h2>
<!-- Para leer el valor de una señal, la invocamos como una función -->
<p>Valor actual: {{ count() }}</p>
<button (click)="incrementar()">Incrementar</button>
`
})
export class ContadorZonelessComponent {
// Creamos la señal con un valor inicial de 0
readonly count = signal(0);
incrementar() {
// Usamos .update() para modificar el valor basado en el valor anterior
this.count.update(currentValue => currentValue + 1);
}
}
En este nuevo componente, no hay Zone.js. Cuando llamamos a this.count.update(), la signal notifica directamente al template, y Angular actualiza solo el párrafo
. Eficiencia en estado puro.
Beneficios Clave (y Potenciales) de la Arquitectura Zoneless
Adoptar este nuevo enfoque traerá ventajas monumentales una vez sea estable:
🚀 Rendimiento Superior: Actualizaciones increíblemente rápidas y localizadas.
📦 Bundle Más Pequeño: Al eliminar Zone.js, reducimos el tamaño final de la aplicación.
🧠 Código Más Predecible y Explícito: Se acaba la "magia". Tienes el control total sobre las actualizaciones.
🤝 Mejor Interoperabilidad: Se eliminan los conflictos con librerías de terceros.
This content originally appeared on DEV Community and was authored by Ricardo Chavarria
Ricardo Chavarria | Sciencx (2025-06-10T05:45:52+00:00) Angular 20 y el futuro sin Zone.js: La revolución “Zoneless” ha llegado (a Developer Preview). Retrieved from https://www.scien.cx/2025/06/10/angular-20-y-el-futuro-sin-zone-js-la-revolucion-zoneless-ha-llegado-a-developer-preview/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.