Chaplin.jsの話 #ten1club

Chaplinの話！！！

Transcript

1. Chaplin.jsͷ࿩
   @mizchi'/'#ten1club
   

   View Slide

2. View Slide

3. ࣗݾ঺ry#͙͙Ε
   

   View Slide

4. Chaplin.jsͱ͸
   • paulmillr࡞ͷBackbone֦ுܥMVCϥΠϒϥϦ
   • paulmillrࢯɺAc4vity͕ଟ͍ͷͰ͍ΖΜͳͱ͜ͰݟΔ
   • Rails෩ͷઃܭͰSPA૊ΊΔ
   

   View Slide

5. Rails෩ͷߏ੒
   ~/s/bwc (master) $ la app/
   total 32
   drwxr-xr-x 11 mizchi staff 374B 7 11 16:33 .
   drwxr-xr-x 10 mizchi staff 340B 7 11 16:33 ..
   -rw-r--r-- 1 mizchi staff 207B 7 11 16:33 application.coffee
   drwxr-xr-x 4 mizchi staff 136B 7 11 16:33 assets
   drwxr-xr-x 5 mizchi staff 170B 7 11 16:34 controllers
   -rw-r--r-- 1 mizchi staff 230B 7 11 16:33 initialize.coffee
   drwxr-xr-x 4 mizchi staff 136B 7 11 16:33 lib
   -rw-r--r-- 1 mizchi staff 45B 7 11 16:33 mediator.coffee
   drwxr-xr-x 3 mizchi staff 102B 7 11 16:33 models
   -rw-r--r-- 1 mizchi staff 75B 7 11 16:33 routes.coffee
   drwxr-xr-x 8 mizchi staff 272B 7 11 16:35 views
   ͋͘·ͰRailsʮ෩ʯͰ͋ͬͯͦͷ΋ͷͰ͸ͳ͍
   

   View Slide

6. ࣗ෼ͱChaplin.js
   • ϓϩμΫγϣϯͰ2ϓϩδΣΫτͰ࢖༻
   • ศརͳ൒໘ෆຬ΋͋Δ
   • ෺଍Γͳ֦ͯ͘ுͯ͠࢖ͬͯΔ
   

   View Slide

7. ࠓ೔͠Ό΂Δ͜ͱ
   • ओʹBackboneʹͳ͍ػೳʹ͍ͭͯ
   • ViewͱModel͸ࢮ׆؅ཧ͞ΕͯΔ͜ͱҎ֎Ұॹ
   

   View Slide

8. Chaplinͷઃܭ
   

   View Slide

9. View Slide

10. ಛ௕
    • Rails෩Router
    • Πϯελϯεͷੜ੒/ഁغΛ؅ཧ͢ΔComposer
    • ಛԽͨ͠ϏϧυγεςϜ(brunch)
    • Rails෩εΩϟϑΥϧσΟϯά(scaffolt)
    

    View Slide

11. Composer
    

    View Slide

12. Composer
    • Controllerͱڠௐͯ͠Πϯελϯε؅ཧ͢Δ
    • ϧʔςΟϯάΞΫγϣϯຖʹ͋ΒΏΔΠϯελϯεͷdispose͕
    ݺ͹ΕΔ
    • Controllerͷ੾ΓସΘΓલޙͰ-reuse-ͨ͠΋ͷ͸Ҿ͖ܧ͕ΕΔ
    

    View Slide

13. Controller/Composerͷྫ
    # controllers/home-controller
    module.exports = class HomeController
    index: ->
    layout = @reuse('layout', LayoutView)
    view = @reuse('home', HomeView)
    # controllers/foo-controller
    module.exports = class FooController
    index: ->
    layout = @reuse('layout', LayoutView)
    view = @reuse('foo', FooView)
    Home%&>%Foo%ͷભҠͰ%Layout%͸ফ͑ͳ͍
    

    View Slide

