Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > Angular

Introduzione alle novità di Angular 5

di Stefano MostardaStefano Mostarda, in Angular,

Angular 5 è la nuova versione del framework targato Google per costruire applicazioni web interamente basate su HTML, CSS e JavaScript. Angular 5 è la terza versione da quando il framework è stato interamente riscritto. é stata infatti pubblicata la versione 2 e successivamente la versione 4. La versione 3 è stata saltata per motivi legati al versioning del componente Router. Angular 5 non introduce novità importanti nel modo di sviluppare applicazioni, ma punta al consolidamento delle funzionalità e alle ottimizzazioni delle performance sotto diversi aspetti (dimensioni del codice compilato, velocità di compilazione, miglior utilizzo del DOM).

In questo articolo vedremo quali sono le novità più importanti introdotte dalla versione 5 e come queste possano migliorare le nostre applicazioni Angular.

Ottimizzazione al sistema di compilazione

Come detto in precedenza, uno degli scopi principali di Angular5 è l'ottimizzazione dell'intero sistema. Questa ottimizzazione passa attraverso piccoli miglioramenti fatti in più punti. Il primo punto dove è stato migliorato Angular5 è nella generazione del codice. Il nuovo sistema di build infatti esegue tre operazioni che riducono notevolmente il codice generato (noto anche come build): l'eliminazione dei decorator Angular, la marcatura di funzioni come pure e la possibilità di eliminare spazi inutili.

I decorator nativi di Angular sono utilizzati esclusivamente in fase di compilazione. Il compilatore successivamente genera il codice necessario per eseguire l'applicazione senza bisogno dei decorator. L'ovvia conseguenza è che i decorator non sono più necessari a run time e possono quindi essere eliminati dalla build. Quando si ha un'applicazione molto grande che fa pesante uso dei decorators, le dimensioni della build si possono ridurre notevolmente ottenendo così un incremento dell performance.

L'operazione di marcamento delle funzioni come pure permette al compilatore di ottimizzare l'operazione di tree shaking. Il tree shaking è quella fase del compilatore che elimina dalla build il codice non necessario perchè mai invocato dall'applicazione. Per capire la potenza di questo metodo facciamo un semplice esempio: supponiamo di utilizzare nella nostra applicazione una qualunque classe di Angular che espone dieci metodi. Se noi utilizziamo solo un metodo, gli altri nove sono inutili. Il three shaking è in grado di capire quali siano i metodi non utilizzati e di eliminarli dalla build. Se il compilatore può marcare le funzioni come pure (le funzioni sono pure quando a fronte dello stesso input producono sempre lo stesso output senza essere influenzate da valori di contesto come data, ora, e così via), il tree shaking può diventare più aggressivo ed eliminare ancora più codice dalla build rispetto al passato.

L'ottimizzazione che riguarda gli spazi inutili è una funzionalità opzionale che possiamo abilitare nel compilatore. Fino alla versione 4, in fase di compilazione dei template HTML Angular ha sempre mantenuto gli spazi esattamente come scritti. Adesso si può istruire il compilatore Angular per eliminare gli spazi inutili a livello di singolo tag HTML, a livello di singolo template HTML o a livello di applicazione. Prendiamo come esempio il seguente codice HTML.

<div>
  <button>test</button>   <span>test</span>
  
  <span>test2</span>
</div>

Questo frammento di HTML può essere facilmente ridotto eliminando tutti gli spazi vuoti riducendolo come segue.

<div><button>test</button><span>test</span><span>test2</span></div>

Sebbene il risparmio di caratteri non sia enorme, in un'applicazione con molti template le dimensioni della build si riducono e questo permette alla nostra applicazione di essere scaricata più velocemente e quindi essere eseguita più velocemente. Attualmente questa funzionalità deve essere abilitata, ma in futuro verrà abilitata di default.

Per abilitare l'eliminazione degli spazi per tutta l'applicazione, dobbiamo modificare il file tsconfig.json aggiungendo la proprietà angularCompilerOtions.preserveWhiteSpaces a false.

{
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

Se invece vogliamo abilitare l'eliminazione degli spazi a livello di singolo template, dobbiamo impostare la proprietà preserveWhiteSpace nel decorator. 

@Component({
  templateUrl: 'mycomponent.html',
  preserveWhitespaces: false
}
export class MyComponent {}

Se vogliamo abilitare l'eliminazione degli spazi a livello di singolo tag, possiamo utilizzare la direttiva ngPreserveWhitespaces nel tag contenitore.

<div ngPreserveWhitespaces>
  <button>test</button>   <span>test</span>
  
  <span>test2</span>
</div>

Infine, se abilitiamo l'eliminazione degli spazi, ma vogliamo preservarli in alcuni punti, possiamo usare &ngsp; che identifica uno spazio che non deve essere rimosso.

<!--prima compilazione-->
<span>link1</span>&ngsp;<span>link2</span>
<!--dopo compilazione-->
<span>link1</span> <span>link2</span>

Un'altra ottimizzazione del sistema di compilazione consiste nell'aver integrato il compilatore Angular all'interno della pipeline del compilatore TypeScript tramite transform. Fino alla versione 4, il compilatore Angular era un componente che girava dopo il compilatore TypeScript. Questo doppio passaggio allungava notevolmente i tempi di compilazione in quanto il codice doveva essere interpretato due volte. Questa lentezza si riscontra soprattutto quando si fa una modifica e si ricompila il codice. Nella versione 5, grazie all'integrazione, i tempi di ricompilazione si riducono drasticamente tanto che il team di Angular ha dichiarato che i tempi di ricompilazione dell'intero framework sono passati da 40 secondi a due secondi. Questa ottimizzazione si abilita utilizzando il flag --aot nel comando di build o nel comando di lancio del webserver.

ng serve --aot

Sebbene la compilazione AOT (Ahead Of Time) non sia abilitata di default, è bene tenere a mente che lo sarà nelle prossime versioni di angular-cli quindi potremo beneficiare delle ottimizzazioni del compilatore anche senza usare il flag --aot.

Sebbene queste novità abbiano poco a che fare con la scrittura del codice, sono quelle che rendono Angular 5 la versione più robusta del framework e sono quelle che gettano le basi per ulteriori ottimizzazioni che verranno fatte nelle prossime versioni. Tuttavia Angular 5 contiene anche novità dal punto di vista dello sviluppo di cui parleremo nella prossima sezione a cominciare dalle nuove pipe che sfruttano la globalizzazione.

2 pagine in totale: 1 2
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2024 - Milano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

I più letti di oggi

In evidenza

Misc