What's new in Angular 5!

by Gerard Sans |  @gerardsans

by Gerard Sans |  @gerardsans

Google Developer Expert

Google Developer Expert

International Speaker

Spoken at 70 events in 23 countries

Blogger

Blogger

Community Leader

900

1.4K

Trainer

Master of Ceremonies

Master of Ceremonies

Timeline

AngularJS

2-way databinding

2009

React

Component based view library

2013

React Native

Native Mobile Apps using React

2014

Vue

Progressive framework

2015

Polymer

Web Components library

Angular (v2)

Future ready

2016

Angular v4

Stable and performant

4.2 Animations

New angular.io website

4.3 HttpClient

2017

Angular v5

Smaller, Faster and Easier to use

PWA support

SSR. Material components

Bazel. Build time tools

2017

Angular

Web, Mobile and Desktop

Ecosystem

ngrx

RxJS

TypeScript

Visual Code

Ionic

NativeScript

Apollo

GraphQL

Speed & Performance Created with Sketch.

Performance

Community

Top 3

  • React (v16.2)
  • View library
  • JSX/Flow/vDOM
  • SSR
  • Not opinionated
  • MIT license
  • Angular (v5.2.7)
  • Framework
  • TS/DOM
  • SSR
  • Opinionated
  • MIT license
  • Vue (v2.5.13)
  • Framework
  • Flow/DOM
  • SSR
  • Progressive
  • MIT license

Benchmarks

Semantic Versioning

Semantic Versioning

X . Y . Z

   MAJOR       MINOR        PATCH  

Semantic Versioning

  • v2 Sept 2016
  • v4 March 2017
  • v5 Sept/Oct 2017
  • v6 March 2018
  • v7 Sept/Oct 2018

Long Term Support (LTS)

  • Only critical fixes and security patches
  • Angular v4 begins October 2017

Goals

  • Fixed release calendar
  • Incremental upgrades
  • Stability
  • Reliability

Angular CLI

Angular Rapid Development

Main Features

  • Command Line Interface to create Angular Applications
  • Full configuration: build, test, scaffolding
  • Development and Production
  • Follows latest Style Guide

Angular CLI 1.4

  • Schematics 
    • schematics/@angular
  • Custom Serve Path
  • AOT Missing translation Strategy (I18n) 
    • --missing-translation error

7th Sept

Angular CLI 1.5

  • Build Optimiser active by default
    • Mark pure sections
    • Remove decorators (reflect-metadata)
  • Incremental compilation
    • ng serve --aot
    • disable: --no-build-optimizer

1st Nov

Angular CLI 1.6

  • Service Worker Support

    • --service-worker for new CLI projects
  • SSR (universal)
    • ng generate universal server-app
    • ng build --prod --app=server-app
  • App Shell
    • ng g app-shell appShell --universal-app=server-app

6th Dec

Angular CLI 1.7

  • Add Webpack v4 support

  • Support for upgrades

    • ng update --next

  • ​Ability to specify budgets for your apps

    • ​bundle, initial, allScript, all, anyScript, any

    • baseline, max, min, warning, error

    • bytes, KB, MB, %

15th Feb

Compiler

Latest changes

  • Faster builds
    • Incremental compilation
    • Replace ReflectiveInjector (static)
  • Performance
  • Support run-time expressions​​
    • {provider: N, useValue: calculate()}

Latest changes

  • Faster Zone implementation
    • Disable zones (high performance)
  • Multiple exportAs
    • Angular Material migration

Universal

Latest changes

  • New State Transfer API
  • Server Side DOM (Domino)
    • 3rd party Component Libraries

RxJS 5.5

lettable Operators

// before
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/filter';

Observable.interval(1000)
  .filter(x => x%2!==0)   // --1--3--5--

// after
import { Observable } from 'rxjs/Observable';
import { interval } from 'rxjs/observable/interval';
import { filter } from 'rxjs/operators'; 

interval(1000)
.pipe(
  filter(x => x%2!==0)
)

demo

Forms

Latest changes

  • Added new options argument
    • FormControl, FormGroup, FormArray
  • Fine-tune when to update and validate
    • ngFormOptions, ngModelOptions
  • New validators
    • min and max

New options argument

// validator function
const ctrl = new FormControl('', Validators.required);	

