Le novità di Angular 19

Le novità di Angular 19

Il 19 novembre 2024, Angular ha rilasciato la prossima versione ufficiale di Angular 19. Ogni anno, Angular lavora e tira fuori alcune delle migliori esperienze di sviluppo e funzionalità innovative per creare applicazioni web efficienti. Questa è una versione stabile con solo una manciata di funzionalità sperimentali. Angular nel suo annuncio ufficiale ha menzionato, “Vedere la risposta positiva della comunità e il maggiore coinvolgimento nei nostri eventi per sviluppatori convalida il fatto che ci stiamo muovendo nella giusta direzione.”

Il rilascio de Le novità di Angular 19 mira a miglioramenti importanti e alla distribuzione rapida delle applicazioni Angular. Si sono anche concentrati sui miglioramenti delle prestazioni e sulla produttività degli sviluppatori. Questa versione ha anche alcune delle funzionalità più richieste dagli sviluppatori per facilitare un’integrazione più fluida e un flusso di lavoro di sviluppo.

Analizziamo nel dettaglio le Le novità di Angular 19.

Costruito per la velocità – Le novità di Angular 19
Angular si sta ora concentrando sui casi d’uso sensibili alle prestazioni degli utenti e sta incorporando le migliori pratiche di prestazioni out-of-the-box. Introduce l’idratazione incrementale per SSR, consentendo caricamenti di pagina iniziali più rapidi e interazioni più fluide. Nella versione 19, stanno migliorando il rendering lato server di Angular al livello successivo con idratazione incrementale, configurazione del percorso del server, riproduzione degli eventi abilitata per impostazione predefinita e altro ancora.

In precedenza, con lo sviluppo di grandi app Angular aumentava significativamente il codice JavaScript inviato agli utenti, il che a sua volta ostacolava l’esperienza utente. Le viste differibili, in precedenza per il rendering lato client, sono ora adattate per il rendering lato server, ottimizzando ulteriormente le prestazioni ritardando il caricamento di codice JavaScript non critico. Queste funzionalità, insieme alla configurazione del percorso del server e alla riproduzione degli eventi, mirano a fornire applicazioni Web moderne ad alte prestazioni.

Quali sono Le novità di Angular 19?
Nella versione ora disponibile, c’è una pletora di buoni aggiornamenti e nuove funzionalità per garantire i core web vitals e meno dipendenze. Ecco l’elenco delle funzionalità e Le novità di Angular 19:

1. Incremental hydration
2. Modalità di rendering a livello di percorso
3. Linked signals
4. Ripetizione dell’evento
5. Modernizzazione del codice con Language Service
6. Hot module replacement
7. Standalone defaults
8. Stato di Zoneless
9. Stato degli strumenti di prova
10. Sicurezza con Google
11. Risorsa
12. Time picker component
13. Drag and drop bidimensionale

Incremental hydration

L’incremental hydration in Angular 19 consente agli sviluppatori di chiarire parti del loro template. Ciò viene eseguito con la familiare sintassi @defer, istruendo Angular a caricare in modo differito e idratarli su trigger specifici. Hanno presentato una demo per mostrare l’idratazione incrementale in azione. Ci sono tre effetti visivi da chiarire:

• Un componente nel filtro in scala di grigi indica che Angular deve ancora essere caricato e idratato
• Angular scarica un componente dalla rete quando il componente inizia a pulsare
• Angular ha scaricato e idratato il componente quando c’è un bordo viola attorno ad esso e il componente non ha più un filtro in scala di grigi

Inoltre, l’app demo ha un ritardo di 500 ms per ogni operazione di caricamento, così puoi esplorarla con facilità. Con l’idratazione incrementale, gli sviluppatori possono ritardare strategicamente il caricamento di funzionalità specifiche finché interazioni dell’utente come il passaggio del mouse o il clic non le attivano attivamente.

Questa tecnica ottimizza i tempi di caricamento iniziale della pagina riducendo al minimo il payload JavaScript iniziale, garantendo una prima impressione notevolmente più rapida e un’esperienza utente complessivamente più fluida.

Quando esegui l’aggiornamento ad Angular v19, puoi provare la nuova idratazione incrementale e il rendering lato server insieme all’idratazione completa dell’applicazione. Nel bootstrap del tuo client, menziona:

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
// ...
provideClientHydration(withIncrementalHydration());

Route-level render mode
In precedenza, nelle versioni più vecchie, quando facilitavi il rendering lato server nella tua applicazione, Angular eseguiva di default il rendering di tutte le route parametrizzate nella tua app e prerenderizzava tutte le route senza parametri. Tuttavia, nell’ultima versione 19, viene introdotto uno strumento chiamato ServerRoute che ti consente di avere un controllo più granulare su come vengono renderizzate le singole route nella tua applicazione Angular.

Questa interfaccia consente di ottimizzare il comportamento di rendering per ogni percorso, specificando se deve essere gestito sul lato server, pre-renderizzato sul server o renderizzato sul lato client.

