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

Chaplin.jsの話 #ten1club

Koutarou Chikuba
July 11, 2014
7.5k

Chaplin.jsの話 #ten1club

Chaplinの話!!!

Koutarou Chikuba

July 11, 2014
Tweet

Transcript

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

    View full-size slide

  2. ࣗݾ঺ry#͙͙Ε

    View full-size slide

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

    View full-size slide

  4. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Chaplinͷઃܭ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. Collec&onView

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. Chaplin͔Βಘֶͨͼ
    • σΟϨΫτϦߏ੒౳ͷن໿࡞ͬͯδΣωϨʔλʔॻ͚͹։ൃര

    • Ϣχοτςετ͸ϑϨʔϜϫʔΫͱີ݁߹͢ΔͷͰϑϨʔϜϫ
    ʔΫબఆʹӨڹ͢Δ
    • ϦετϏϡʔΛ؆୯ʹॻ͚ΔϑϨʔϜϫʔΫ͸Ғ͍

    View full-size slide

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

    View full-size slide

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

    View full-size slide