// options argument
const form = new FormGroup({
   password: new FormControl('')
   passwordRepeat: new FormControl('') 
}, { 
  validators: passwordMatchValidator, 
  asyncValidators: userExistsValidator
});

// arrays
const g = new FormGroup({
   one: new FormControl()
}, [passwordMatchValidator]);

Template driven: updateOn

<form [ngFormOptions]="{updateOn: 'blur'}">
  <!-- will update on blur-->
  <input name="one" ngModel>  
</form>

<form [ngFormOptions]="{updateOn: 'blur'}">
  <!-- overrides and will update on change-->
  <input name="one" 
    ngModel [ngModelOptions]="{updateOn: 'change', standalone: true}">  
</form>

Model driven: updateOn

const c = new FormGroup({
   one: new FormControl()
}, {updateOn: 'change'});

const c = new FormArray([
  new FormControl()
], {updateOn: 'blur'});

const c = new FormControl(, {
   updateOn: 'submit'
});

min and max Validators

<form>
  <!-- Requires formControlName, formControl, ngModel -->
  <input type="number" ngModel [min]="2" [max]="100">
</form>

// { 'min':   2, 'actual':    1 }
// { 'max': 100, 'actual': 2000 }

demo

Router

Latest changes

  • Added new events
    • ActivationStart/End
    • GuardsCheckStart/End
    • ResolveStart/End
  • Tracking activation of specific routes
    • RouterEvent

New Events

import { Router, ActivationStart, ActivationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent { 
  constructor(private router: Router) {
    router.events
      .filter(e => 
        e instanceof ActivationStart || e instanceof ActivationEnd)
      .subscribe(e => console.log(e.toString()));
  }
}

Tracking specific urls

import { Router, RouterEvent } from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/distinctUntilChanged';

@Component({
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent { 
  constructor(private router: Router) {
    router.events
      .filter(e => e instanceof RouterEvent)
      .filter(e => e.url == '/about')
      .distinctUntilChanged((e1, e2) => e1.id == e2.id && e1.url == e2.url )
        .subscribe(e => {
          console.log(e.id, e.url);
        });
  }
}

demo

i18n

Latest changes

  • Unicode Common Locale Data Repository (CLDR) instead of Internationalisation API
  • Uses timezone/locale from user
  • Default locale: en-US
  • Support for
    • DatePipe, CurrencyPipe, DecimalPipe, PercentPipe

Using specific locales

// no en-US locale
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
registerLocaleData(localeEs);

// period data extras Eg: midnight, noon, morning, afternoon, evening, night
import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
import localeEsExtra from '@angular/common/locales/extra/es';
registerLocaleData(localeEs, localeEsExtra);

DatePipe

  • New formats
    • long, longDate, longTime
    • full, fullDate, fullTime 
  • Added timezone and locale support

DatePipe Examples

// common usage using pre-defined format string
{{ d | date: 'shortDate' }}               // en-US: 1/18/17

// specific locale
{{ d | date: 'shortDate': null: 'es' }}   // es-ES: 18/1/17

// custom format string
{{ d | date: 'M/d/yy': null: 'es' }}      // es-ES: 18/1/17

Breaking changes

DecimalPipe

//  number[:digitInfo[:locale]]

// n = 2.718281828459045
// digitInfo defaults to 1.0-3

{{ n | number }}                   // outputs: '2.718'
{{ n | number: '4.5-5' }}          // outputs: '0,002.71828'
{{ n | number: '4.5-5': 'es' }}    // outputs: '0.002,71828'

CurrencyPipe

//  currency[:currencyCode[:display[:digitInfo[:locale]]]]

// c = 1.3495
// display defaults to symbol
// digitInfo defaults to 1.2-2

{{ c | currency }}                                  // outputs: '$1.35'
{{ c | currency: 'CAD' }}                           // outputs: 'CA$1.35'
{{ c | currency: 'CAD': 'code' }}                   // outputs: 'CAD1.35'
{{ c | currency: 'CAD': 'symbol-narrow': '1.2-2': 'es' }}  // outputs: '1,35 $'

PercentPipe

//  percent[:digitInfo[:locale]]

// p = 0.718281828459045
// digitInfo defaults to 1.0-0

{{ p | percent }}                   // outputs: '72%'
{{ p | percent: '4.5-5' }}          // outputs: '0,071.82818%'
{{ p | percent: '4.5-5': 'es' }}    // outputs: '0.071,82818 %'

demo