Via Antonio Amato, 20/22 84131 Salerno (SA)

Angular v.13: nuove caratteristiche e funzionalità deprecate

nexsoft blog | angular 13

(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

nexsoft blog | angular 13

Dopo

nexsoft blog | angular 13

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:

nexsoft blog | angular 13

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:

nexsoft blog | angular 13

Oppure per modulo:

nexsoft blog | angular 13

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 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!

Questo sito utilizza cookies propri e si riserva di utilizzare anche cookie di terze parti per garantire la funzionalità del sito e per tenere conto delle scelte di navigazione.
Per maggiori dettagli e sapere come negare il consenso a tutti o ad alcuni cookie è possibile consultare la Cookie Policy.

USO DEI COOKIE

Se abiliti i cookie nella tabella sottostante, ci autorizzi a memorizzare i tuoi comportamenti di utilizzo sul nostro sito web. Questo ci consente di migliorare il nostro sito web e di personalizzare le pubblicità. Se non abiliti i cookie, noi utilizzeremo solo cookies di sessione per migliorare la facilità di utilizzo.

Cookie tecnicinon richiedono il consenso, perciò vengono installati automaticamente a seguito dell’accesso al Sito.

Cookie di statisticaVengono utilizzati da terze parti, anche in forma disaggregata, per la gestione di statistiche

Cookie di social networkVengono utilizzati per la condivisione di contenuti sui social network.

Cookie di profilazione pubblicitariaVengono utilizzati per erogare pubblicità basata sugli interessi manifestati attraverso la navigazione in internet.

AltriCookie di terze parti da altri servizi di terze parti che non sono cookie di statistica, social media o pubblicitari.