Exploring Angular 2

Exploring Angular 2

Introduction to Angular 2 new concepts and ideas, presented at Commit University Firenze.

Code: https://github.com/commit-university/exploring-angular-2

5171121655bc1a7cc89d16a7a3ce8885?s=128

Matteo Ronchi

November 22, 2016
Tweet

Transcript

  1. Angular 2 The Next Framework

  2. @cef62 github.com/cef62 Senior frontend engineer @ Staff member of Frontenders

    Verona Italian React & Angular Communities Maintainer MATTEO RONCHI
  3. AngularJS history • AngularJS was originally developed in 2009 by

    Misko Hevery and Adam Abrons • Misko Hevery started to work for Google in 2009 • 1st release of AngularJS: 1 developer, 3 weeks, 1000 loc • AngularJS version 1.0 was released in 2012 by Google • Angular version 2 was released in September 2016 after 2 years development
  4. WELCOME TO THE FUTURE

  5. Angular 2 features • Optimized for both desktop and mobile

    • Ahead of Time (AoT) compilation • Incredible performances • Native Reactive support
  6. ANGULAR 2 BASICS @INJECTABLE

  7. export class MyService { getData() { return this.loadData.load(); } }

  8. import { Injectable } from `angular2/core`; @Injectable() export class MyService

    { constructor(private loadData:LoadData) {} getData() { return this.loadData.load(); } }
  9. ANGULAR 2 BASICS @COMPONENT

  10. import { Component } from '@angular/core'; @Component({ selector: 'hello', template:

    '<p>Hello, {{name}}</p>' }) export class Hello { name: string; constructor() { this.name = 'World'; } }
  11. ANGULAR 2 BASICS @DIRECTIVE

  12. import { Directive, HostListener } from '@angular/core'; @Directive({ selector: `[confirm]`

    }) export class ConfirmDirective { @HostListener(`click`, [`$event`]) confirmFirst(event: Event) { return window.confirm( `Are you sure you want to do this?` ); } } // Usage <button type="button" (click)="visitOtherPage()" confirm>Visit another page</button>
  13. ANGULAR 2 BASICS @PIPES

  14. import { Component } from '@angular/core'; @Component({ selector: `product-price`, template:

    `<p>Price: {{ price | currency }}</p>` }) export class ProductPrice { price: number = 99.99; }
  15. import { Pipe, PipeTransform } from '@angular/core'; const UNITS =

    ['B', 'KB', 'MB', 'GB']; @Pipe({ name: 'formatFileSize' }) export class FormatSize implements PipeTransform { transform( bytes: number = 0, precision: number = 2 ) : string { if (!isFinite(bytes)) return ‘?'; let unit = 0; while ( bytes >= 1024 ) { bytes /= 1024; unit ++; } return bytes.toFixed(precision) + ' ' + UNITS[unit]; } }
  16. ANGULAR 2 BASICS HTTP SERVICE

  17. import {Injectable} from '@angular/core'; import {Http, Response} from '@angular/http'; import

    {Observable} from 'rxjs'; import {Hero} from './hero'; @Injectable() export class LoadDataService { constructor(private http: Http) {} search(term: string): Observable<Hero[]> { return this.http .get(`app/heroes/?name=${term}`) .map((r: Response) => { return r.json().data as Hero[] }); } }
  18. IN THE ZONE

  19. AngularJS $digest cycle • AngularJS engine is built using a

    dirty checking algorithm. • Application state is a single entity connected to every visual component and calculated every time a component mutates some data • It’s very easy to trigger unwanted $digest cycles impacting performances • Very difficult to debug
  20. Angular 2 Change Detection engine • Based on ngZone •

    Recalculate the components tree state after every async interaction (events, timers, observables..) • Every component has its own Change Detector • Component’s Change Detector is generated at runtime to improve performances • Developers can control how and when components are recalculated
  21. – ngBook2 “When one of the components change, no matter

    where in the tree it is, a change detection pass is triggered for the whole tree, from top to bottom.”
  22. CD CD CD CD CD CD CD CD CHANGE DETECTION

    TRAVELS TOP TO BOTTOM Change Detection Flow
  23. CHANGE DETECTION IS DEFINED AT COMPONENT LEVEL

  24. • Every component gets a change detector responsible for checking

    the bindings defined in its template • ChangeDetectionStrategy • default: update the component every time data changes • onPush: update the component only when its inputs change or the component requests to be updated
  25. CHANGE DETECTION (onPush) WITH IMMUTABLE DATA CD CD CD CD

    CD CD Change Detection Flow
  26. CHANGE DETECTION (onPush) WITH OBSERVABLES CD CD CD CD Change

    Detection Flow
  27. TYPESCRIPT: A FIRST CLASS CITIZEN

  28. Why typescript • Angular2 Dependency Injection system is based on

    type reflection • Annotations offer a powerful and very expressive way to describe elements
  29. Pros • Improve Developer Experience with better tools • Compile

    time error check • Type safety • Better documentation • Easy to adopt for backend developers
  30. Cons • Increase project’s technical debt • Slower learning curve

    for traditional javascript developer • Impossible to remove without a complete rewrite
  31. THINKING COMPONENTS

  32. Modern web is all about components • Thinking of components

    instead of views improves decoupling and separation of concerns • Components are composable and highly reusable • Easier to test • UX and UI teams integrate better
  33. A component is • exported as a custom HTML tag:

    <tab-bar /> • defined by an HTML template • enhanced using the @component decorator • controlled using its inputs and outputs • initialized by Angular Dependency Injection engine
  34. SELECTOR @COMPONENT

  35. import { Component } from '@angular/core'; @Component({ selector: 'hello', template:

    '<p>Hello, {{name}}</p>' }) export class Hello { name: string; constructor() { this.name = 'World'; } }
  36. selector is the element property that we use to tell

    Angular to create and insert an instance of this component.
  37. COMPONENT TEMPLATE @COMPONENT

  38. template is an HTML string that tells Angular what needs

    to be to rendered in the DOM. templateUrl is a relative path to a file containing the component HTML string.
  39. TEMPLATE SYNTAX • template tags {{ expression }}: Execute arbitrary

    expressions. Eg: {{1+1}. • property binding [key]=“value”. Used to pass data to a component. • event binding (event)=“expression”. Expression executed anytime the registered event fires. • 2-way binding <input [(ngModel)]=“u.name"> Requires to import `FormsModule` to be used.
  40. INPUTS @COMPONENT

  41. import {Component, Input} from `@angular/ core`; @Component({ selector: `hello`, template:

    `<p>Hello, {{name}}</p>` }) export class Hello { @Input() name: string; }
  42. import { Component } from `@angular/core`; @Component({ selector: `hello`, inputs:

    [`name`], template: `<p>Hello, {{name}}</p>` }) export class Hello {}
  43. // To bind to a raw string <hello name="World"></hello> //

    To bind to a variable in the parent scope <hello [name]="userName"></hello>
  44. OUTPUTS @COMPONENT

  45. import {Component} from `@angular/core`; @Component({ selector: `counter`, template: ` <div>

    <p>Count: {{ num }}</p> <button (click)="increment()">Increment</button> </div> ` }) export class Counter { num: number = 0; increment() { this.num++; } }
  46. import { Component, EventEmitter, Output } from `@angular/core`; @Component({ selector:

    `counter`, template: ` <div> <p>Count: {{ count }}</p> <button (click)="increment()">Increment</button> </div> ` }) export class Counter { count: number = 0; @Output() result: EventEmitter = new EventEmitter(); increment() { this.result.emit(this.count); } }
  47. CHILD COMPONENTS @COMPONENT

  48. import {Component, ViewChild} from `@angular/ core`; import {Alert} from `./alert.component`;

    @Component({ selector: `app`, template: ` <my-alert>My alert</my-alert> <button (click)="showAlert()">Show Alert</ button>` }) export class App { @ViewChild(Alert) alert: Alert; showAlert() { this.alert.show(); } }
  49. import {Component, ViewChild} from `@angular/core`; import {Alert} from `./alert.component`; @Component({

    selector: `app`, template: ` <my-alert>My alert</my-alert> <input #msg type=“text” /> <button (click)="showAlert()">Show Alert</button>` }) export class App { @ViewChild(Alert) alert: Alert; @ViewChild(`msg`) msgInput; showAlert() { const txt = this.msgInput.nativeElement.value; this.alert.show(txt); } }
  50. CONTENT TRANSCLUSION @COMPONENT

  51. import {Component, Input} from `@angular/core`; @Component({ selector: `hello`, template: `<div>

    <p>Hello, {{name}}</p> <ng-content><p>No extra data</p></ng-content> </div>` }) export class Hello { @Input() name: string; } // Usage <hello name=“Matteo”> <div> <h1>Some other data</h1> <p>Some text</p> </div> </hello>
  52. COMPONENT LIFECYCLE

  53. Components & Directives shared lifecycle ngOnChanges input property value changes

    ngOnInit Initialization step ngDoCheck every change detection cycle ngOnDestroy before destruction
  54. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'hello',

    template: '<p>Hello, {{name}}</p>' }) export class Hello implements OnInit { name: string; constructor() { this.name = 'World'; } ngOnInit() { // do something to initialize the component } }
  55. import { Directive, OnInit, OnDestroy } from '@angular/core'; @Directive({ selector:

    `[mySpy]` }) export class SpyDirective implements OnInit, OnDestroy { constructor(private logger: LoggerService) { } ngOnInit() { this.logIt(`onInit`); } ngOnDestroy() { this.logIt(`onDestroy`); } private logIt(msg: string) { this.logger.log(`Spy ${msg}`); } } // Usage <div mySpy>...</div>
  56. –Angular official docs “Angular only calls a directive/component hook method

    if it is defined.”
  57. COMPONENT STYLE INLINE STYLES

  58. import { Component } from '@angular/core'; const baseStyle = {

    backgroundColor: 'green', padding: '10px' }; @Component({ selector: 'hello', template: ‘<p [ngStyle]="style">Hello!</p>' }) export class Hello { style: any = baseStyle; }
  59. COMPONENT STYLE VIEW ENCAPSULATION

  60. • Emulated (default) - styles from main HTML propagate to

    the component. Styles defined in this component's @Component decorator are scoped to this component only. • Native (shadow DOM)- styles from main HTML do not propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only. • None - styles from the component propagate back to the main HTML and therefore are visible to all components on the page. ——— Be careful with apps that have None and Native components mixed in the application. All components with None encapsulation will have their styles duplicated in all components with Native encapsulation.
  61. import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: ‘hello',

    styles: [` .main { background-color: green; padding: 10px; } `], encapsulation: ViewEncapsulation.Emulated, template: `<p class="main">Hello!</p>` }) export class Hello {}
  62. // OUTPUT HTML <p class="main" _ngcontent-yok-5="" >Hello!</p> // output css

    (inside <head>) .main[_ngcontent-yok-5] { background-color: green; padding: 10px; }
  63. BE REACTIVE! OBSERVE ALL THE THINGS!

  64. –Angular official docs “Observables open up a continuous channel of

    communication in which multiple values of data can be emitted over time […] Angular 2 uses observables extensively - you'll see them in the HTTP service and the event system…”
  65. –A. Staltz “A stream is a sequence of ongoing events

    ordered in time. It can emit 3 different things: a value, an error, or a "completed" signal. Consider that the "completed" takes place, for instance, when the current window is closed.”
  66. OBSERVABLES vs PROMISES

  67. • Both provide us with abstractions that help us deal

    with the asynchronous nature of our applications. • Observables are cancellable. • Observables can be retried using one of the retry operators provided by the API, such as retry and retryWhen. • Promises require the caller to have access to the original function that returned the promise in order to have a retry capability.
  68. import { Observable } from ‘rxjs/Observable'; const dataStream = new

    Observable((observer) => { setTimeout(() => { observer.next(42); }, 1000); setTimeout(() => { observer.next(43); }, 2000); setTimeout(() => { observer.complete(); }, 3000); }); const subscription = dataStream.subscribe( (value) => this.values.push(value), (error) => this.anyErrors = true, () => this.finished = true );
  69. import { Component, OnInit, ViewChild } from `@angular/core`; import {

    Observable } from 'rxjs'; @Component({ selector: `app`, template: `<input type="text" #username />` }) export class App implements OnInit { @ViewChild(`username`) username: any; ngOnInit(): void { Observable .fromEvent(this.username.nativeElement, 'keyup') .map((e: any) => e.target.value) .filter((text: string) => text.length > 5) .debounceTime(1000) .subscribe((text: string) => this.submit(text)); } submit(text: string): void { console.log('submitted: ', text); } }
  70. Bootstrapping Angular

  71. Bootstrapping is an essential process in Angular - it is

    where the application is loaded when Angular comes to life. Bootstrapping Angular 2 applications is certainly different from Angular 1.x, but is still a straightforward procedure.
  72. // app.modules.ts import { BrowserModule } from '@angular/platform- browser'; import

    { NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; import { AppComponent } from './[PATH]/app.component'; import { MyComponent } from ‘./[PATH]/some.component'; import { SomeService } from “./[PATH]/some.service"; @NgModule({ declarations: [AppComponent, MyComponent], providers: [SomeService], imports: [BrowserModule, HttpModule], bootstrap: [AppComponent] }) class AppModule {}
  73. // main.ts import { platformBrowserDynamic } from '@angular/ platform-browser-dynamic'; import

    { AppModule } from './app/'; // Bootstrap main component platformBrowserDynamic().bootstrapModule(AppModule);
  74. angular-cli FAST PROJECT SETUP WORKING EXAMPLE: github.com/commit-university/exploring-angular-2

  75. THANKS! @CEF62