Introduction to Angular 2

Transcript

1. 1.

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

2. 2.

   Who are you? • Shuhei Kagawa • Front/Back-end developer @

   M3, Inc. • Rails/Angular.js/Node.js • Building SPA >10000 lines of JavaScript
3. 3.

   None
4. 4.

   None
5. 5.

   Choosing JS framework is hard

6. 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.)
7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

    Angular: The Good Parts • Directive > Controller • Don't

    rely on scope inheritance • Directive API (controllerAs, bindToController)
11. 11.

    None
12. 12.

    Angular 2 • Thrown away outdated/unintuitive APIs • Completely rewritten

    with
13. 13.

    What is Angular 2 like? • It's coming up soon(?)

    • Better syntax • Best-in-class performance • Cutting-edge architecture
14. 14.

    alpha.53 Weekly Breaking Changes

15. 15.

    beta is coming soon... Less Breaking Changes

16. 16.

    None
17. 17.

    Adoption at Google 100s developers
 Millions LOC

18. 18.

    Better syntax • TypeScript is the first language (no more

    JS quirks) • Consistent template syntax • Scoped CSS • ES6 Modules (no more own module system)
19. 19.

    Languages ES5 ES6 TypeScript Dart

20. 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" }, // ... ];
21. 21.

    <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="#hero of heroes" (click)="onSelect(hero)"

    [ng-class]="getSelectedClass(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div> <label>id: </label>{{selectedHero.id}} </div> <div> <label>name: </label> <div><input [(ngModel)]="selectedHero.name" placeholder="name"></div> </div> </div> Text binding Loop Event handler (Seemingly)
 Two-way
 data binding
22. 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}}"
23. 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))
24. 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

25. 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

26. 26.

    Cutting-edge Architecture • Component-based • Uni-directional data flow • Rx.js

    built-in • Compatible with Immutable.js
27. 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]);
28. 28.

    <h3>GitHub repositoy search</h3> <p> <input [ngFormControl]="searchText" placeholder="keyword" class="form-control"> </p> <ul

    class="repositories"> <li *ngFor="#repo of repos | async"> <a [href]="repo.html_url">{{repo.full_name}}</a> {{repo.stargazers_count}} stars </li> </ul>
29. 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']); } }
30. 30.

    Upgrade from 1.x • Componentize everything • ngUpgrade • Mix

    ng1 components and ng2 components • ngForward • Write ng1 app with ng2 syntax
31. 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.
32. 32.

    Browser support

33. 33.

    None
34. 34.

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

    Lessons • gitter.im/angular/angular
35. 35.

    Thanks! • shuhei@gihtub&npm • shuheikagawa@twitter