Arriva Angular 18

Arriva Angular 18

I punti salienti di arriva Angular 18 includono:

• Supporto sperimentale per il rilevamento delle modifiche senza zona
• Angular.dev è ora la nuova casa per gli sviluppatori Angular
• Il Material 3, le viste differibili e il flusso di controllo integrato sono ora stabili e incorporano una serie di miglioramenti
• Miglioramenti del rendering lato server, come il supporto dell’idratazione i18n, un debug migliore, il supporto dell’idratazione in Angular Material e la riproduzione degli eventi basata sulla stessa libreria di Google Search .

Rilevamento dei cambiamenti in evoluzione
Storicamente, una libreria chiamata zone.js è stata responsabile dell’attivazione del rilevamento delle modifiche di Angular. Questa libreria ha portato con sé una serie di svantaggi in termini di esperienza degli sviluppatori e prestazioni. Stiamo lavorando da diversi anni per trovare un modo di usare Angular che non si basi su zone.js e siamo incredibilmente entusiasti di condividere le prime API sperimentali per zoneless!

Si può provare il supporto sperimentale zoneless in Angular adesso! Aggiungengo provideExperimentalZonelessChangeDetection al bootstrap della propria applicazione:

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

Dopo aver aggiunto il provider, rimuovere zone.js dai propri polyfill in angular.json.

Andando avanti, Zoneless apre molte porte agli sviluppatori:

• Migliorare la componibilità per i micro-frontend e l’interoperabilità con altri framework
• Rendering iniziale e runtime più rapidi
• Bundle di dimensioni più piccole e caricamento delle pagine più rapido
• Stack trace più leggibili
• Debug più semplice

Il modo migliore per utilizzare zoneless nei tuoi componenti è con i segnals:

