Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Chaplin.jsの話 #ten1club
Search
Koutarou Chikuba
July 11, 2014
3
7.6k
Chaplin.jsの話 #ten1club
Chaplinの話!!!
Koutarou Chikuba
July 11, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
14
4.3k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6k
V8 as a container on CDN Edge worker
mizchi
5
1.7k
Edge Side Frontend という新領域
mizchi
33
13k
バンドル最適化マニアクス at tfconf
mizchi
7
3.9k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.2k
「フロントエンド領域」を再定義する
mizchi
50
35k
光を超えるためのフロントエンドアーキテクチャ
mizchi
84
21k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
30
4.1k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
24
1.7k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
77
5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Clear Off the Table
cherdarchuk
86
310k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Music & Morning Musume
bryan
42
5.7k
The Cult of Friendly URLs
andyhume
74
5.7k
Transcript
Chaplin.jsͷ @mizchi'/'#ten1club
None
ࣗݾry#͙͙Ε
Chaplin.jsͱ • paulmillr࡞ͷBackbone֦ுܥMVCϥΠϒϥϦ • paulmillrࢯɺAc4vity͕ଟ͍ͷͰ͍ΖΜͳͱ͜ͰݟΔ • Rails෩ͷઃܭͰSPAΊΔ
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ʮ෩ʯͰ͋ͬͯͦͷͷͰͳ͍
ࣗͱChaplin.js • ϓϩμΫγϣϯͰ2ϓϩδΣΫτͰ༻ • ศརͳ໘ෆຬ͋Δ • Γͳ֦ͯ͘ுͯͬͯ͠Δ
ࠓ͠ΌΔ͜ͱ • ओʹBackboneʹͳ͍ػೳʹ͍ͭͯ • ViewͱModelࢮ׆ཧ͞ΕͯΔ͜ͱҎ֎Ұॹ
Chaplinͷઃܭ
None
ಛ • Rails෩Router • Πϯελϯεͷੜ/ഁغΛཧ͢ΔComposer • ಛԽͨ͠ϏϧυγεςϜ(brunch) • Rails෩εΩϟϑΥϧσΟϯά(scaffolt)
Composer
Composer • Controllerͱڠௐͯ͠Πϯελϯεཧ͢Δ • ϧʔςΟϯάΞΫγϣϯຖʹ͋ΒΏΔΠϯελϯεͷdispose͕ ݺΕΔ • ControllerͷΓସΘΓલޙͰ-reuse-ͨ͠ͷҾ͖ܧ͕ΕΔ
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%ফ͑ͳ͍
ComposerͲ͏ͳͷ • ϝϦοτ • ࠩཧͰը໘ͷߏங͕͍ • σϝϦοτ • ʮΠϯελϯε͕Ҿ͖ܧ͕Ε͍ͯΔʯͱ͍͏ͷΛҙࣝ͠ͳ͍ ͱେʹόάΔ
• ΠϕϯτίʔϧόοΫෳճషͬͯͨΓɺ͍͠…
൪֎ ʮdispose࣋ͬͯΔΠϯελϯεΛreuse͢ΔͱɺભҠͯ͠Θͳ ͍࣌ʹࣺͯΔʯͱ͍͏Έ͚ͩਅࣅͨ͠ϧʔλʔ࡞ͬͨ h"ps:/ /github.com/mizchi/warden ओʹvue.js༻ɻझຯϓϩμΫτͰͬͯΔ͚Ͳศརɻ
Generator
Generator • paulmillr/scaffolt • Railsͷscaffoldͱࣅͨײ͡ • σΟϨΫτϦن͕͔ͬ͠Γ͋Δ͔Β࣮ݱͰ͖Δ • handlebars1ͰίʔυͷܗΛॻ͍ͯੜ
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
GeneratorͲ͏ͳͷ • ͱʹ͔͘MV*ͳΜͨΒΔͱϑΝΠϧ͕૿͑Δ • େ͖ͳϓϩδΣΫτͳΒܗඞਢ • ࣮Chaplinͱؔͳ͍ͷͰಠཱͯͬͯ͠Α͍ • ϑΥʔΫͨ͠,mizchi/scaffolt,͏ͱແݶʹҾͱΕͯศར
Collec&onView
Collec&onView • Backbone.Collec-onʹରԠͯ͠ViewΛੜ͢Δ • ৄ͘͠ઌिͨ͠ࢿྉΈ͍ͯͩ͘͞ • ʮ͓લࣗͪͷϖʔδϟUI͕ຊʹ͍ͱࢥͬͯΜͷʁ3ʯͰ ݕࡧ
Collec&onViewͲ͏ͳͷ(ཁ) • Collec'onૢ࡞ͰView͕ੜ͞Εͯศར • ϦετϏϡʔ͕ωετͨ͠߹ɺཧ͕ࠔ
Brunch
Brunch • ΣϒΞϓϦέʔγϣϯʹಛԽͨ͠Ϗϧυϥϯφʔ ―#common.js෩ͷrequire#+#֦ுࢠʹΑΔࣗಈల։ • npmͰ֦ுࢠʹԠͨ͡ϓϥάΠϯೖΕΔ#or#ॻ͘ • ࣮Chaplinͱؔͳ͍(͚Ͳεέϧτϯ͕͜ΕͰॻ͔ΕͯΔͷͰ ͏ͱָ)
BrunchͲ͏ͳͷ • Grunt/Gulpʹ͔ͬΕͳ͍ͷ͕ਏ͍ • ϓϥάΠϯ͍͍ͩͨॻ͔ͳ͍ͱ͍͚ͳ͍ • ࠷ۙGulpʹ͠·ͨ͠
chaplin.jsͷਏ͍ • ྑ͘ѱ͘paulmillrϫʔϧυ • brunch • scaffolt • ಠࣗcommon.js •
શମతʹγϯάϧτϯͷmediatorʹີ݁߹Ͱ୯ମςετࠔ • ࡞ऀ͋Μ·Γςετͯ͠ͳͦ͞͏ͳͷͰؾ͍ͮͯͳ͍…
࣮ӡ༻ͰͷChaplin.jsͷ֦ு
MVVM෩ʹσʔλόΠϯυ͢Δʂ • ViewʹmodelҾ͕ͳ͍߹ɺۭͷϞσϧΛࣗಈੜ • ίϯτϩʔϥ͔ΒϏϡʔϞσϧૢ࡞ • ੲ͜͏͍͏ͷΛॻ͍ͨͷͰࢀߟʹ • ʮBackboneͰσʔλόΠϯσΟϯάΛͬͯMVVMΛ͢Δϑ ϩϯτΤϯυΞʔΩςΫνϟʯ
Backbone.s+ckit • NYTBackboneσʔλόΠϯυ • NYTimes/backbone.s2ckit bindings: { '#album': { observe:
'Tomorrow\'s Harvest', destroy: function($el, model, options) { // Tear down any events or clean up. } } }
mocha&phantomjs,Ͱςετ • ViewͱModelςετॻ͍ͨ • Controllerγϯάϧτϯͱີ݁߹͍ͯͯ͠ఘΊͨ
Chaplin͔Βಘֶͨͼ • σΟϨΫτϦߏͷن࡞ͬͯδΣωϨʔλʔॻ͚։ൃര • ϢχοτςετϑϨʔϜϫʔΫͱີ݁߹͢ΔͷͰϑϨʔϜϫ ʔΫબఆʹӨڹ͢Δ • ϦετϏϡʔΛ؆୯ʹॻ͚ΔϑϨʔϜϫʔΫҒ͍
ChaplinΛ࠾༻͢ΔՁ͕͋Δέʔε • RailsΤϯδχΞ͕ଟ͍ • Backbone͕Γͳ͍
࣍ͷϓϩδΣΫτʁ • ࣗBackbone/Chaplin͖ͨͷͰ0vue.js0͔0react.js0Ͱ͢
͓͠·͍