Chaplin.jsの話 #ten1club

Chaplinの話！！！

1. Chaplin.jsͷ࿩ @mizchi'/'#ten1club
3. ࣗݾ঺ry#͙͙Ε
4. Chaplin.jsͱ͸ • paulmillr࡞ͷBackbone֦ுܥMVCϥΠϒϥϦ • paulmillrࢯɺAc4vity͕ଟ͍ͷͰ͍ΖΜͳͱ͜ͰݟΔ • Rails෩ͷઃܭͰSPA૊ΊΔ
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ʮ෩ʯͰ͋ͬͯͦͷ΋ͷͰ͸ͳ͍
6. ࣗ෼ͱChaplin.js • ϓϩμΫγϣϯͰ2ϓϩδΣΫτͰ࢖༻ • ศརͳ൒໘ෆຬ΋͋Δ • ෺଍Γͳ֦ͯ͘ுͯ͠࢖ͬͯΔ
7. ࠓ೔͠Ό΂Δ͜ͱ • ओʹBackboneʹͳ͍ػೳʹ͍ͭͯ • ViewͱModel͸ࢮ׆؅ཧ͞ΕͯΔ͜ͱҎ֎Ұॹ
8. Chaplinͷઃܭ
10. ಛ௕ • Rails෩Router • Πϯελϯεͷੜ੒/ഁغΛ؅ཧ͢ΔComposer • ಛԽͨ͠ϏϧυγεςϜ(brunch) • Rails෩εΩϟϑΥϧσΟϯά(scaffolt)
11. Composer
12. Composer • Controllerͱڠௐͯ͠Πϯελϯε؅ཧ͢Δ • ϧʔςΟϯάΞΫγϣϯຖʹ͋ΒΏΔΠϯελϯεͷdispose͕ ݺ͹ΕΔ • Controllerͷ੾ΓସΘΓલޙͰ-reuse-ͨ͠΋ͷ͸Ҿ͖ܧ͕ΕΔ
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%͸ফ͑ͳ͍
14. ComposerͲ͏ͳͷ • ϝϦοτ • ࠩ෼؅ཧͰը໘ͷߏங͕଎͍ • σϝϦοτ • ʮΠϯελϯε͕Ҿ͖ܧ͕Ε͍ͯΔʯͱ͍͏ͷΛҙࣝ͠ͳ͍ ͱ੝େʹόάΔ • ΠϕϯτίʔϧόοΫෳ਺ճషͬͯͨΓɺ೉͍͠…
15. ൪֎ ʮdispose࣋ͬͯΔΠϯελϯεΛreuse͢ΔͱɺભҠͯ͠࢖Θͳ ͍࣌ʹࣺͯΔʯͱ͍͏࢓૊Έ͚ͩਅࣅͨ͠ϧʔλʔ࡞ͬͨ h"ps:/ /github.com/mizchi/warden ओʹvue.js༻ɻझຯϓϩμΫτͰ࢖ͬͯΔ͚Ͳศརɻ
16. Generator
17. Generator • paulmillr/scaffolt • Railsͷscaffoldͱࣅͨײ͡ • σΟϨΫτϦن໿͕͔ͬ͠Γ͋Δ͔Β࣮ݱͰ͖Δ • handlebars1Ͱίʔυͷ਽ܗΛॻ͍ͯੜ੒
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
19. GeneratorͲ͏ͳͷ • ͱʹ͔͘MV*ͳΜͨΒ΍ΔͱϑΝΠϧ͕૿͑Δ • େ͖ͳϓϩδΣΫτͳΒ਽ܗඞਢ • ࣮͸Chaplinͱؔ܎ͳ͍ͷͰಠཱͯ͠࢖ͬͯ΋Α͍ • ϑΥʔΫͨ͠,mizchi/scaffolt,࢖͏ͱແݶʹҾ਺ͱΕͯศར
20. Collec&onView
21. Collec&onView • Backbone.Collec-onʹରԠͯ͠ViewΛੜ੒͢Δ • ৄ͘͠͸ઌि࿩ͨ͠ࢿྉΈ͍ͯͩ͘͞ • ʮ͓લࣗ෼ͪͷϖʔδϟUI͕ຊ౰ʹ଎͍ͱࢥͬͯΜͷʁ3ʯͰ ݕࡧ
22. Collec&onViewͲ͏ͳͷ(ཁ໿) • Collec'onૢ࡞ͰView͕ੜ੒͞Εͯศར • ϦετϏϡʔ͕ωετͨ͠৔߹ɺ؅ཧ͕ࠔ೉
23. Brunch
24. Brunch • ΢ΣϒΞϓϦέʔγϣϯʹಛԽͨ͠Ϗϧυϥϯφʔ ―#common.js෩ͷrequire#+#֦ுࢠʹΑΔࣗಈల։ • npmͰ֦ுࢠʹԠͨ͡ϓϥάΠϯೖΕΔ#or#ॻ͘ • ࣮͸Chaplinͱؔ܎ͳ͍(͚Ͳεέϧτϯ͕͜ΕͰॻ͔ΕͯΔͷͰ ࢖͏ͱָ)
25. BrunchͲ͏ͳͷ • Grunt/Gulpʹ৐͔ͬΕͳ͍ͷ͕ਏ͍ • ϓϥάΠϯ͍͍ͩͨॻ͔ͳ͍ͱ͍͚ͳ͍ • ࠷ۙ͸Gulpʹ͠·ͨ͠
26. chaplin.jsͷਏ͍఺ • ྑ͘΋ѱ͘΋paulmillrϫʔϧυ • brunch • scaffolt • ಠࣗcommon.js • શମతʹγϯάϧτϯͷmediatorʹີ݁߹Ͱ୯ମςετࠔ೉ • ࡞ऀ͋Μ·Γςετͯ͠ͳͦ͞͏ͳͷͰؾ͍ͮͯͳ͍…
27. ࣮ӡ༻ͰͷChaplin.jsͷ֦ு
28. MVVM෩ʹσʔλόΠϯυ͢Δʂ • ViewʹmodelҾ਺͕ͳ͍৔߹ɺۭͷϞσϧΛࣗಈੜ੒ • ίϯτϩʔϥ͔ΒϏϡʔϞσϧૢ࡞ • ੲ͜͏͍͏ͷΛॻ͍ͨͷͰࢀߟʹ • ʮBackboneͰσʔλόΠϯσΟϯάΛ࢖ͬͯMVVMΛ͢Δϑ ϩϯτΤϯυΞʔΩςΫνϟʯ
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. } } }
30. mocha&phantomjs,Ͱςετ • ViewͱModel͸ςετॻ͍ͨ • Controller͸γϯάϧτϯͱີ݁߹͍ͯͯ͠ఘΊͨ
31. Chaplin͔Βಘֶͨͼ • σΟϨΫτϦߏ੒౳ͷن໿࡞ͬͯδΣωϨʔλʔॻ͚͹։ൃര ଎ • Ϣχοτςετ͸ϑϨʔϜϫʔΫͱີ݁߹͢ΔͷͰϑϨʔϜϫ ʔΫબఆʹӨڹ͢Δ • ϦετϏϡʔΛ؆୯ʹॻ͚ΔϑϨʔϜϫʔΫ͸Ғ͍
32. ChaplinΛ࠾༻͢ΔՁ஋͕͋Δέʔε • RailsΤϯδχΞ͕ଟ͍ • Backbone͕෺଍Γͳ͍
33. ࣍ͷϓϩδΣΫτ͸ʁ • ࣗ෼͸Backbone/Chaplin๞͖ͨͷͰ0vue.js0͔0react.js0Ͱ͢
34. ͓͠·͍