Hace poco fue lanzada la versión 20.2 de Angular, que nos trae interesantes novedades y una mirada al futuro del desarrollo con este framework.

Démosele un vistazo 👀

¡Zoneless estable!

ZoneJS es, en pocas palabras, una librería externa que permite a Angular reaccionar a los cambios que ocurren dentro de nuestra aplicación (variables, eventos, timeouts, etc). Es funcional y práctico para el desarrollador (al inicio), pero trae muchos problemas consigo, como mermar el performance, dificultar la predicción de cambios y atrasar la extensión de un proyecto, pues mientras más grande sea nuestra aplicación, más nos afectará el lidiar con ZoneJS, lo que nos obliga a usar tácticas de mejora de performance que, si bien son importantes, deberían estar por defecto en el framework.

¡Zoneless viene a solucionar esto! Ahora podemos ejecutar una aplicación de Angular sin usar ZoneJS, lo que promete un mejor performance, cambios más predecibles, bundle size más pequeño y una mejor experiencia de desarrollo en general.

¿Cómo podemos probarlo?

La configuración es muy simple:

// standalone bootstrap
bootstrapApplication(MyApp, {providers: [
  provideZonelessChangeDetection(),
]});

// NgModule bootstrap
platformBrowser().bootstrapModule(AppModule);
@NgModule({
  providers: [provideZonelessChangeDetection()]
})
export class AppModule {}

De esta manera, Angular no tomará en cuenta ZoneJS. Esto significa que tus variables no se actualizarán automáticamente tras un cambio, sino que el cambio deberá ser orquestado por un factor externo, como un signal.

Para más información, puedes ver este vídeo tutorial de Zoneless

Nueva Animation API

¿Alguna vez usaste las animaciones de Angular? Bueno, las deprecaron 🙂☠️

Pero ahora tenemos una nueva API, que nos permite usar animaciones de una manera más sencilla, sin necesidad de usar modulos, lo que reduce el bundle size y nos brinda una mejor experiencia al desarrollar.

Ahora tenemos animate.enter y animate.leave, que son elementos que permiten especificar a Angular qué clase animada colocar al momento de renderizar un componente.

Nota: NO son directivas, son elementos controlados directamente por el compilador, lo que no incrementa el bundle size final de nuestra aplicación.

// typescript
import {Component, signal} from '@angular/core';
@Component({
  selector: 'app-enter',
  templateUrl: 'enter.html',
  styleUrls: ['enter.css'],
})
export class Enter {
  isShown = signal(false);
  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
}

// html

<h2><code>animate.enter</code> Example</h2>
<button type="button" (click)="toggle()">Toggle Element</button>
@if (isShown()) {
  <div animate.enter="enter-animation">
    <p>The box is entering.</p>
  </div>
}

// css

.enter-animation {
  animation: slide-fade 1s;
}
@keyframes slide-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Lo que pasa aquí es que, al momento de renderizar el componente dentro del @If, este se renderiza con una animación. Lo mismo en caso de desaparecer.
Es una forma muy práctica de agregar animaciones, combinando css y el poder de Angular.

Además, es compatible con variables (como signals) ¡por lo que puedes hacer animaciones dinámicas complejas basadas en valores!

Atributos aria ahora permiten binding con variables

Si eres de los que coloca atributos aria- en tus aplicaciones, ¡felicitaciones! Te preocupas por la accesibilidad.

Pues buenas noticias, ahora Angular permite bindear variables directamente a estos atributos, sin necesidad del prefijo "attr", lo que mejora la lectura de nuestros componentes, además de beneficiar el desarrollo Server Side Rendering.

// Antes
<button [attr.aria-label]="myLabel"> Hey </button>

// Ahora
<button [ariaLabel]="myLabel"> Hey </button>



//ts
label = 'Hey button'

Summary

Estos fueron los cambios más llamativos IMO. Puedes ver la lista de cambio en el changelog.

Con estos cambios se puede apreciar la mejora continua que Angular ofrece en cada versión. Apostando por un desarrollo moderno, rápido y con las buenas prácticas de siempre

¿Ya estás listo para hacer upgrade a tus proyectos?