Angular 18: tutte le novità

Angular 18, ultima release del framework open source basato su JavaScript e TypeScript, è il risultato di un lavoro di merging con Wiz, soluzione utilizzata internamente in Google e soprattutto in progetti legati alla Cloud Platform di Mountain View. Molte delle novità ora disponibili nella versione stabile erano state introdotte in fase di anteprima con i rilasci precedenti, come per esempio le deferable views. Ma troviamo anche una nuova API per il sistema di design Material 3.

Angular 18 e deferable views

Le deferable views sono probabilmente la funzionalità più interessante di questo aggiornamento. I blocchi ad esse associate vengono contrassegnati da @defer. Il loro scopo è invece quello di ottimizzare le performance in fase di caricamento. Esse infatti vengono caricate dopo la fase iniziale di restituzione della pagina e quindi non pesano su quest'ultima.

🔥 Angular v18 is now available

Excited to share the next milestone in the evolution of Angular:
‣ Experimental zoneless
‣ New home for developers on https://t.co/8DxJPZaTd5
‣ Material 3, deferrable views, built-in control flow are now stable
‣ More!https://t.co/6tLMou1meZ pic.twitter.com/oz8Im3xA19

— Angular (@angular) May 22, 2024

@placeholder e @loading sono poi dei blocchi facoltativi con cui mostrare dati intermedi. Questo significa, ad esempio, che quando si ha del contenuto lento da caricare è possibile inserirne un altro da visualizzare immediatamente. Si tratta quindi di una sorta di placeholder che consente di mostrare agli utenti un indicatore di caricamento per informarli che il contenuto principale è prossimo ad essere disponibile.

Event dispatch

Il contributo di Wiz risulta evidente grazie alla funzionalità event dispatch, o "distribuzione di eventi", in anteprima per gli sviluppatori. In sostanza, essi entrano in gioco quando una pagina viene caricata e presenta degli elementi interattivi con l'UI visualizzata prima di un'associazione dei gestori di eventi.

Si pensi per esempio al caso delle pagine con pulsanti. La distribuzione degli eventi intercetta i clic in modo che vengano registrati e riprodotti dopo il caricamento. Questo impedisce che le interazioni degli utenti vadano perdute.

Hydration

Angular 18 abbiamo il supporto completo per l'hydration da parte dei componenti Material 3. Non si tratta di una novità completa in quanto alcuni componenti offrivano già questa feature. Grazie ad essa una pagina web, inizialmente resa come HTML statico, viene attivata da JavaScript sul client. In questo modo gli elementi statici del DOM diventano interattivi.

Controllo di flusso in Angular 18

Ultimo ma non ultimo in ordine di importanza, Il controllo del flusso permette di mostrare, nascondere o riproporre degli elementi in modo condizionale con @if, @for e @switch. Con esso vengono rimpiazzate le direttive di ngIf, ngFor e ngSwitch di Angular.