E’ arrivato Angular 19! Il popolare framework per il Front End sponsorizzato da Google si aggiorna e si rinnova. In questa release il team di sviluppo si è concentrato sul migliorare l’esperienza dello sviluppatore ed aumentare le performance di building e rendering delle Web Application.
Per aggiornare alla versione 19 puoi visitare il sito angular.dev che ti mette a disposizione un form da compilare indicando da quale versione migrare e ti indica cosa devi fare. Se hai bisogno di assistenza e supporto contattaci subito e senza impegno.
Durante la sua evoluzione, Angular è stato arricchito di funzionalità al fine di massimizzare le performance e stiamo parlando di componenti come l’abilitazione delle zoneless, il server-side rendering, l’hydration e l’image directive.
In questa versione, la 19, si porta la server-side rendering ad un altro livello grazie all’incremental hydration, la server route configuration e l’abilitazione di default dell’event replay.
Incremental hydration
L’incremental hydration ti permette di effettuare l’annotazione di parti del tuo template usando la sintassi @defer che istruisce Angular a caricare e “idratare” le parti annotate in base a specifici trigger. Tutto questo in maniera asincrona e server-side. Per maggiori informazioni puoi leggere la documentazione ufficiale al link https://angular.dev/guide/incremental-hydration.
Event replay by default
Un problema comune a qualsiasi framework nell’ambito del rendering server-side è il gap temporale che occorre tra l’evento utente( per es. il click su un determinato elemento) e l’effettivo download e relativa esecuzione del codice responsabile di gestire quel determinato evento.
Grazie all’event dispatch library è possibile, in maniera trasparente, catturare gli eventi esistenti durante il caricamento iniziale della pagina e rispondere agli eventi in maniera immediata appena il codice per gestire questi eventi è disponibile. In pratica mettendo insieme event replay ed incremental hydration si minimizza al massimo il gap temporale e si migliora la User Experience(UX).
Route-level render mode
Quando abiliti il server-side rendering, Angular, di default, effettua il server-side rendering di tutte le rotte parametrizzate nella tua app e, contemporaneamente effettuerà il pre-rendering di queste rotte senza parametri.
Da questa versione, hai a disposizione un’interfaccia chiamata ServerRoute che ti permette di configurare se il rendering delle rotte deve essere server-side, pre-rendering o anche client side. La funzionalità è chiamata Hybrid Rendering e puoi trovare maggiori informazioni al link https://angular.dev/guide/hybrid-rendering.
Sviluppare in maniera rapida è un obiettivo che si cerca di perseguire continuamente ed, in questa versione di Angular, puoi trovare diverse funzionalità che semplificheranno il tuo lavoro quotidiano.
Hot Module Replacement(HMR) per gli stili
HRM compilerà lo stile o il template che hai modificato, invierà il risultato al browser ed aggiornerà la tua app on-the-fly senza alcun refresh della pagina e senza perdita dello stato. Praticamente hai a disposizione un live update dell’applicazione ad ogni modifica a stili e template.
Standalone enforcement
Al fine di permettere di assicurarti di utilizzare API aggiornate e auto sufficienti nel tuo progetto, ora hai a disposizione una variabile, strictStandalone, a livello di compilazione che ti fornirà un errore quando ciò non accade.
Security by default
Grazie alla collaborazione con il security team di Google, ora hai a disposizione una funzionalità per la generazione automatica di hashed Strict Content Security Policy. Grazie a CSP, il browser assocerà un hash a qualsiasi script rendendolo di fatto unico. Questa attività previene la possibilità che un hacker inserisca link che puntano a script malevoli nella tua applicazione: tali link sarebbero non validi in quanto mancanti del necessario hash e non verrebbero eseguiti.
Già con Material 3, i componenti erano diventati maggiormente personalizzabili grazie alle Sass API dei design tokens. Ora, nella versione 19, trovano spazio ulteriori elementi che semplificano il theming e la creazione di componenti.
Component overrides
E’ possibile utilizzare la nuova API di override all’interno di Sass al fine di personalizzare lo stile di componenti specifici.
Drag-and-drop bidimensionale
Si è concretizzata la popolare richiesta su GitHub di una componente per effettuare il drag and drop in maniera bidimensionale. Per maggiori informazioni puoi visitare il link https://material.angular.io/cdk/drag-drop/overview.
Riordinamento delle tab
E’ possibile rendere le tab “draggable” grazie alla nuova funzionalità di tab reordering.
Time picker component
Ora hai disposizione un time picker direttamente in Angular Material. Una cosa semplice quanto mai utile.
Per scoprire tutti i cambiamenti apportati con la versione 19 di Angular ti invitiamo a visitare il Blog ufficiale del popolare framework.
Utilizziamo Angular dalla sua nascita, ti forniamo sviluppo di applicazioni, formazione avanzata e assistenza specialistica in modalità Time & Material, training on job e con piani di supporto tecnico per i tuoi progetti. Abbiamo integrato Angular in applicativi complessi ed in ambiti critici diventando partner tecnologico di numerosi Clienti. Le competenze avanzate ci permettono di garantirti ogni nostro progetto di sviluppo 12 mesi da qualsiasi bug. Contattaci subito e senza impegno per un preventivo gratuito.