Angular 2 @ JS Ojisan #6-3

Transcript

1. 1.

   ANGULAR 2 JS OJISAN #6 SHUHEI KAGAWA

2. 2.

   ߳઒ पฏ > Rails, Angular, Node ͳͲͷΦδαϯ @M3, Inc. 10k

   LOC Angular App > GitHub, npm, Qiita @shuhei > Twitter @shuheikagawa > Ϗʔϧݕఆ 2 ڃ !
3. 3.

   GITHUB @SHUHEI > shuhei/babel-angular2-app > shuhei/babel-plugin-angular2-annotations > babel/karma-babel-preprocessor

4. 4.

   None
5. 5.

   !

6. 6.

   ANGULAR BLOG

7. 7.

   ANGULAR Φδαϯ 2

8. 8.

   ANGULAR 2 ͸ɾɾɾ

9. 9.

   ίϯϙʔωϯτ ࢤ޲ʂ

10. 10.

    None
11. 11.

    <hello-world greeting="͜Μʹͪ͸" name="Angular 2"></hello-world>

12. 12.

    TYPESCRIPT @Component({ selector: 'hello-world', template: '<p>{{ greeting }}, {{ name

    }}!</p>', inputs: ['greeting', 'name'] }) export class HelloWorld {}
13. 13.

    <hello-world [greeting]="greeting" [name]="name"></hello-world>

14. 14.

    SCOPED CSS // my-app.ts @Component({ // ... templateUrl: 'my-app.html', styleUrls:

    ['my-app.css'] }) export class MyApp {} /* my-app.css */ h3 { margin: 2rem 0; }
15. 15.

    SCOPED CSS

16. 16.

    ANGULAR 2 ͸ɾɾɾ

17. 17.

    ଎͍ʂ

18. 18.

    None
19. 19.

    None
20. 20.

    ଎͍ʂ > ແବͷͳ͍มߋݕ஌ > View Ωϟογϯά > ॳظԽ࣌ʹҰճ͚ͩίϯύΠϧ ʢΏ͘Ώ͘͸ΦϑϥΠϯͰ΋ʣ

21. 21.

    V8 ։ൃऀ͕ڭ͑Δ ຊ౰ʹ଎͍ίʔυੜ੒ 2 2 angular2/src/core/change_detection/change_detection_jit_generator.ts

22. 22.

    ANGULAR 2 ͸ɾɾɾ

23. 23.

    RXJS!

24. 24.

    Stream = Promise + Array

25. 25.

    ඇಉظͳෳ਺ͷ஋ > DOM Πϕϯτ > WebSocket ͳͲ > ΞϓϦͷঢ়ଶมԽ

26. 26.

    DEMO

27. 27.

    ίʔυ @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)); } }
28. 28.

    <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>
29. 29.

    ͞Βʹ ANGULAR 2 ʹ ͸ɾɾɾ

30. 30.

    ඈͼಓ۩ ͕͋Δʂ

31. 31.

    ඈͼಓ۩ʂ > DOM ૢ࡞Ҏ֎͕ Web Worker Ͱಈ͘ʂ > αʔόαΠυϨϯμϦϯάʂ Angular

    Universal > ωΠςΟϒΞϓϦʂ React Native, NativeScript
32. 32.

    Ͱ΋ηοτΞοϓ͕ ೉͍͠ΜͰ͠ΐ͏ʁ

33. 33.

    $ npm install -g angular-cli

34. 34.

    $ 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
35. 35.

    Ͳ͏Ͱ͢ʁ

36. 36.

    ANGULAR 2 ࢖͍ͨ͘ͳΓ·͔ͨ͠ʁ

37. 37.

    ೥຤೥࢝͸ͨͭ͜Ͱ ANGULAR 2!

38. 38.

    > Angular 2: One framework > AngularClass/awesome-angular2 - GitHub >

    AngularConnect 2015 Videos - Youtube > Angular 2 Advent Calendar 2015 - Qiita
39. 39.

    None
40. 40.

    NGUPGRADE

41. 41.

    CREDITS > Angular: One framework > Comparing Performance of Blaze,

    React, Angular-Meteor and Angular 2 with Meteor by Shawn McKay > snack by liz west