Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2 @ JS Ojisan #6-3

Shuhei Kagawa
December 17, 2015

Angular 2 @ JS Ojisan #6-3

JS オジサン #6-3 での Angular 2 のざっくりした紹介です。
https://atnd.org/events/71991

Shuhei Kagawa

December 17, 2015
Tweet

More Decks by Shuhei Kagawa

Other Decks in Programming

Transcript

  1. ANGULAR 2
    JS OJISAN #6
    SHUHEI KAGAWA

    View Slide

  2. ߳઒ पฏ
    > Rails, Angular, Node ͳͲͷΦδαϯ @M3, Inc.
    10k LOC Angular App
    > GitHub, npm, Qiita @shuhei
    > Twitter @shuheikagawa
    > Ϗʔϧݕఆ 2 ڃ !

    View Slide

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

    View Slide

  4. View Slide

  5. !

    View Slide

  6. ANGULAR BLOG

    View Slide

  7. ANGULAR Φδαϯ 2

    View Slide

  8. ANGULAR 2
    ͸ɾɾɾ

    View Slide

  9. ίϯϙʔωϯτ
    ࢤ޲ʂ

    View Slide

  10. View Slide


  11. View Slide

  12. TYPESCRIPT
    @Component({
    selector: 'hello-world',
    template: '{{ greeting }}, {{ name }}!',
    inputs: ['greeting', 'name']
    })
    export class HelloWorld {}

    View Slide


  13. View Slide

  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;
    }

    View Slide

  15. SCOPED CSS

    View Slide

  16. ANGULAR 2
    ͸ɾɾɾ

    View Slide

  17. ଎͍ʂ

    View Slide

  18. View Slide

  19. View Slide

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

    View Slide

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

    View Slide

  22. ANGULAR 2
    ͸ɾɾɾ

    View Slide

  23. RXJS!

    View Slide

  24. Stream = Promise + Array

    View Slide

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

    View Slide

  26. DEMO

    View Slide

  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));
    }
    }

    View Slide

  28. GitHub repositoy search





    {{repo.full_name}}
    {{repo.stargazers_count}} stars


    View Slide

  29. ͞Βʹ
    ANGULAR 2 ʹ
    ͸ɾɾɾ

    View Slide

  30. ඈͼಓ۩
    ͕͋Δʂ

    View Slide

  31. ඈͼಓ۩ʂ
    > DOM ૢ࡞Ҏ֎͕ Web Worker Ͱಈ͘ʂ
    > αʔόαΠυϨϯμϦϯάʂ
    Angular Universal
    > ωΠςΟϒΞϓϦʂ
    React Native, NativeScript

    View Slide

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

    View Slide

  33. $ npm install -g angular-cli

    View Slide

  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

    View Slide

  35. Ͳ͏Ͱ͢ʁ

    View Slide

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

    View Slide

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

    View Slide

  38. > Angular 2: One framework
    > AngularClass/awesome-angular2 - GitHub
    > AngularConnect 2015 Videos - Youtube
    > Angular 2 Advent Calendar 2015 - Qiita

    View Slide

  39. View Slide

  40. NGUPGRADE

    View Slide

  41. CREDITS
    > Angular: One framework
    > Comparing Performance of Blaze, React, Angular-Meteor
    and Angular 2 with Meteor by Shawn McKay
    > snack by liz west

    View Slide