Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ANGULAR 2 JS OJISAN #6 SHUHEI KAGAWA
Slide 2
Slide 2 text
߳ पฏ > Rails, Angular, Node ͳͲͷΦδαϯ @M3, Inc. 10k LOC Angular App > GitHub, npm, Qiita @shuhei > Twitter @shuheikagawa > Ϗʔϧݕఆ 2 ڃ !
Slide 3
Slide 3 text
GITHUB @SHUHEI > shuhei/babel-angular2-app > shuhei/babel-plugin-angular2-annotations > babel/karma-babel-preprocessor
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
!
Slide 6
Slide 6 text
ANGULAR BLOG
Slide 7
Slide 7 text
ANGULAR Φδαϯ 2
Slide 8
Slide 8 text
ANGULAR 2 ɾɾɾ
Slide 9
Slide 9 text
ίϯϙʔωϯτ ࢤʂ
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Slide 12
Slide 12 text
TYPESCRIPT @Component({ selector: 'hello-world', template: '
{{ greeting }}, {{ name }}!
', inputs: ['greeting', 'name'] }) export class HelloWorld {}
Slide 13
Slide 13 text
Slide 14
Slide 14 text
SCOPED CSS // my-app.ts @Component({ // ... templateUrl: 'my-app.html', styleUrls: ['my-app.css'] }) export class MyApp {} /* my-app.css */ h3 { margin: 2rem 0; }
Slide 15
Slide 15 text
SCOPED CSS
Slide 16
Slide 16 text
ANGULAR 2 ɾɾɾ
Slide 17
Slide 17 text
͍ʂ
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
͍ʂ > ແବͷͳ͍มߋݕ > View Ωϟογϯά > ॳظԽ࣌ʹҰճ͚ͩίϯύΠϧ ʢΏ͘Ώ͘ΦϑϥΠϯͰʣ
Slide 21
Slide 21 text
V8 ։ൃऀ͕ڭ͑Δ ຊʹ͍ίʔυੜ 2 2 angular2/src/core/change_detection/change_detection_jit_generator.ts
Slide 22
Slide 22 text
ANGULAR 2 ɾɾɾ
Slide 23
Slide 23 text
RXJS!
Slide 24
Slide 24 text
Stream = Promise + Array
Slide 25
Slide 25 text
ඇಉظͳෳͷ > DOM Πϕϯτ > WebSocket ͳͲ > ΞϓϦͷঢ়ଶมԽ
Slide 26
Slide 26 text
DEMO
Slide 27
Slide 27 text
ίʔυ @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)); } }
Slide 28
Slide 28 text
GitHub repositoy search
{{repo.full_name}}
{{repo.stargazers_count}} stars
Slide 29
Slide 29 text
͞Βʹ ANGULAR 2 ʹ ɾɾɾ
Slide 30
Slide 30 text
ඈͼಓ۩ ͕͋Δʂ
Slide 31
Slide 31 text
ඈͼಓ۩ʂ > DOM ૢ࡞Ҏ֎͕ Web Worker Ͱಈ͘ʂ > αʔόαΠυϨϯμϦϯάʂ Angular Universal > ωΠςΟϒΞϓϦʂ React Native, NativeScript
Slide 32
Slide 32 text
ͰηοτΞοϓ͕ ͍͠ΜͰ͠ΐ͏ʁ
Slide 33
Slide 33 text
$ npm install -g angular-cli
Slide 34
Slide 34 text
$ ng new js-ojisan $ cd js-ojisan $ ls -l total 32 drwxr-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.js drwxr-xr-x 17 shuhei staff 578 Dec 16 09:44 node_modules -rw-r--r-- 1 shuhei staff 571 Dec 16 09:44 package.json drwxr-xr-x 7 shuhei staff 238 Dec 16 09:44 src drwxr-xr-x 26 shuhei staff 884 Dec 16 21:16 tmp $ ng serve $ open http://localhost:4200
Slide 35
Slide 35 text
Ͳ͏Ͱ͢ʁ
Slide 36
Slide 36 text
ANGULAR 2 ͍ͨ͘ͳΓ·͔ͨ͠ʁ
Slide 37
Slide 37 text
࢝ͨͭ͜Ͱ ANGULAR 2!
Slide 38
Slide 38 text
> Angular 2: One framework > AngularClass/awesome-angular2 - GitHub > AngularConnect 2015 Videos - Youtube > Angular 2 Advent Calendar 2015 - Qiita
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
NGUPGRADE
Slide 41
Slide 41 text
CREDITS > Angular: One framework > Comparing Performance of Blaze, React, Angular-Meteor and Angular 2 with Meteor by Shawn McKay > snack by liz west