Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Angular 2

Introduction to Angular 2

My talk about Angular 2 at #tkjs Dec 14, 2015
http://www.meetup.com/tokyojs/events/226903404/

Shuhei Kagawa

December 14, 2015
Tweet

More Decks by Shuhei Kagawa

Other Decks in Programming

Transcript

  1. Introduction to
    Angular 2
    Shuhei Kagawa
    Dec 14, 2015
    #tkjs

    View Slide

  2. Who are you?
    • Shuhei Kagawa
    • Front/Back-end developer @ M3, Inc.
    • Rails/Angular.js/Node.js
    • Building SPA >10000 lines of JavaScript

    View Slide

  3. View Slide

  4. View Slide

  5. Choosing JS framework
    is hard

    View Slide

  6. What I wanted 1.5 years
    • Data-binding (less boilerplate)
    • Amount of learning resources (for team
    development)
    • (Seemingly) Long-time support
    • Rich standard libraries (security, validation and etc.)

    View Slide

  7. https://www.google.com/trends/

    View Slide

  8. http://www.bennadel.com/blog/2439-my-experience-with-angularjs---the-super-heroic-javascript-mvw-framework.htm

    View Slide

  9. Piled up APIs
    since 2009
    https://en.wikipedia.org/wiki/File:Quebrada_de_Cafayate,_Salta_(Argentina).jpg

    View Slide

  10. Angular: The Good Parts
    • Directive > Controller
    • Don't rely on scope
    inheritance
    • Directive API (controllerAs,
    bindToController)

    View Slide

  11. View Slide

  12. Angular 2
    • Thrown away outdated/unintuitive APIs
    • Completely rewritten with

    View Slide

  13. What is Angular 2 like?
    • It's coming up soon(?)
    • Better syntax
    • Best-in-class performance
    • Cutting-edge architecture

    View Slide

  14. alpha.53
    Weekly Breaking Changes

    View Slide

  15. beta is coming soon...
    Less Breaking Changes

    View Slide

  16. View Slide

  17. Adoption at Google
    100s developers

    Millions LOC

    View Slide

  18. Better syntax
    • TypeScript is the first language (no more JS quirks)
    • Consistent template syntax
    • Scoped CSS
    • ES6 Modules (no more own module system)

    View Slide

  19. Languages
    ES5
    ES6
    TypeScript
    Dart

    View Slide

  20. ES6 Modules
    Class
    Decorator
    Class property
    import { Component, Injectable } from 'angular2/core';
    @Injectable()
    class Hero { id: number; name: string; }
    @Component({
    selector: 'my-app',
    templateUrl: './my-app.html',
    styleUrls: ['./my-app.css']
    })
    export class AppComponent {
    public title = 'Tour of Heroes';
    public heroes = HEROES;
    public selectedHero: Hero;
    onSelect(hero: Hero) {
    this.selectedHero = hero;
    }
    getSelectedClass(hero: Hero) {
    return {
    selected: hero === this.selectedHero
    };
    }
    }
    var HEROES: Hero[] = [
    { "id": 11, "name": "Mr. Nice" }, // ...
    ];

    View Slide

  21. {{title}}
    My Heroes

    (click)="onSelect(hero)"
    [ng-class]="getSelectedClass(hero)">
    {{hero.id}} {{hero.name}}



    {{selectedHero.name}} details!

    id: {{selectedHero.id}}


    name:
    placeholder="name">


    Text binding
    Loop
    Event handler
    (Seemingly)

    Two-way

    data binding

    View Slide

  22. Template syntax
    • foo="bar"
    • [foo]="bar"
    • (foo)="bar()"
    Plain (passed as a string)
    Data binding (evaluated as expression)
    Event handler
    • ng-include="'hello.tpl'"
    • ng-href="https://google.com?q={{keyword}}"

    View Slide

  23. Best-in-class performance
    • Ultra-fast change detection
    • View caching
    • One-time and offline compilation
    • (Change detection in Web Worker)
    • (Server-side rendering (Angular Universal))

    View Slide

  24. https://www.youtube.com/watch?v=UxjgUjVpe24
    http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

    View Slide

  25. https://www.youtube.com/watch?v=UxjgUjVpe24
    http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

    View Slide

  26. Cutting-edge Architecture
    • Component-based
    • Uni-directional data flow
    • Rx.js built-in
    • Compatible with Immutable.js

    View Slide

  27. import { Component } from 'angular2/core';
    import { Control } from 'angular2/common';
    import { Jsonp, JSONP_PROVIDERS } from 'angular2/http';
    import { bootstrap } from 'angular2/platform/browser';
    import { GitHubService } from './github-service';
    @Component({
    selector: 'my-app',
    templateUrl: 'app/my-app.html',
    styleUrls: ['app/my-app.css']
    })
    export class MyApp {
    searchText = new Control();
    repos: any;
    constructor(private github: GitHubService) {
    this.repos = this.searchText.valueChanges
    .debounceTime(300)
    .flatMap(text => this.github.search(text));
    ;
    }
    }
    bootstrap(MyApp, [JSONP_PROVIDERS, GitHubService]);

    View Slide

  28. GitHub repositoy search

    placeholder="keyword" class="form-control">



    {{repo.full_name}}
    {{repo.stargazers_count}} stars


    View Slide

  29. import { Injectable } from 'angular2/core';
    @Injectable()
    export class GitHubService {
    constructor(private jsonp: Jsonp) {}
    search(keyword) {
    return this.jsonp.get(`https://api.github.com/
    search/repositories?callback=JSONP_CALLBACK&q=$
    {keyword}&sort=stars`)
    .map(res => res.json()['data']['items']);
    }
    }

    View Slide

  30. Upgrade from 1.x
    • Componentize everything
    • ngUpgrade
    • Mix ng1 components and ng2 components
    • ngForward
    • Write ng1 app with ng2 syntax

    View Slide

  31. Libraries
    • ng1 libraries doesn't work on ng2
    • But people started re-building popular ones with
    ng2
    • ionic2, angular2_material, ng2-bootstrap, ng2-
    select and etc.

    View Slide

  32. Browser support

    View Slide

  33. View Slide

  34. More resources
    • angular.io
    • github.com/AngularClass/awesome-angular2
    • egghead.io Angular 2 Lessons
    • gitter.im/angular/angular

    View Slide

  35. View Slide