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
150
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
860
Building a Pixel Art Editor with Elm
shuhei
1
760
Redux Middleware Wars (Japanese)
shuhei
8
1.8k
Redux Middleware Wars (English)
shuhei
0
160
Draw Animated Chart on React Native
shuhei
0
8.7k
Angular 2 Offline Compiler
shuhei
0
5.4k
Weird Attractors
shuhei
0
840
Angular 2 @ JS Ojisan #6-3
shuhei
1
3k
Git の内部データ構造
shuhei
2
2k
Other Decks in Programming
See All in Programming
Rails アプリ地図考 Flush Cut
makicamel
1
130
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
300
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
310
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
color-scheme: light dark; を完全に理解する
uhyo
7
490
Jasprが凄い話
hyshu
0
160
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
sappoRo.R #12 初心者セッション
kosugitti
0
280
Featured
See All Featured
Speed Design
sergeychernyshev
27
810
Become a Pro
speakerdeck
PRO
26
5.2k
Git: the NoSQL Database
bkeepers
PRO
427
65k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Building Your Own Lightsaber
phodgson
104
6.2k
Designing for Performance
lara
604
68k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
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