@Component ({
…
template : <h1>Ciao da {{ name() }}!</h1> <button (click)="handleClick()">Vai Zoneless</button> ,
})
export class App {
protected name = signal ( 'Angular' );

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

Nell’esempio sopra, cliccando sul pulsante si richiama il handleClick metodo, che aggiorna il valore del segnale e aggiorna l’interfaccia utente. Funziona in modo simile a un’applicazione che usa zone.js, con poche differenze. Con zone.js, Angular eseguiva il rilevamento delle modifiche ogni volta che lo stato dell’applicazione poteva cambiare. Senza zone, Angular limita questo controllo a un numero inferiore di trigger, come gli aggiornamenti del segnale. Questa modifica include anche un nuovo scheduler con coalescing per evitare di controllare le modifiche più volte consecutivamente.

Quando l’utente clicca sul pulsante qui sopra, ad esempio, Angular eseguirà il rilevamento delle modifiche solo una volta grazie alla coalescenza dello scheduler. S

Aggiornamento a zoneless
Angular ha attraversato un’evoluzione entusiasmante ultimamente e zoneless ne è una parte fondamentale. Mentre sviluppiamo il framework, Angular si assicura che tutte le API esistenti continuino a funzionare come previsto e che ci sia una buona storia di interoperabilità con tutto ciò che di nuovo introduciamo in Angular.

Zoneless è un altro esempio del nostro approccio all’interoperabilità. Oltre a ciò, vediamo che spostare le applicazioni esistenti su zoneless fosse il più semplice possibile. Se i nostri componenti sono compatibili con AngularChangeDetectionStrategy.OnPush strategia di rilevamento delle modifiche, dovrebbero essere per lo più compatibili anche con zoneless, il che renderà la loro transizione senza problemi.

Coalescenza by default
A partire da arriva Angular 18, possiamo utilizzare lo stesso scheduler per le app zoneless e le app che utilizzano zone.js con coalescing abilitato. Per ridurre il numero di cicli di rilevamento delle modifiche nelle nuove app zone.js, viene anche abilitato il coalescing delle zone per impostazione predefinita.

Questo comportamento è abilitato solo per le nuove applicazioni perché può causare bug nelle app che dipendono dal precedente comportamento di rilevamento delle modifiche. La coalescenza riduce i cicli di rilevamento delle modifiche non necessari e migliora significativamente le prestazioni per alcune applicazioni.

Per attivare la coalescenza degli eventi per i progetti esistenti, va configurato il nostro NgZone provider in bootstrapApplication bootstrapApplication:

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

Attesa nativa per app zoneless
Zone.js intercetta molte chiamate del browser per collegare il rilevamento delle modifiche di Angular. Sfortunatamente, async/await è una delle API che zone.js non può gestire con patch e quindi dobbiamo declassarla a promises tramite Angular CLI. Ciò non è ottimale perché tutti i browser moderni supportano async/await che sono più espressivi di promises e ottimizzati dal runtime JavaScript.

Arriva Angular 18 e con questa versione se creiamo un’app che usa il rilevamento sperimentale delle modifiche senza zone, Angular CLI userà l’async/await nativo senza ridurlo a promise. Ciò migliorerà il debug e renderà i tuoi bundle più piccoli.

I componenti supportano zoneless
Abbiamo abilitato il supporto zoneless in Angular CDK e Angular Material. Questo ci ha anche aiutato a scoprire e rifinire alcuni degli spigoli del modello zoneless.

Nuova casa per gli sviluppatori Angular
Negli ultimi mesi è stata migliorato angular.dev per offrire un percorso di avvio pratico e intuitivo e guide approfondite. Oggi con l’arriva Angular 18, vediamo che angular.dev diventa il sito web ufficiale della documentazione per Angular.

Tutte le richieste ad angular.io ora vengono automaticamente reindirizzate ad angular.dev. Per assicurarci che tutti i link esistenti continuino a funzionare, si stanno inoltrando gli sviluppatori a v17.angular.io .

Il Material 3 è ora stabile
Qualche mese è stato introdotto il supporto sperimentale per Material 3. Dopo aver ascoltato il feedback degli sviluppatori e aver rifinito i componenti Material 3, adesso sono stati resii stabili.

Parallelamente è stato aggiornato material.angular.io con i nuovi temi e la nuova documentazione di Material 3.

API di Signal in anteprima per sviluppatori
Nelle versioni 17.1 e 17.2 di Angular sono stati annunciati i nuovi input di segnale, le query basate sui segnali e una nuova sintassi di output.

Le visualizzazioni differibili sono ora stabili
Negli ultimi sei mesi, si è riscontrato molto entusiasmo per le viste differibili e per come consentono agli sviluppatori di migliorare senza sforzo i Core Web Vitals delle loro app. Ad esempio, Bill.com ha condiviso che utilizzando @deferhanno ridotto le dimensioni del bundle di una delle loro app del 50%. Oggi, le viste differibili sono stabili. Si possono utilizzare nelle proprie applicazioni e librerie .

Il flusso di controllo integrato è ora stabile
Insieme alle viste differibili, nella v17 viene annunciato il nuovo flusso di controllo integrato con prestazioni migliorate. Troviamo un’adozione significativa di questa nuova sintassi e, dopo aver affrontato il feedback della community, adesso Angular annunciare questa API come stabile.

Durante l’anteprima, viene ulteriormente migliorato il controllo del tipo del flusso di controllo, abilitato un alias implicito delle variabili più ergonomico e impostato delle protezioni per determinati anti-pattern correlati alle prestazioni.

Miglioramenti nel rendering lato server
Circa un anno è stato introdotto l’idratazione e vieneportata a stabile nella versione 17. Sulla base del dataset HTTPArchive pubblico, il 76% delle app Angular v17 che utilizzano il prerendering o il rendering lato server utilizzano già l’idratazione.

C’era un ostacolo principale per far sì che ancora più persone sfruttassero l’idratazione: la mancanza di supporto i18n. Dopo aver collaborato con il team di Chrome Aurora , con l’arrivo Angular 18 si annuncia che l’idratazione per i blocchi i18n è disponibile in modalità anteprima per sviluppatori nella v18.

Ripetizione dell’evento
Alcuni mesi fa, vieneannunciato il progetto in corso a lungo termine che mira a far convergere Angular e il framework interno di Google Wiz. Come promemoria, Angular e Wiz hanno servito due diversi segmenti di app in passato: Wiz è stato utilizzato principalmente per app incentrate sui consumatori, iper focalizzate sulle prestazioni e Angular è stato focalizzato sulla produttività e l’esperienza degli sviluppatori.

Come risultato degli sforzi di convergenza, Wiz ha integrato profondamente Angular Signals nel suo modello di rendering. A ng-conf abbiamo condiviso come YouTube ora utilizza Angular Signals . Allo stesso modo, Angular ora sta introducendo sempre più funzionalità incentrate sulle prestazioni come l’idratazione parziale di cui parlerò più avanti.

In entrambi i casi, utilizzeremo le vostre richieste di funzionalità e altri requisiti come motivazione per far convergere le funzionalità essenziali di entrambi i framework.

Oggi con arriva Angular 18 troviamo una delle librerie principali in esecuzione su Google.com , event dispatch (in precedenza nota come jsaction), è ora nel monorepo Angular . A partire dall arriva Angular 18, event dispatch alimenta l’event replay quando si utilizza il rendering ibrido.

La maggior parte degli sviluppatori non interagirà direttamente con l’event dispatch, quindi vediamo perché l’event replay è utile. Di seguito puoi trovare un mock di un semplice sito web di e-commerce. Abbiamo introdotto ritardi di caricamento artificiali per simulare una connessione di rete molto lenta. Immagina che mentre la pagina si sta caricando e non è ancora stata idratata l’utente voglia aggiungere più cuffie al carrello. Se la pagina non è ancora stata idratata e quindi non è interattiva, tutti gli eventi utente andrebbero persi. A partire dalla v18 utilizzando l’event dispatch, Angular inizierà a registrare gli eventi utente. Una volta che l’applicazione è idratata, l’event dispatch li riproduce e ci ritroviamo con sei articoli nel carrello.

La funzionalità di riproduzione dell’evento è disponibile nella arriva Angular 18 in anteprima per sviluppatori. Puoi abilitarla usando withEventReplay(), ad esempio:

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

Esperienza di debug migliorata
Con arriva Angular 18 viene aggiornato Angular DevTools per visualizzare il processo di idratazione di Angular. Accanto a ogni componente è possibile trovare un’icona che rappresenta lo stato di idratazione del componente. Per visualizzare in anteprima quali componenti Angular ha idratato sulla pagina, si può anche abilitare una modalità di sovrapposizione. Se la propria app presenta errori di idratazione, Angular DevTools li visualizzerà nell’esploratore dei componenti.

Supporto all’idratazione in CDK e Material
Nella v17 alcuni componenti Angular Material e CDK sono stati esclusi dall’idratazione, il che ha causato il loro re-rendering. A partire dalla v18, tutti i componenti e le primitive sono completamente compatibili con l’idratazione.

I piani con arriva Angular 18 per l’idratazione parziale
Viene annunciato l’idratazione parziale a ng-conf e Google I/O . È una tecnica che consente di idratare la propria app in modo incrementale dopo il rendering lato server. L’idratazione incrementale della propria applicazione consente di caricare meno JavaScript in anticipo e migliora le prestazioni della propria applicazione.

L’idratazione parziale si basa sulle stesse fondamenta delle viste differibili. Invece di eseguire il rendering del blocco @placeholder sul server come avviene oggi, potrai abilitare una modalità in cui Angular eseguirà il rendering del contenuto principale del blocco @defer sul server. Sul client, Angular scaricherà il JavaScript associato e idraterà un blocco differito solo quando vengono soddisfatte le condizioni di attivazione specificate in un modello. Ad esempio, ecco un’API ipotetica:

@defer (rendering sul server; sulla viewport) {

}

Il blocco soprastante renderizzerà il componente calendario sul server. Una volta raggiunto il client, Angular scaricherà il JavaScript corrispondente e idraterà il calendario rendendolo interattivo solo dopo che entra nella viewport.

Con arriva Angular 18 si sta prototipando l’idratazione parziale in uno stato in cui è già utilizzabile con i trigger di interattività. Il team Angular sta lavorando con i partner per valutare l’importanza dei trigger di dati, come un componente che passa proprietà di ricezione o modifica valori di binding.

Hosting affidabile per le tue app con Firebase App Hosting
Con la crescente complessità della piattaforma web, l’hosting delle applicazioni ha un ruolo critico quando si tratta di prestazioni, affidabilità, produttività e scalabilità. Le app che utilizzano il rendering ibrido hanno requisiti di hosting diversi per il rendering lato server, il prerendering e il rendering lato client. Gestire manualmente questa complessità potrebbe essere macchinoso. Firebase App Hosting ora gestisce tutto questo in modo trasparente per gli sviluppatori!

Firebase ha annunciato App Hosting al Google I/O di quest’anno. App Hosting semplifica lo sviluppo e l’implementazione di applicazioni Angular dinamiche, offrendo supporto framework integrato, integrazione GitHub e integrazione con altri prodotti Firebase come Authentication, Cloud Firestore e Vertex AI per Firebase.

Il team Angular collabora con Firebase da quasi un anno per garantire un’esperienza fluida agli sviluppatori con Angular.

Insieme alle grandi iniziative che vengono portando avanti, il team Angular dedica sempre del tempo a soddisfare le esigenze comuni degli sviluppatori. Ecco alcuni dei punti salienti dell arriva Angular 18:

Specificare un contenuto di fallback per ng-content
Uno dei problemi più votati che abbiamo avuto è stato specificare il contenuto predefinito per ng-content. Nella v18 è ora disponibile! Ecco un rapido esempio:

@Component ({
selector : 'app-profile' ,
template : `
Ciao

<ng-content>Utente sconosciuto</ng-content> 

` ,
})
export class Profilo {}

Ora possiamo utilizzare il componente:

< app-profile > < span class = "greeting" > Buongiorno

Che si tradurrà in:

< span class = "greeting" > Buongiorno
Utente sconosciuto

Eventi di modifica dello stato di controllo unificato
FormControl, FormGroupe FormArray le classi dei form Angular ora espongono una proprietà chiamata events, che consente di sottoscrivere un flusso di eventi per questo controllo form. Utilizzandola è possibile tracciare i cambiamenti nel valore, nello stato touch, nello stato incontaminato e nello stato del controllo.

Ora possiamo usare:

const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
  // process the individual events
});

