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.7k
Chaplin.jsの話 #ten1club
Chaplinの話!!!
Koutarou Chikuba
July 11, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
120
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.3k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The World Runs on Bad Software
bkeepers
PRO
70
11k
RailsConf 2023
tenderlove
30
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Building an army of robots
kneath
306
46k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLとの向き合い方2022年版
quramy
49
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
How GitHub (no longer) Works
holman
315
140k
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Ͱ͢
͓͠·͍