14. ComposerͲ͏ͳͷ
    • ϝϦοτ
    • ࠩ෼؅ཧͰը໘ͷߏங͕଎͍
    • σϝϦοτ
    • ʮΠϯελϯε͕Ҿ͖ܧ͕Ε͍ͯΔʯͱ͍͏ͷΛҙࣝ͠ͳ͍
    ͱ੝େʹόάΔ
    • ΠϕϯτίʔϧόοΫෳ਺ճషͬͯͨΓɺ೉͍͠…
    

    View Slide

15. ൪֎
    ʮdispose࣋ͬͯΔΠϯελϯεΛreuse͢ΔͱɺભҠͯ͠࢖Θͳ
    ͍࣌ʹࣺͯΔʯͱ͍͏࢓૊Έ͚ͩਅࣅͨ͠ϧʔλʔ࡞ͬͨ
    h"ps:/
    /github.com/mizchi/warden
    ओʹvue.js༻ɻझຯϓϩμΫτͰ࢖ͬͯΔ͚Ͳศརɻ
    

    View Slide

16. Generator
    

    View Slide

17. Generator
    • paulmillr/scaffolt
    • Railsͷscaffoldͱࣅͨײ͡
    • σΟϨΫτϦن໿͕͔ͬ͠Γ͋Δ͔Β࣮ݱͰ͖Δ
    • handlebars1Ͱίʔυͷ਽ܗΛॻ͍ͯੜ੒
    

    View Slide

18. Generatorͷ࢖༻ྫ
    ~/s/mizchi-bwd (master) $ scaffolt scaffold foo
    11 Jul 16:36:34 - info: init app/templates/foo
    11 Jul 16:36:34 - info: create app/templates/foo/foo.jade
    11 Jul 16:36:34 - info: create app/controllers/foo-controller.coffee
    11 Jul 16:36:34 - info: create test/controllers/foo-controller-test.coffee
    11 Jul 16:36:34 - info: init app/view-models/foo
    11 Jul 16:36:34 - info: init test/view-models/foo
    11 Jul 16:36:34 - info: init app/views/foo
    11 Jul 16:36:34 - info: init test/views/foo
    11 Jul 16:36:34 - info: init app/styles/foo
    11 Jul 16:36:34 - info: create app/view-models/foo/foo-view-model.coffee
    11 Jul 16:36:34 - info: create test/view-models/foo/foo-view-model-test.coffee
    11 Jul 16:36:34 - info: create app/views/foo/foo-view.coffee
    11 Jul 16:36:34 - info: create test/views/foo/foo-view-test.coffee
    11 Jul 16:36:34 - info: create app/styles/foo/foo.sass
    

    View Slide

19. GeneratorͲ͏ͳͷ
    • ͱʹ͔͘MV*ͳΜͨΒ΍ΔͱϑΝΠϧ͕૿͑Δ
    • େ͖ͳϓϩδΣΫτͳΒ਽ܗඞਢ
    • ࣮͸Chaplinͱؔ܎ͳ͍ͷͰಠཱͯ͠࢖ͬͯ΋Α͍
    • ϑΥʔΫͨ͠,mizchi/scaffolt,࢖͏ͱແݶʹҾ਺ͱΕͯศར
    

    View Slide

20. Collec&onView
    

    View Slide

21. Collec&onView
    • Backbone.Collec-onʹରԠͯ͠ViewΛੜ੒͢Δ
    • ৄ͘͠͸ઌि࿩ͨ͠ࢿྉΈ͍ͯͩ͘͞
    • ʮ͓લࣗ෼ͪͷϖʔδϟUI͕ຊ౰ʹ଎͍ͱࢥͬͯΜͷʁ3ʯͰ
    ݕࡧ
    

    View Slide

22. Collec&onViewͲ͏ͳͷ(ཁ໿)
    • Collec'onૢ࡞ͰView͕ੜ੒͞Εͯศར
    • ϦετϏϡʔ͕ωετͨ͠৔߹ɺ؅ཧ͕ࠔ೉
    

    View Slide

