Ultimi miglioramenti in Angular 17: tutto quello che devi sapere

Sulla base di una ricerca condotta da Statista, Angular è il framework di sviluppo web più utilizzato, sfruttato dal 17,46% degli intervistati ^[i] . Per mantenere questa posizione, migliorare le prestazioni e semplificare la codifica, il team Angular ha rilasciato la sua nuova versione: Angular 17 l'11 settembre 2023.

Il rinnovato framework Angular è guidato dalla visione di Sarah Drashner, Direttore dell'ingegneria di Google e capo del team Angular. Apporta miglioramenti incrementali, garantendo la compatibilità con le versioni precedenti e allineandosi con le ultime tendenze nei framework front-end.

Con Angular 17, aziende e sviluppatori possono immaginare un'esperienza di sviluppo migliorata. Qui, la nuova sintassi del flusso di controllo, il supporto migliorato del rendering lato server (SSR), una CLI potenziata da esbuild e altri aggiornamenti contribuiscono a un flusso di lavoro di sviluppo più fluido e dinamico.

In questo post del blog puoi decodificare i nuovi miglioramenti e aggiornamenti nel framework di sviluppo web Angular 17. Capirai anche perché gli sviluppatori dovrebbero sfruttarlo, facilitando la collaborazione, incoraggiando la riusabilità del codice e garantendo la creazione di applicazioni web scalabili e manutenibili.

Cominciamo!

Funzionalità principali e miglioramenti in Angular 17

1. Documentazione proiettata al futuro

Angular 17 introduce un miglioramento significativo alla sua documentazione con lo sviluppo di una nuova home page su angular.dev. Questa revisione include una struttura rinnovata, guide aggiornate, contenuti arricchiti e una piattaforma all'avanguardia che promuove un percorso di apprendimento interattivo per Angular e Angular Command Line Interface (CLI).

L'anteprima beta di angular.dev segna l'inizio di una nuova era, con l'intenzione di renderlo il sito Web predefinito per Angular nella versione 18. La novità incorpora WebContainers, consentendo agli utenti di sfruttare la potenza della CLI Angular direttamente all'interno di un browser Web moderno. Ciò promette inoltre un’esperienza di documentazione coinvolgente e lungimirante.

2. Flusso di controllo integrato

In Angular 17, un notevole miglioramento è l'introduzione di una nuova sintassi del blocco di controllo, che sostituisce le tradizionali direttive strutturali come *ngIf, *ngFor e *ngSwitch. Questa evoluzione offre agli sviluppatori maggiore flessibilità e migliore leggibilità nel codice del modello.

Ad esempio, i blocchi @if e @else forniscono un modo più pulito per eseguire il rendering condizionale del contenuto, utilizzando espressioni logiche. Il blocco @for semplifica l'iterazione sulle raccolte, consentendo un codice più espressivo e conciso. Inoltre, i blocchi @switch, @case e @default facilitano un flusso di controllo efficiente, migliorando la gestione di molteplici condizioni.

Per abbracciare questi miglioramenti, gli sviluppatori possono migrare i modelli esistenti utilizzando lo schema fornito. Ciò porterà a un approccio più moderno e snello allo sviluppo dei modelli in Angular 17.

3. Ciclo @for integrato

La funzionalità @for loop integrata in Angular 17 rappresenta un miglioramento significativo sia nell'esperienza degli sviluppatori che nella velocità di rendering. Questa sintassi risolve un collo di bottiglia prestazionale comune riscontrato nelle applicazioni che si basano su *ngFor imponendo l'uso di "track" per un rilevamento efficiente delle modifiche. Garantisce inoltre un processo di rendering più rapido.

A differenza del suo predecessore, la funzionalità “traccia” è incorporata perfettamente come espressione all'interno del modello, eliminando la necessità di un metodo aggiuntivo nella classe del componente. In particolare, il ciclo @for integrato fornisce anche una comoda scorciatoia per gestire raccolte con zero elementi attraverso un blocco @empty opzionale. Questa funzionalità non solo semplifica lo sviluppo ma migliora anche significativamente le prestazioni delle applicazioni Angular, segnando una pietra miliare degna di nota nell'evoluzione del framework.

4. Visualizzazioni differibili

In Angular 17, è stato introdotto un miglioramento significativo chiamato Deferrable Views in risposta alla richiesta della comunità Angular di un meccanismo intuitivo per caricare componenti, direttive e pipe.

Questa nuova funzionalità mira a rendere il processo di caricamento differito delle dipendenze più intuitivo e conveniente. Le visualizzazioni differibili consentono agli sviluppatori di caricare in modo dichiarativo parti dei modelli fino a quando non sono necessarie, ottimizzando le dimensioni del bundle iniziale e migliorando il tempo di caricamento iniziale dell'applicazione. Ciò si ottiene attraverso l'uso della nuova sintassi del flusso di controllo "@-syntax" nei modelli.

Poiché le visualizzazioni differibili forniscono soluzioni integrate e gestite per il caricamento differito, gli sviluppatori possono esprimere le proprie intenzioni senza gestire importazioni dinamiche dettagliate, osservatori di intersezione o gestori di eventi. Questa funzionalità supporta anche il precaricamento per una disponibilità più rapida delle risorse.

Inoltre, gli sviluppatori possono utilizzare trigger integrati e condizioni personalizzate per specificare quando e come dovrebbe verificarsi il caricamento differito. Inoltre, le visualizzazioni differibili riducono il codice standard, gestendo automaticamente la gestione delle dipendenze dietro le quinte.

5. Rendering lato server migliorato (SSR)