Definizione delle modalità di rendering

Ecco un esempio utile che dimostra come utilizzare l’array serverRouteConfig per impostare la modalità di rendering per vari percorsi:

TypeScript
export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', mode: 'server' },  // Render login route on the server for optimal security
  { path: '/dashboard', mode: 'client' }, // Render dashboard route on the client for a more dynamic experience
  { path: '/**', mode: 'prerender' }, // Prerender all other routes for initial load speed
];

In questo caso, Angular gestisce il rendering del percorso di login sul server per una maggiore sicurezza. Il percorso della dashboard, d’altro canto, verrà renderizzato sul lato client per fornire un’esperienza utente più interattiva e dinamica. Infine, prerenderizzano tutti gli altri percorsi per aumentare la velocità di caricamento iniziale della tua applicazione.

Prerendering con parametri di percorso (route parameters)

Cerchiamo di capire come effettuare il pre-rendering dei percorsi con parametri dinamici utilizzando il metodo getPrerenderPaths:

Segnali collegati
Angular introduce una nuova primitiva, linkedSignal, per affrontare un caso d’uso comune nello sviluppo di UI: la gestione di uno stato mutabile che dipende da uno stato di livello superiore. Questa nuova funzionalità offre un modo più conciso e intuitivo per gestire scenari come le UI di selezione, in cui la selezione corrente cambia quando l’utente interagisce, ma deve anche essere reimpostata quando l’elenco delle opzioni si aggiorna.

TypeScript
export const serverRouteConfig: ServerRoute = [
  {
    path: '/product/:id',
    mode: 'prerender',
    async getPrerenderPaths() {
      const productService = inject(ProductService);
      const productIds = await productService.getProductIds(); // Retrieve product IDs (e.g., ["1", "2", "3"])
      return productIds.map(id => ({ id })); // Generate URLs for each product (e.g., ["/product/1", "/product/2", "/product/3"])
    },
  },
];

Linked Signal

Angular introduce una nuova primitiva, linkedSignal, per affrontare un caso d’uso comune nello sviluppo di UI: la gestione di uno stato mutabile che dipende da uno stato di livello superiore. Questa nuova funzionalità offre un modo più conciso e intuitivo per gestire scenari come le UI di selezione, in cui la selezione corrente cambia quando l’utente interagisce, ma deve anche essere reimpostata quando l’elenco delle opzioni si aggiorna.

Come funziona Linked Signal:

Creazione di un Linked Signal: un linked signal viene creato fornendo una funzione di valore iniziale. Questa funzione viene eseguita ogni volta che cambia il segnale da cui dipende.

TypeScript
const options = signal(['apple', 'banana', 'fig']);
const choice = linkedSignal(() => options()[0]);

Impostazione del valore: il valore di un linkedSignal può essere impostato direttamente, in modo simile a un segnale normale.

TypeScript
choice.set('fig');

Aggiornamento delle dipendenze: quando il segnale dipendente (opzioni) cambia, il valore di linkedSignal viene rivalutato utilizzando la funzione del valore iniziale.

TypeScript
options.set(['peach', 'kiwi']);

Questa funzionalità offre un approccio conciso e intuitivo alla gestione degli stati mutabili che dipendono da stati di livello superiore, semplificando la gestione degli stati ed eliminando la necessità di soluzioni complesse basate sugli effetti.

Esprime chiaramente le relazioni tra i segnali, rendendo il codice più leggibile e gestibile, e la sua API avanzata offre flessibilità per scenari sofisticati, come il mantenimento delle scelte dell’utente durante gli aggiornamenti dell’elenco delle opzioni.

Ripetizione dell’evento (event replay)
Una sfida comune nelle applicazioni renderizzate lato server in vari framework è il ritardo tra un’interazione utente e l’esecuzione da parte del browser del codice necessario per elaborare tale interazione. Questo problema, spesso definito gap di idratazione, può portare a un ritardo evidente nei tempi di risposta.

Per risolvere questo problema, Angular sfrutta la libreria di distribuzione degli eventi, una soluzione solida sviluppata dal team di Google Search e testata sul campo da miliardi di utenti per oltre un decennio. Questa libreria cattura efficacemente gli eventi utente durante il caricamento iniziale della pagina e li riproduce senza problemi una volta che il codice necessario è disponibile.

Abilitare la event replay in Angular è semplice:

TypeScript
bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

È possibile ridurre significativamente il divario di idratazione e offrire un’esperienza utente più reattiva incorporando questa configurazione nella propria applicazione Angular.

Modernizzazione del codice con Language Service
Angular 19 introduce un’integrazione fluida tra gli schematici e il servizio linguistico per semplificare il processo di aggiornamento del codice. Aggiornando sia il servizio linguistico che il progetto alla versione 19, è possibile aggiornare direttamente gli input, le query e altre funzionalità del linguaggio all’interno dell’editor di codice. Ciò semplifica il processo di migrazione e garantisce una transizione fluida alle API più recenti.

