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
780
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
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
技術同人誌をMCP Serverにしてみた
74th
1
380
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
450
CursorはMCPを使った方が良いぞ
taigakono
1
180
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
350
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
190
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
410
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.5k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
440
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Facilitating Awesome Meetings
lara
54
6.4k
Statistics for Hackers
jakevdp
799
220k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
A Modern Web Designer's Workflow
chriscoyier
694
190k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Site-Speed That Sticks
csswizardry
10
660
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