Angular 18 News:

Novità sulla Change Detection:

Ciao a tutti! Oggi vi parlo di una novità fresca fresca dal mondo Angular che aspettavamo da tempo: il supporto sperimentale per l'uso di Angular senza zone.js!

Per chi non lo sapesse, zone.js è quella libreria che ha sempre gestito il rilevamento dei cambiamenti in Angular. Però, diciamocelo, ha portato con sé una serie di problemi sia a livello di esperienza per gli sviluppatori che di performance. Ecco perché, da anni, il team Angular stava lavorando su un modo per usare Angular senza dipendere da zone.js. E finalmente sono arrivate le prime API sperimentali per un Angular senza zone!

Come provare il supporto senza zone

Vediamo come provare questa funzionalità. Per iniziare, basta aggiungere provideExperimentalZonelessChangeDetection al bootstrap della vostra applicazione:

bootstrapApplication(App, {
	providers: [provideExperimentalZonelessChangeDetection()],
});

Dopo aver aggiunto il provider, rimuovete zone.js dai vostri polyfills in angular.json.

… da documentare con snippets di codice.

Vantaggi di andare senza zone

Andare senza zone apre un mondo di possibilità per noi sviluppatori:

• Migliore composabilità per i micro-front-end e interoperabilità con altri framework
• Render iniziale e runtime più veloci
• Dimensione del bundle ridotta e caricamenti pagina più rapidi
• Stack trace più leggibili
• Debugging più semplice

Utilizzare i signals nei componenti

Il modo migliore per sfruttare il nuovo modello senza zone è usare i segnali nei vostri componenti:

@Component({
  ...
  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');
  }
}

Nell'esempio sopra, cliccando sul pulsante si invoca il metodo handleClick,viene aggiornato il valore del signal e questo aggiorna l'interfaccia utente. Funziona in modo simile a un'app che usa zone.js, con poche differenze. Senza zone, Angular limita il controllo dei cambiamenti a pochi trigger, come gli aggiornamenti dei segnali. Questo include anche un nuovo scheduler con coalescing per evitare controlli multipli consecutivi.

Aggiornamento a zoneless

Angular sta attraversando un'evoluzione e il supporto senza zone è una parte fondamentale di questo processo. Fortunatamente, anche mentre angular sta cambiando, le API esistenti comunque continuano a funzionare, garantendo l’operatività del framework.

Se i vostri componenti sono compatibili con la strategia di rilevamento dei cambiamenti ChangeDetectionStrategy.OnPush di Angular, dovrebbero essere per lo più compatibili con il modello senza zone, rendendo la transizione senza intoppi!

Coalescing di default

A partire dalla versione 18, utilizzeremo lo stesso scheduler per le app senza zone e per quelle che usano zone.js con il coalescing abilitato. Per ridurre il numero di cicli di rilevamento dei cambiamenti nelle nuove app con zone.js, abbiamo anche abilitato il coalescing per zone di default.

Per optare nel coalescing degli eventi per progetti esistenti, configurate il vostro provider NgZone in bootstrapApplication:

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

Supporto per async/await nativo

Zone.js intercetta molte chiamate del browser per integrare il rilevamento dei cambiamenti di Angular. Purtroppo, async/await è una delle API che zone.js non riesce a patchare, costringendoci a convertirlo in promises tramite l'Angular CLI. Questo non è ottimale perché tutti i browser moderni supportano async/await, che sono più espressivi e ottimizzati dal runtime JavaScript.

Ora, se create un'app che utilizza il rilevamento dei cambiamenti senza zone, l'Angular CLI utilizzerà direttamente async/await nativi, migliorando il debug e rendendo i vostri bundle più piccoli, inoltre il supporto senza zone è ora stato implementato nell'Angular CDK e in Angular Material.

E questo è tutto per oggi! Fatemi sapere cosa ne pensate di queste novità introdotte e buon coding a tutti!