Hot Module Replacement
Angular v19 introduce un miglioramento significativo abilitando la sostituzione hot module (HMR) sia per gli stili che per i template. Questa funzionalità semplifica il flusso di lavoro di sviluppo, eliminando la necessità di aggiornamenti di pagina completa dopo le modifiche di stile o template.

In precedenza, qualsiasi modifica allo stile o al template di un componente avrebbe innescato una ricostruzione completa dell’applicazione, seguita da un aggiornamento del browser. Questo processo poteva richiedere molto tempo, specialmente per progetti più grandi.

Con HMR, Angular ora compila in modo efficiente lo stile o il template modificato e applica patch senza soluzione di continuità all’applicazione in esecuzione, preservando lo stato corrente. Ciò si traduce in cicli di sviluppo più rapidi e un’esperienza utente ininterrotta.

Standalone defaults
Angular 19 ha reso i componenti standalone predefiniti. Ciò significa che quando si crea un nuovo componente, questo verrà automaticamente dichiarato come standalone, a meno che non venga specificato diversamente in modo esplicito. Ciò semplifica la creazione di componenti e riduce il codice boilerplate.

Stato di Zoneless
Il rilevamento delle modifiche senza zone è una caratteristica significativa di Angular 19 che mira a migliorare le prestazioni e ridurre la complessità. Elimina la necessità di zone, che in precedenza venivano utilizzate per attivare il rilevamento delle modifiche. Sebbene Zoneless sia ancora in fase di sviluppo e non ancora completamente integrato, promette di migliorare le prestazioni delle applicazioni e l’esperienza degli sviluppatori.

Stato degli strumenti di testing
Angular 19 continua a migliorare i suoi strumenti di test, tra cui l’integrazione di Jest e prestazioni migliorate del test runner. Il test rimane un aspetto cruciale dello sviluppo di Angular e il framework fornisce strumenti robusti per garantire la qualità e l’affidabilità del codice.

Sicurezza con Google
Angular trae vantaggio dalle solide pratiche di sicurezza di Google e dall’impegno verso lo sviluppo open source. Il framework viene sottoposto a regolari audit di sicurezza e aggiornamenti per risolvere tempestivamente le vulnerabilità. È essenziale mantenere i progetti Angular aggiornati con le ultime patch di sicurezza.

Risorse
La Resource API è una nuova funzionalità di Angular 19 che fornisce un modo dichiarativo per gestire il recupero e la memorizzazione nella cache dei dati. Semplifica il recupero e la gestione asincroni dei dati e riduce il codice boilerplate per le operazioni sui dati comuni.

@Component(...)
export class UserProfile {
  userId = input<number>();
  userService = inject(UserService);
  user = resource({
    request: user,
    loader: async ({request: id}) => await userService.getUser(id),
  });
}

Time Picker Component
Angular Material fornisce un componente TimePicker integrato che consente agli utenti di selezionare un orario specifico. È la funzionalità più richiesta e offre opzioni di personalizzazione per formati di orario, convalida e accessibilità. Puoi facilmente integrarlo nelle tue applicazioni Angular per fornire un’esperienza di selezione dell’orario intuitiva.

Drag and Drop bidimensionale
Angular CDK (Component Development Kit) offre una potente funzionalità drag-and-drop, incluso il supporto per il drag-and-drop bidimensionale. Puoi creare interfacce drag-and-drop flessibili e interattive per vari casi d’uso, come la riorganizzazione di elementi in una griglia o il trasferimento di elementi tra diversi contenitori.

Come puoi utilizzare questa funzionalità del CDK:

<div
  cdkDropList
  cdkDropListOrientation="mixed" <!-- specify mixed orientation -->
  ...>
  @for (item of mixedTodo; track item) {
    <div cdkDrag>
      {{item}}
      <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
    </div>
  }
</div>

Innovazione con Angular 19
Angular non lascia mai nulla di intentato quando si tratta di creare esperienze interattive nelle tue app Angular. Ogni anno accettano feedback e richieste dalla comunità degli sviluppatori per assicurarsi che con ogni versione rilasciata, gli sviluppatori raggiungano l’efficienza e le loro applicazioni soddisfino la soddisfazione del cliente.

Con Angular 19, sono state lanciate funzionalità significative e sono stati apportati miglioramenti come la sostituzione hot module, il componente time picker e i valori predefiniti standalone. C’è un supporto sperimentale dalla community degli sviluppatori e l’elenco delle nuove funzionalità di Angular 19 porterà innovazione ed efficienza agli utenti.

(fonte)

Innovaformazione, scuola informatica specialistica segue costantemente il settore IT e propone formazione per aziende informatiche e sviluppatori. Nella nostra offerta formativa trovate il Corso Angular sempre aggiornato all’ultima vesione al momento dell’attivazione.

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)