In diretta da Angular 5

È uscita la nuova major release di Angular, la 5.0. Analizziamola velocemente. Anticipo subito che i timori relativi ad importanti breaking change, che continuano ad aleggiare nonostante tutto, rimangono infondati.

Ciò che si evince maggiormente è un affinamento continuo, riguardante sia Angular sia i progetti correlati come Universal e CLI.

Nel volume Sviluppare applicazioni con Angular – Guida alla programmazione web e mobile abbiamo spiegato con esempi correlati da codice che cosa effettivamente siano i decoratori, design pattern introdotti recentemente in TypeScript e utilizzati largamente da Angular.

L’uso dei decoratori consente ad uno sviluppatore che utilizza il framework di non inserire codice all’interno della classe relativa ad un componente, ma solo definire metadati all’interno del decoratore stesso. In fase di compilazione, la classe decorata verrà modificata secondo le esigenze interne al framework.

Build (più) ottimizzate

Una delle novità introdotte dalla nuova release in Angular CLI è proprio la maggiore ottimizzazione della build, con l’eliminazione dal compilato dei decoratori e del codice utente non utilizzato. Questa possibilità era offerta da Angular CLI tramite il parametro –build-optimizer, ora implementato di default. Oltre ad una maggiore efficienza della build, il compilatore Angular è stato notevolmente potenziato e consente una compilazione ora integrata con la compilazione TypeScript. Questa novità è condizionata dall’uso dei TypeScript Transforms ed introduce una dipendenza da TypeScript 2.4.

Via server

Per quanto riguarda Angular Universal, prende sempre più piede. Nella fattispecie, è stata introdotta l’API TransferState che consente di trasferire informazioni tra client e server in fase di rendering. Per comprendere meglio il problema, ben noto a chi usa Angular Universal, consiglio questa lettura.

Inoltre è stato aggiunto ad Angular Universal il supporto di Domino, affinché si estendano anche lato server le interazioni eseguite all’interno del browser con il Document Object Model.

Lambda e decoratori

Ritornando ai decoratori, in questa versione di Angular è possibile associare ad essi funzioni lambda. Questo è un esempio con useFactory.

import {Component, Inject, NgModule, InjectionToken} from '@angular/core'

import {BrowserModule} from '@angular/platform-browser'

let TestProvider = new InjectionToken<string>('test');

@Component({

selector: 'my-app',

template: `

<div></div>

`,

})

export class App {

name:string;

constructor(@Inject(TestProvider) config: TestProvider) {}

}


@NgModule({

imports: [ BrowserModule ],

providers: [{

provide: TestProvider,

useFactory: () => {

console.log('Eccomi!');

}

}]

declarations: [ App ],

bootstrap: [ App ]

})

export class AppModule {}

In questo esempio troviamo anche InjectionToken, novità della versione 4 da usare in luogo della deprecata OpaqueToken. Per comprendere le differenze tra i due servizi, consiglio la lettura di questo articolo.

Favorevoli all’indipendenza

Altra novità è la gestione delle internazionalizzazione delle pipe. Nel nuovo Angular, questo processo è interno al framework senza l’ausilio delle API i18n. È disponibile un documento ufficiale sulle differenze tra le vecchie e le nuove pipe.

Per arrivare pronti e acculturati ad Angular 5.

Il processo di alleggerimento prosegue con la scelta di dipendere il meno possibile da polyfill esterni e rendere più efficiente il framework. ReflectiveDependency è stato sostituito da StaticInjector; questa modifica offre maggiore supporto ai browser, che in alcuni casi necessitavano di polyfill per il provider Reflect. Inoltre StaticInjector risolve automaticamente le dipendenze, mentre con ReflectiveDependency era necessario utilizzare il metodo resolveAndCreate.

Attenzione a Zone

Una nota importante riguarda Zone. Ne avevamo parlato in un post dettagliato. Angular 5 ha velocizzato la gestione delle zone e ha permesso agli sviluppatori di lavorare senza il suo supporto. Significa, rileggetevi l’articolo se necessario, che un binding all’interno di una setTimeout non genererà nessuna change detection!

platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop'});

Un aiuto, non troppo banale, offerto dal framework è dato dalla chiave exportAs che ora consente di richiamare un componente o una direttiva con più nomi, azione utile in un processo di rifattorizzazione.

È stato introdotto anche un miglioramento sulla validazione all’interno dei form. Rispetto alla versione precedente, è possibile adesso validare non l’evento input in sé ma aggiornare la validazione al generarsi degli eventi blur o submit.

{{name.errors|json}}
<input required name="name" #name="ngModel" ngModel
   [ngModelOptions]="{updateOn: 'blur'}">

La validazione espressa nell’interpolazione verrà aggiornata all’evento blur.

RxJS evolve

Un altro piccolo cambiamento riguarda l’aggiornamento della libreria RxJS alla versione 5.5. Prima, per usare gli operatori quali map, filter, scan era necessario importarli uno ad uno; adesso vengono raccolti sotto la categoria operators.

import { map, filter, scan } from 'rxjs/operators';

Vengono richiamati tramite il metodo pipe, novità di RxJS. Ecco che cosa leggere per impratichirvi sui lettable operators.

import { range } from 'rxjs/observable/range';
import { map, filter, scan } from 'rxjs/operators';
const source$ = range(0, 10);
source$.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))

Da questo esempio si evince come il metodo pipe permetta di combinare insieme gli operatori senza utilizzarli separatamente, come accadeva nella versione precedente.

Cicli di vita

In Sviluppare applicazioni con Angular – Guida alla programmazione web e mobile abbiamo spiegato i cicli di vita di un applicativo Angular; in questa nuova versione, la stessa logica è applicata al routing.

Gli eventi a disposizione sono GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd e non fanno altro che scandire nel dettaglio il processo di navigation che scattano al cambio di view.

I processi Guards scandiscono l’attività del guard, affrontata in un post precedente. ChildActivation scandisce i child route. Resolve attiva il ciclo di risoluzione della rotta se necessario; un esempio potrebbe essere un URL REST con una funzione resolve associata.

È possibile trovare parte di quanto trattato a questo indirizzo.

Come al solito, l’invito allo studio è di rito. Nel prossimo appuntamento ci tufferemo nel complesso mondo della sicurezza che ruota intorno ad Angular. Buono studio!