Che cosa fa Angular 4

È stata da poco rilasciata la versione stabile 4 di Angular ed in molti si sono chiesti se questa abbia in qualche modo introdotto problemi di compatibilità con le precedenti. L’uscita del libro Sviluppare applicazioni con Angular ha preceduto il rilascio della versione 4 di un mese; nonostante questo, lo sviluppo beta della nuova release e le versioni candidate avevano già dato una chiara idea che non si sarebbe ripetuto quanto accaduto nel passaggio dalla versione 1. È importante chiarire questo concetto per fugare i dubbi di quanti si sono chiesti se il libro trattasse Angular 2, piuttosto che Angular 4.

Ciò che è accaduto nel refactoring dalla versione 1 alla 2 è stato necessario e non si ripeterà. Le versioni successive consisteranno in miglioramenti del framework ed implementazioni di nuove funzioni. Il team di sviluppo di Angular ha assicurato che non ha nessuna intenzione di introdurre path breaking, rotture della compatibilità tra versioni diverse.

La versione stabile ad oggi è la 4.0.0 ed è perfettamente in linea con quanto trattato in Sviluppare applicazioni con Angular; con tutta probabilità lo sarà anche per le versioni successive. Adesso concentriamoci sulle novità introdotte da questa nuova release.

Tante nuove, buone nuove

Angular adotta dalla versione 2 un sistema di versioning chiamato SemVer (Semantic Versioning) che chiarisce maggiormente l’impatto di una nuova versione rispetto alla precedente. I tre numeri separati dal punto del numero di versione indicheranno di per sé la natura della release.

Il primo numero è definito come major, il secondo come minor ed infine il terzo come patch. In base alla tipologia di modifiche effettuate rispetto alla versione precedente viene incrementato il valore corrispondente. Se la modica è sostanziosa verrà incrementato major; se invece viene implementata una nuova feature, sarà incrementato minor e l’ultimo numero (patch) riguarda l’applicazione di un bugfix. Questo sistema renderà sicuramente più comprensibie il versioning delle nuove versioni. In questa logica la versione 4 ha visto incrementare major da 2 a 4. saltando la versione 3 per problemi interni legati alla gestione del repository che avrebbero generato confusione.

Pronto per sfruttare Angular 4 e oltre.

L’aspetto principale di questa nuova release è l’ottimizzazione del view engine. Il team di sviluppo ha pronosticato un notevole abbattimento del codice prodotto dalla compilazione Ahead-of-Time dei componenti, incrementando così le prestazioni degli applicativi. Rispetto alla versione precedente si può ottenere un 60 percento in meno di codice, cosa che riduce sensibilmente il peso del bundle. Rimanendo in tema view è stata introdotta una simpatica feature, ovvero la possibilità di utilizzare la parola chiave else all’interno della direttiva ngIf. 

<div *ngIf="3>2; else bye">Hello...</div>
<ng-template #bye>Bye...</ng-template>

In questo modo si evita di scrivere due direttive ngIf con condizioni contrarie. Inoltre, come vediamo nel breve sorgente proposto, è stato introdotto l’elemento ng-template e deprecato il precedente elemento template. Un’altra novità è l’uso della parola chiave as, che semplifica l’assegnazione delle variabili nel template. 

// people: Array<String> = ['Vincenzo', 'Chiara'];
<div *ngFor="let p of people as total; index as i">
{{i+1}}/{{total.length}}: {{p}}
</div>

Altre novità riguardano l’introduzione della pipe titlecase, che simula la proprietà CSS text-transform: capitalize; la semplicificazione dell’uso dei query string in http (this.http.get(`http://localhost`, { params: { id: ‘3’ } })) e la nuova interfaccia ParamMap per la cattura dei parametri di routing. 

let field = this.route.snapshot.paramMap.get('search');

È cambiata anche la gestione dei form. È stato introdotto un nuovo validatore, chiamato email, ed una direttiva compareWith, che permette con facilità di selezionare la scelta di default di una select, per mezzo di una funzione di comparazione. Fate riferimento alla guida ufficiale per verificare i dettagli.

Angular Universal

Inoltre è stato rimosso dal core di Angular il supporto per le animazioni per inserirlo in un package a parte, BrowserAnimationsModule. Per quanto riguarda le problematiche legate al SEO, il software Angular Universal è stato adottato dal team di Angular e d’ora in poi sarà aggiornato insieme alle altre librerie. Angular Universal effettua un rendering lato server, consentendo così ai crawler, come Google ed i vari social network di elaborare il reale contenuto della view senza incorrere nei loro tipici problema di elaborazione di JavaScript.

Il team si è preoccupato anche di aggiornare il supporto a TypeScript, ora comprendente le versioni 2.1 e 2.2; ciò consentirà agli sviluppatori di approfondire ancora di più le feature implementate in queste nuove versioni del nostro linguaggio di riferimento.

Il team ha infine lavorato per incrementare gli strumenti di debug tramite sourcemap per quanto riguarda i template e hanno implementato in via sperimentale il supporto ai moduli ES2015 Flat ESM, il che consentirà di ridurre di circa il sette percento il codice bundle generato.

Chiamami Angular

Il linguaggio rimane quello che abbiamo trovato dopo il refactoring. Le nuove release non devono spaventare, piuttosto incuriosirci. È bene conoscere e implementare le nuove versioni nei nostri progetti, ma non dobbiamo più ragionare in termini di aggiornamenti differenti tra loro. Dopo il refactoring Angular non ha bisogno di essere chiamato con la sua versione di riferimento: solo e semplicemente Angular.

Buona programmazione!