(articolo redatto da Alessandro Salvati)
Angular è un web framework basato su TypeScript ampiamente utilizzato per lo sviluppo Web. Nel novembre 2021 è stata rilasciata la nuova versione di Angular, la numero 13. Presentiamo di seguito le principali features introdotte e le funzionalità deprecate.
Modifiche al formato APF (Angular Package Format)
Il View Engine è stato sostituito con Ivy, permettendo una compilazione più veloce, poiché alcuni metadati e i file essenziali per il View Engine non sono più inclusi.
È stato introdotto il supporto a JS ES2020 e a TypeScript 4.4. Inoltre RxJS 7.4 è ora l’impostazione predefinita.
Le librerie nell’ultima versione di APF non usano più ngcc, quindi il compilatore risulterà più snello e performante.
Un ulteriore modifica fatta all’APF è l’aggiunta al supporto NPE (Node Package Exports).
Quest’ultima modifica aiuterà gli sviluppatori a non fare inavvertitamente affidamento su API interne che potrebbero cambiare.
Aggiornamenti dell’API dei componenti
Ivy inoltre ha semplificato, per gli sviluppatori, la creazione dinamica di componenti.
Prima della versione 13 la creazione dinamica dei componenti richiedeva molto codice inutile.
La nuova API elimina la necessità di iniettare il componente nel costruttore.
Prima
Dopo
Fine del supporto a IE11
Sono stati rimossi i percorsi di codice specifici per IE e questo ha permesso di
- rendere le app ancora più snelle e all’avanguardia
- introdurre delle animazioni Web tramite Api Web Native e l’uso di variabili nel CSS.
Gli sviluppatori che devono creare applicazioni compatibili con IE11 possono continuare ad utilizzare la versione 12, che sarà supportata fino a novembre 2022.
Aggiunta della RFC (Persistent build cache)
Con la nuova versione è possibile utilizzare una funzionalità di caching del compilatore, così da poter velocizzare la compilazione fino al 68%.
Per utilizzarlo basta aggiungere in angular.json:
Nuovo tipo di Form
Introdotto FormControlStatus che accumula tutte le stringe di stato dei form di controllo.
Per esempio:
- Il tipo AbstractControl.status contiene il tipo FormControlStatus al posto del tipo string;
- Il tipo di StatusChanges ora è Observable<FormControlStatus> al posto di Observable<any>.
Adobe Fonts
Introdotto il supporto inline dei font Adobe. Questi font permettono di accelerare l’FCP (First Contentful Paint) di un’app.
Miglioramenti sul testing
ATP (Angular TestBed) è ora abilitato di default, introdotto nella versione 12. Con esso è possibile creare più velocemente ambienti di testing, più ottimizzati e meno impegnativi in termini di memoria. In precedenza lo Unit Testing avveniva con Jasmine e Karma.
Un esempio di configurazione dei test per l’intera suite:
Oppure per modulo:
Angular Material
Sono stati rivisitati tutti i componenti grafici di MDC (Material Design Components) con dimensioni tattili maggiori, colori e effetti grafici che permettono una UX (User Experience) più intuitiva, migliorando l’accessibilità (A11y).
Localization
$localize è usato per implementare in modo efficace l‘internazionalizzazione integrata (i18n), introdotto con la versione 9 di Angular è attualmente in continuo aggiornamento.
Conclusioni
Le possibilità offerte da Angular 13 coinvolgono diversi aspetti del framework e dei Component, rendendo più funzionale e ricco il framework di sviluppo web.
Se vuoi approfondire la tua conoscenza su Angular ti consigliamo i seguenti riferimenti con approfondimenti e documetazione:
Angular – Introduction to the Angular Docs
Angular – Angular Package Format
Angular – Persistent disk cache
Angular Test Bed • Angular (codecraft.tv)
Angular 13 – Everything About Latest Features and Core Updates (mindinventory.com)
Se anche tu vuoi occuparti di progetti di ricerca e sviluppo IT di ultima generazione
dai un’occhiata alle nostre opportunità di lavoro e conosciamoci subito!
