Angular 18 News: La Rivoluzione della Change Detection

Novità sulla Change Detection

Ciao a tutti! Oggi vi porto una novità che molti di noi sviluppatori Angular stavano aspettando con ansia: il supporto sperimentale per l'uso di Angular senza zone.js!

Per chi non è familiare con il termine, zone.js è quella libreria che gestisce il rilevamento dei cambiamenti all'interno delle nostre app Angular. Tuttavia, se da una parte ci ha aiutato molto, dall'altra ha portato con sé anche alcuni grattacapi in termini di performance e complessità per lo sviluppatore. Ma finalmente il team di Angular ha fatto passi avanti e ci sta regalando le prime API sperimentali per far girare Angular senza questa dipendenza. Sì, avete capito bene, Angular senza zone.js! 🚀

Come Provare il Supporto Senza Zone

Volete subito mettere le mani su questa nuova feature? È più facile di quanto pensiate. Ecco come fare:

1. Aggiungete il provider sperimentale al bootstrap della vostra applicazione. Ecco il codice da utilizzare:

   import { provideExperimentalZonelessChangeDetection } from '@angular/core';
   
   bootstrapApplication(App, {
     providers: [provideExperimentalZonelessChangeDetection()],
   });
   

2. Rimuovete zone.js dai vostri polyfills nel file angular.json. E siete pronti a partire!

E mi raccomando, ricordatevi che siamo ancora in fase sperimentale, quindi aspettatevi qualche aggiustamento man mano che la funzionalità si evolve.

Perché Angular Senza Zone?

Vi starete chiedendo: "Perché dovrei preoccuparmi di usare Angular senza zone.js?" Ecco alcuni dei vantaggi che questa scelta può portare:

• Componibilità migliorata: perfetto per chi lavora con micro-frontend o deve integrare Angular con altri framework.
• Prestazioni potenziate: il rendering iniziale e il runtime sono più veloci.
• Bundle più leggeri: meno codice significa caricamenti pagina più rapidi.
• Stack trace più chiari: facilità nel debug e migliore esperienza per lo sviluppatore.

Sfruttare i Signals nei Componenti

Per ottenere il massimo dal nuovo modello senza zone.js, il team di Angular consiglia di utilizzare i signals nei vostri componenti. Ecco un esempio pratico:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Ciao da {{ name() }}!</h1>
    <button (click)="handleClick()">Go Zoneless</button>
  `,
})
export class App {
  protected name = signal('Angular');

  handleClick() {
    this.name.set('Zoneless Angular');
  }
}

In questo esempio, cliccando sul pulsante viene invocato il metodo handleClick, che aggiorna il valore del signal e automaticamente aggiorna l'interfaccia utente. È un approccio simile a quello con zone.js, ma senza tutta la magia nera dietro le quinte!

Aggiornamento a Zoneless

Angular sta vivendo una vera e propria rivoluzione, e il supporto senza zone.js è uno dei pilastri di questo cambiamento. Non preoccupatevi però: mentre Angular evolve, le API attuali continueranno a funzionare. La transizione è pensata per essere il più indolore possibile.

Se i vostri componenti utilizzano la strategia di rilevamento dei cambiamenti ChangeDetectionStrategy.OnPush, siete già sulla buona strada per un passaggio senza problemi al modello senza zone.

Coalescing di Default

Una chicca della versione 18: ora, sia per le app senza zone.js che per quelle che lo utilizzano, Angular applica il coalescing degli eventi di default. Questo riduce il numero di cicli di rilevamento dei cambiamenti, migliorando ulteriormente le prestazioni.

Per abilitare il coalescing degli eventi nei progetti esistenti, potete configurare il vostro provider NgZone nel bootstrap:

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

bootstrapApplication(App, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })],
});

Supporto per Async/Await Nativo

Uno dei grandi limiti di zone.js è stato il modo in cui gestisce le chiamate async/await. Grazie alla rimozione di zone.js, ora Angular può sfruttare appieno async/await nativi, rendendo il codice più leggibile e i bundle più piccoli. Questo migliora notevolmente il debug e l'efficienza del codice.

Il supporto senza zone è già stato integrato anche nell'Angular CDK e in Angular Material, dimostrando come questa evoluzione sia una parte essenziale della roadmap di Angular.

E questo è tutto per oggi! Spero che queste novità vi entusiasmino quanto entusiasmano me. Fatemi sapere cosa ne pensate e, come sempre, buon coding a tutti! 🚀