Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Introduction to Angular 2
Shuhei Kagawa
December 14, 2015
Programming
2
130
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
Share
More Decks by Shuhei Kagawa
See All by Shuhei Kagawa
shuhei
0
290
shuhei
1
360
shuhei
8
1.6k
shuhei
0
130
shuhei
0
7.8k
shuhei
0
5k
shuhei
0
630
shuhei
1
2.8k
shuhei
2
2k
Other Decks in Programming
See All in Programming
nkjzm
1
160
emmaglorypraise
0
120
panini
1
160
yasaichi
31
7.7k
sters
2
130
prof18
0
600
takahi5
1
410
joergneumann
0
140
martysuzuki
1
350
ryosukes
0
1.3k
danilop
1
730
doyaaaaaken
0
790
Featured
See All Featured
chrislema
173
14k
reverentgeek
27
2k
addyosmani
494
110k
destraynor
223
47k
robhawkes
52
2.8k
marcelosomers
221
15k
jeffersonlam
329
15k
holman
288
130k
kastner
54
1.9k
hursman
107
9.2k
jacobian
255
20k
bryan
100
11k
Transcript
Introduction to Angular 2 Shuhei Kagawa Dec 14, 2015 #tkjs
Who are you? • Shuhei Kagawa • Front/Back-end developer @
M3, Inc. • Rails/Angular.js/Node.js • Building SPA >10000 lines of JavaScript
None
None
Choosing JS framework is hard
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.)
https://www.google.com/trends/
http://www.bennadel.com/blog/2439-my-experience-with-angularjs---the-super-heroic-javascript-mvw-framework.htm
Piled up APIs since 2009 https://en.wikipedia.org/wiki/File:Quebrada_de_Cafayate,_Salta_(Argentina).jpg
Angular: The Good Parts • Directive > Controller • Don't
rely on scope inheritance • Directive API (controllerAs, bindToController)
None
Angular 2 • Thrown away outdated/unintuitive APIs • Completely rewritten
with
What is Angular 2 like? • It's coming up soon(?)
• Better syntax • Best-in-class performance • Cutting-edge architecture
alpha.53 Weekly Breaking Changes
beta is coming soon... Less Breaking Changes
None
Adoption at Google 100s developers Millions LOC
Better syntax • TypeScript is the first language (no more
JS quirks) • Consistent template syntax • Scoped CSS • ES6 Modules (no more own module system)
Languages ES5 ES6 TypeScript Dart
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" }, // ... ];
<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
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}}"
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))
https://www.youtube.com/watch?v=UxjgUjVpe24 http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor
https://www.youtube.com/watch?v=UxjgUjVpe24 http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor
Cutting-edge Architecture • Component-based • Uni-directional data flow • Rx.js
built-in • Compatible with Immutable.js
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]);
<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>
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']); } }
Upgrade from 1.x • Componentize everything • ngUpgrade • Mix
ng1 components and ng2 components • ngForward • Write ng1 app with ng2 syntax
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.
Browser support
None
More resources • angular.io • github.com/AngularClass/awesome-angular2 • egghead.io Angular 2
Lessons • gitter.im/angular/angular
Thanks! • shuhei@gihtub&npm • shuheikagawa@twitter