Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Angular 2
Search
Shuhei Kagawa
December 14, 2015
Programming
2
160
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
Profiling Node.js apps on production
shuhei
0
890
Building a Pixel Art Editor with Elm
shuhei
1
790
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
170
Draw Animated Chart on React Native
shuhei
0
8.8k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
870
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
440
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
PicoRuby on Rails
makicamel
2
120
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
PipeCDのプラグイン化で目指すところ
warashi
1
260
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
150
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
A Tale of Four Properties
chriscoyier
160
23k
Writing Fast Ruby
sferik
628
62k
Scaling GitHub
holman
459
140k
It's Worth the Effort
3n
185
28k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing for Performance
lara
610
69k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
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