Google Developer Expert

Google Developer Expert

International Speaker

Spoken at 75 events in 23 countries

Blogger

Blogger

Community Leader

Trainer

Master of Ceremonies

Master of Ceremonies

Angular Academy

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 v5 LTS begins with v6

Goals

• Fixed release calendar
• Incremental upgrades
• Stability
• Reliability

Angular v2

Future ready

2016

Angular v4

Stable and performant

2017

Angular v5

Smaller, Faster and Easier to use

2017

Angular v6

Smaller, Faster and Easier to use

2018 

New Features (1/2)

• Webpack v4. Further optimizations
• Services are now tree-shakeable
• Support inline, multiline, jsdocs comments

• preserveWhitespaces false by default

• APIs for: formatNumber, formatPercent, formatCurrency and formatDate

New Features (2/2)

• Forms. Multiple validators for array API
• Router. New properties NavigationStart
  • ​navigationSource, restoredState
• Service worker. Safety-script to uninstall
• Testing. New optional arguments
  • whenStable(done, timeout, update)

// BEFORE
@Component({
  template: `<my-element #my-element></my-element>`
})
class MyComponent {
  @ViewChild('my-element') myElement:ElementRef;
  ngAfterViewInit() {
    this.myElement.nativeElement; // type is "any"
  }
}

Optional type ElementRef

// AFTER
@Component({
  template: `<my-element #my-element></my-element>`
})
class MyComponent {
  @ViewChild('my-element') myElement:ElementRef<MyElement>;
  ngAfterViewInit() {
    this.myElement.nativeElement; // type is “MyElement”
  }
}

Optional type ElementRef

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

Angular CLI v6

• Add Webpack v4 final

• Upgrade to webpack-dev-server v3

• Support aditional Lazy Load Modules

• Support for prepackaged schematics

  • ​ng add @angular/material​

{
  "compilerOptions": {
    "experimentalDecorators": true,
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": false,
    "enableResourceInlining": true,
    "enableIvy": true,
  }
}

Resource Inlining Support

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  { }

Before

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<hello></hello>`,
  styles: [`p { font-family: Lato; }`]
})
export class AppComponent  { }

After

RxJS v6 Goodies

• Friendly imports
  • rxjs, rxjs/operators
• EcmaScript spec compliant
  • Pipeable operators
  • Avoid reserved keywords
• Simplified API
  • Result Selectors removed

Operator Renames

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

const isOddNumber = (x: number) => x%2!==0;
Observable.interval(1000)
  .filter(isOddNumber);  

// --0--1--2--3--4--5-- interval
// -----1-----3-----5-- filter

Listing odd numbers - RxJS v5.5

import { interval } from 'rxjs';
import { filter } from 'rxjs/operators'; 

const isOddNumber = (x: number) => x%2!==0;
interval(1000).pipe(
  filter(isOddNumber)
);

// --0--1--2--3--4--5-- interval
// -----1-----3-----5-- filter

Listing odd numbers - RxJS v6

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/finally';

Observable.throw("💩").subscribe({
  error: e => l(`Error: ${e}`)
})

Observable.throw("💩")
.catch(e => of("No worries. Sorted!😃"))
.finally(() => { /* code */ })
.subscribe(v => l(v));

Error Handling - RxJS v5.5

import { throwError } from 'rxjs';
import { catchError, finalize } from 'rxjs/operators';

throwError("💩").subscribe({
  error: e => l(`Error: ${e}`)
})

throwError("💩").pipe(
  catchError(e => of("No worries. Sorted!😃")),
  finalize(() => { /* code */ }),
).subscribe(v => l(v));

Error Handling - RxJS v6

// <div [@fade]="fade" fast></div>
// <div [@fade]="{ value: fade, params: { type: 'fast' }}">
const hasAttribute = (attribute: string) => 
  (fromState: string, toState: string, 
    element: any, params: {[key:string]: any}
  ): boolean => 
  element.hasAttribute(attribute) || (params && params.type==attribute);
}

export const fade = trigger('fade', [
  state('fadeIn', style({ opacity: 1 })),
  state('fadeOut', style({ opacity: 0.1 })),
  transition(hasAttribute("fast"), animate('100ms linear')),
  transition('fadeIn <=> fadeOut', animate('400ms linear')),
]);

Dynamic transition matcher

export class HelloComponent {
  version: FormControl = new FormControl('6.0.0', Validators.required);
  form: FormGroup = new FormGroup({ v: this.version });

  constructor() {
    this.form.statusChanges  // VALID INVALID PENDING DISABLED
      .subscribe(status => console.log(status)); 

    this.version.markAsPending();                    // emits PENDING
    this.version.markAsPending({onlySelf: true});    // no output
    this.version.markAsPending({emitEvent: false});  // no output
  }
}

markAsPending

Overview

• Forms. New PENDING event may require review current code
• Dropped support <template> Element
• No animation imports @angular/core
• Baseline dependencies
  • ​Webpack v4, TS 2.7 and RxJS v6
  • ​SSR. Domino v2

Angular Elements

Ivy Compiler