Introduction to Angular 2

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

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. Thanks!
    • shuhei@gihtub&npm
    • shuheikagawa@twitter
    

    View Slide