Angular 2 @ JS Ojisan #6-3

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

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