Automazione della migrazione verso l’application builder
In Angular v17 è stato annunciato “application builder” come stabile e è stato abilitato di default per i nuovi progetti. Sotto il cofano usa Vite con esbuild per sostituire la precedente esperienza webpack.

Per la maggior parte delle app, gli sviluppatori sono stati in grado di aggiornare al nuovo sistema di build aggiornando il loro angular.json. Negli ultimi 6 mesi sono stati raccolti più feedback dalle persone ed è stata rifinita l’esperienza di aggiornamento per consentire a tutti di passare alla nuova esperienza di build e ricevere un boost di modifica/aggiornamento.

Poiché webpack non è sul percorso critico del nuovo sistema di build, è stata resa la dipendenza da webpack facoltativa, il che ci ha consentito di ridurre il numero totale di dipendenze per Angular CLI di oltre il 50%. Questa modifica accelererà i tempi di installazione di Angular CLI.

Reindirizzamenti del percorso come funzioni
Per consentire una maggiore flessibilità quando si gestiscono i reindirizzamenti, in Angular v18 redirectTo accetta ora una funzione che restituisce una stringa. Ad esempio, se si desidera reindirizzare a una route che dipende da uno stato di runtime, è possibile implementare una logica più complicata in una funzione:

const  routes : Routes = [ 
  { path : "first-component" , component : FirstComponent }, 
  { 
    path : "old-user-page" , 
    redirectTo : ( { queryParams } ) => { 
      const errorHandler = inject ( ErrorHandler ); 
      const userIdParam = queryParams[ 'userId' ]; 
      if (userIdParam !== undefined ) { 
        return  `/user/ ${userIdParam} ` ; 
      } else { 
        errorHandler. handleError ( new  Error ( 'Tentativo di navigazione alla pagina utente senza ID utente.' )); 
        return  `/not-found` ; 
      } 
    }, 
  }, 
  { path : "user/:userId" , component : OtherComponent }, 
];