23. Brunch
    

    View Slide

24. Brunch
    • ΢ΣϒΞϓϦέʔγϣϯʹಛԽͨ͠Ϗϧυϥϯφʔ
    ―#common.js෩ͷrequire#+#֦ுࢠʹΑΔࣗಈల։
    • npmͰ֦ுࢠʹԠͨ͡ϓϥάΠϯೖΕΔ#or#ॻ͘
    • ࣮͸Chaplinͱؔ܎ͳ͍(͚Ͳεέϧτϯ͕͜ΕͰॻ͔ΕͯΔͷͰ
    ࢖͏ͱָ)
    

    View Slide

25. BrunchͲ͏ͳͷ
    • Grunt/Gulpʹ৐͔ͬΕͳ͍ͷ͕ਏ͍
    • ϓϥάΠϯ͍͍ͩͨॻ͔ͳ͍ͱ͍͚ͳ͍
    • ࠷ۙ͸Gulpʹ͠·ͨ͠
    

    View Slide

26. chaplin.jsͷਏ͍఺
    • ྑ͘΋ѱ͘΋paulmillrϫʔϧυ
    • brunch
    • scaffolt
    • ಠࣗcommon.js
    • શମతʹγϯάϧτϯͷmediatorʹີ݁߹Ͱ୯ମςετࠔ೉
    • ࡞ऀ͋Μ·Γςετͯ͠ͳͦ͞͏ͳͷͰؾ͍ͮͯͳ͍…
    

    View Slide

27. ࣮ӡ༻ͰͷChaplin.jsͷ֦ு
    

    View Slide

28. MVVM෩ʹσʔλόΠϯυ͢Δʂ
    • ViewʹmodelҾ਺͕ͳ͍৔߹ɺۭͷϞσϧΛࣗಈੜ੒
    • ίϯτϩʔϥ͔ΒϏϡʔϞσϧૢ࡞
    • ੲ͜͏͍͏ͷΛॻ͍ͨͷͰࢀߟʹ
    • ʮBackboneͰσʔλόΠϯσΟϯάΛ࢖ͬͯMVVMΛ͢Δϑ
    ϩϯτΤϯυΞʔΩςΫνϟʯ
    

    View Slide

29. Backbone.s+ckit
    • NYT੡BackboneσʔλόΠϯυ
    • NYTimes/backbone.s2ckit
    bindings: {
    '#album': {
    observe: 'Tomorrow\'s Harvest',
    destroy: function($el, model, options) {
    // Tear down any events or clean up.
    }
    }
    }
    

    View Slide

30. mocha&phantomjs,Ͱςετ
    • ViewͱModel͸ςετॻ͍ͨ
    • Controller͸γϯάϧτϯͱີ݁߹͍ͯͯ͠ఘΊͨ
    

    View Slide

31. Chaplin͔Βಘֶͨͼ
    • σΟϨΫτϦߏ੒౳ͷن໿࡞ͬͯδΣωϨʔλʔॻ͚͹։ൃര
    ଎
    • Ϣχοτςετ͸ϑϨʔϜϫʔΫͱີ݁߹͢ΔͷͰϑϨʔϜϫ
    ʔΫબఆʹӨڹ͢Δ
    • ϦετϏϡʔΛ؆୯ʹॻ͚ΔϑϨʔϜϫʔΫ͸Ғ͍
    

    View Slide

32. ChaplinΛ࠾༻͢ΔՁ஋͕͋Δέʔε
    • RailsΤϯδχΞ͕ଟ͍
    • Backbone͕෺଍Γͳ͍
    

    View Slide

33. ࣍ͷϓϩδΣΫτ͸ʁ
    • ࣗ෼͸Backbone/Chaplin๞͖ͨͷͰ0vue.js0͔0react.js0Ͱ͢
    

    View Slide

34. ͓͠·͍
    

    View Slide