JS オジサン #6-3 での Angular 2 のざっくりした紹介です。 https://atnd.org/events/71991
ANGULAR 2JS OJISAN #6SHUHEI KAGAWA
View Slide
߳ पฏ> Rails, Angular, Node ͳͲͷΦδαϯ @M3, Inc.10k LOC Angular App> GitHub, npm, Qiita @shuhei> Twitter @shuheikagawa> Ϗʔϧݕఆ 2 ڃ !
GITHUB @SHUHEI> shuhei/babel-angular2-app> shuhei/babel-plugin-angular2-annotations> babel/karma-babel-preprocessor
!
ANGULAR BLOG
ANGULAR Φδαϯ 2
ANGULAR 2ɾɾɾ
ίϯϙʔωϯτࢤʂ
TYPESCRIPT@Component({selector: 'hello-world',template: '{{ greeting }}, {{ name }}!',inputs: ['greeting', 'name']})export class HelloWorld {}
SCOPED CSS// my-app.ts@Component({// ...templateUrl: 'my-app.html',styleUrls: ['my-app.css']})export class MyApp {}/* my-app.css */h3 {margin: 2rem 0;}
SCOPED CSS
͍ʂ
͍ʂ> ແବͷͳ͍มߋݕ> View Ωϟογϯά> ॳظԽ࣌ʹҰճ͚ͩίϯύΠϧʢΏ͘Ώ͘ΦϑϥΠϯͰʣ
V8 ։ൃऀ͕ڭ͑Δຊʹ͍ίʔυੜ 22angular2/src/core/change_detection/change_detection_jit_generator.ts
RXJS!
Stream = Promise + Array
ඇಉظͳෳͷ> DOM Πϕϯτ> WebSocket ͳͲ> ΞϓϦͷঢ়ଶมԽ
DEMO
ίʔυ@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));}}
GitHub repositoy search{{repo.full_name}}{{repo.stargazers_count}} stars
͞ΒʹANGULAR 2 ʹɾɾɾ
ඈͼಓ۩͕͋Δʂ
ඈͼಓ۩ʂ> DOM ૢ࡞Ҏ֎͕ Web Worker Ͱಈ͘ʂ> αʔόαΠυϨϯμϦϯάʂAngular Universal> ωΠςΟϒΞϓϦʂReact Native, NativeScript
ͰηοτΞοϓ͕͍͠ΜͰ͠ΐ͏ʁ
$ npm install -g angular-cli
$ ng new js-ojisan$ cd js-ojisan$ ls -ltotal 32drwxr-xr-x 10 shuhei staff 340 Dec 16 11:44 dist-rw-r--r-- 1 shuhei staff 200 Dec 16 09:44 ember-cli-build.js-rw-r--r-- 1 shuhei staff 1282 Dec 16 09:44 karma-test-shim.js-rw-r--r-- 1 shuhei staff 1365 Dec 16 09:44 karma.conf.jsdrwxr-xr-x 17 shuhei staff 578 Dec 16 09:44 node_modules-rw-r--r-- 1 shuhei staff 571 Dec 16 09:44 package.jsondrwxr-xr-x 7 shuhei staff 238 Dec 16 09:44 srcdrwxr-xr-x 26 shuhei staff 884 Dec 16 21:16 tmp$ ng serve$ open http://localhost:4200
Ͳ͏Ͱ͢ʁ
ANGULAR 2͍ͨ͘ͳΓ·͔ͨ͠ʁ
࢝ͨͭ͜ͰANGULAR 2!
> Angular 2: One framework> AngularClass/awesome-angular2 - GitHub> AngularConnect 2015 Videos - Youtube> Angular 2 Advent Calendar 2015 - Qiita
NGUPGRADE
CREDITS> Angular: One framework> Comparing Performance of Blaze, React, Angular-Meteorand Angular 2 with Meteor by Shawn McKay> snack by liz west