Le funzionalità di rendering lato server di Angular 17 consentono agli sviluppatori di migliorare le prestazioni delle applicazioni e l'esperienza utente. La funzionalità Hydration Boost semplifica il processo di idratazione JavaScript lato client, riducendo al minimo lo sfarfallio e garantendo una transizione più fluida alle pagine Web interattive.

Angular 17 adotta anche il formato standardizzato EcmaScript Modules (ESM) per SSR, semplificando le build e migliorando la compatibilità con gli strumenti più diffusi. Inoltre, si concentra sulla riduzione delle dimensioni dei bundle SSR attraverso tecniche di suddivisione del codice, che portano a risposte più rapide del server e a una migliore ottimizzazione dei motori di ricerca. Questi progressi posizionano Angular 17 come una scelta convincente per la creazione di applicazioni web ad alte prestazioni e SEO-friendly.

6. Segnale stabile

Angular 17 introduce uno sviluppo rivoluzionario con la stabilizzazione dei segnali, uno strumento fondamentale per gli appassionati di reattività. Perdendo l'etichetta di "anteprima per sviluppatori", Signals ora rappresenta una soluzione solida per la gestione dello stato e la facilitazione degli aggiornamenti dei componenti.

L'integrazione dei segnali con Change Detection.OnPush offre un livello di precisione. Ciò garantisce che i componenti si aggiornino solo quando cambia il loro segnale specifico, ottimizzando le prestazioni evitando re-render non necessari. Il ritiro del metodo mutato a favore degli aggiornamenti immutabili migliora ulteriormente la prevedibilità e la pulizia nel mantenimento della storia dello stato. Mentre Signals è al centro dell'attenzione, Effects, ancora in anteprima per gli sviluppatori, offre uno sguardo al futuro della gestione dello stato di Angular, presentando potenti funzionalità per le operazioni asincrone.

In sostanza, Angular 17 fornisce agli sviluppatori un set di strumenti raffinato, inclusi segnali stabili, integrazione OnPush, aggiornamenti immutabili e il potenziale in evoluzione degli effetti. Ciò in definitiva favorisce la creazione di applicazioni ben strutturate.

7. Sviluppo delle prestazioni con esbuild

L'adozione di esbuild in Angular 17 segna un passo avanti significativo nel miglioramento delle prestazioni di compilazione per i progetti Angular. Originariamente basata su Webpack, la CLI Angular è passata a sfruttare esbuild, uno strumento più recente celebrato per la sua natura user-friendly e la notevole velocità, che vanta oltre 20.000 download settimanali.

L'integrazione di esbuild è stata implementata in Angular 16 come anteprima per sviluppatori ed è ora maturata in un'implementazione stabile in Angular 17. Questa integrazione è diventata il builder predefinito per i nuovi progetti tramite Application Builder. Per i progetti esistenti, gli sviluppatori sono incoraggiati a prendere in considerazione il passaggio a esbuild aggiornando la voce del builder in angular.json.

Con questa integrazione, sia le operazioni ng serve che ng build mostrano un sostanziale aumento della velocità, sfruttando il server di sviluppo Vite per la creazione efficiente di pacchetti npm solo quando necessario. L'incorporazione da parte del team CLI di varie ottimizzazioni delle prestazioni contribuisce ulteriormente a un processo di creazione accelerato, con ng build che spesso raggiunge un miglioramento della velocità di un fattore da 2 a 4. Questa transizione sottolinea l'impegno di Angular nel fornire agli sviluppatori strumenti che non solo semplificano i flussi di lavoro, ma migliorano anche in modo significativo l'efficienza della creazione dei progetti.

8. Componenti autonomi

I "Componenti autonomi" sono una funzionalità innovativa di Angular 17 che consente la creazione e l'utilizzo di componenti senza la necessità di un modulo principale. In questo cambio di paradigma, il componente root, esemplificato da "AppComponent", è contrassegnato come autonomo utilizzando la proprietà "standalone: ​​true" nel decoratore del componente. Questo attributo indica che il componente funziona indipendentemente da un modulo genitore. Inoltre, invece di fare affidamento su un modulo, il componente utilizza l'array "imports" per inserire le dipendenze necessarie, come il modulo router.

La funzione “bootstrapApplication” viene quindi utilizzata per avviare l'applicazione, dimostrando un allontanamento dal tradizionale approccio incentrato su NgModule. La ritrovata flessibilità dei componenti autonomi facilita uno stile di sviluppo modulare e incapsulato, dimostrando l'impegno di Angular nell'evoluzione e nel miglioramento dell'architettura dei componenti.

Come migrare ad Angular 17?

Per aggiornare la tua applicazione Angular esistente alla versione 17, segui questi passaggi:

• Innanzitutto, aggiorna globalmente la tua CLI Angular alla versione 17 utilizzando il comando 'npm install -g @angular/cli@17'.

• Successivamente, aggiorna i tuoi pacchetti core Angular eseguendo 'ng update @angular/core'.

• Se utilizzi pacchetti Angular aggiuntivi, aggiornali individualmente, utilizzando codice, come 'ng update @angular/material' per Angular Material.

• Quindi, testa attentamente la tua applicazione per assicurarti che funzioni come previsto dopo gli aggiornamenti.

Alcuni suggerimenti che puoi seguire qui includono l'aggiornamento a versioni minori tra aggiornamenti principali, il backup del codice e del database prima dell'aggiornamento e il controllo della compatibilità delle librerie di terze parti. Dovresti anche consultare la documentazione di Angular e i forum della community per assistenza se si verificano problemi durante il processo di aggiornamento. Questi passaggi semplificati garantiranno una transizione graduale all’ultima versione di Angular riducendo al minimo le potenziali sfide.

Pronto a creare applicazioni robuste, ricche di funzionalità e moderne con Angular? Parla con i nostri esperti!

Riferimenti:

^[i] Statista