TipoScript 5.4
Ultimo ma non meno importante aggiornamento è la dipendenza da TypeScript, consentendo di sfruttare tutte le ultime funzionalità di TypeScript 5.4 !

Riflettendo progressi arriva Angular 18
Bisogna riconoscere di Angular che è stato prodotto molto negli ultimi due anni e c’è ancora molta innovazione in arrivo. In questa sezione volevo cogliere l’occasione per guardare al presente e celebrare dove siamo.

Mentre si evolveva Angular in un framework veramente reattivo con Signals si introducevano funzionalità avanzate di rendering ibrido, ma il team Angular è sempre rimasto fedeli alla missione di consentire agli sviluppatori di fornire applicazioni web con sicurezza. Basta menzionare che YouTube, il secondo sito web più grande al mondo, usa le primitive di reattività di Angular e stanno collaborando come parte di un gruppo di lavoro più ampio per aggiungere Signals alla piattaforma web .

Angular sta inoltre lavorando a stretto contatto con gli autori di strumenti come Vite , Nx , Cypress , Puppeteer , Storybook e molti altri per migliorare l’esperienza degli sviluppatori per tutti.

(fonte)

Innovaformazione, scuola informatica specialistica promuove la cultura della formazione continua degli sviluppatori e segue costantemente i trend di mercato delle tecnologie per lo sviluppo web e software.

Se stavate cercando come apprendere al meglio l’ultima versione di Angular, consigliamo il nostro Corso Angular rivolto alle aziende.

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