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
今、改めてBackboneを評価する
Search
Kazuki Shibata
May 27, 2015
Technology
11
5.9k
今、改めてBackboneを評価する
2015/05/27 Data Binding JS Night
Kazuki Shibata
May 27, 2015
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
1.1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.9k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
960
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
160
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Other Decks in Technology
See All in Technology
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
340
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
150
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.3k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
290
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
140
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
300
2025-06-26 GitHub CopilotとAI駆動開発:実践と導入のリアル
fl_kawachi
1
240
OPENLOGI Company Profile for engineer
hr01
1
33k
AI専用のリンターを作る #yumemi_patch
bengo4com
3
1.7k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
840
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Unsuck your backbone
ammeep
671
58k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
524
40k
A designer walks into a library…
pauljervisheath
207
24k
Practical Orchestrator
shlominoach
188
11k
Transcript
ࠓɺվΊͯBackboneΛධՁ͢Δ @shibe97 2015/05/27 Data Binding JS Night
ࣗݾհ ࣲా ف (@shibe97) ࣄ ಛٕ σβΠφʔ݉ϑϩϯτΤϯυΤϯδχΞɻ ࣾͰࠂͷೖߘπʔϧΛ࡞͍ͬͯ·͢ɻ ϒϨΠΫμϯεɻ
None
Backbone.jsͱ • ܰྔͷMV*ϥΠϒϥϦ • jQuery, underscore.jsʹґଘ • Model, Collection, View,
Router, HistoryΛఏڙ • requireΘͳ͍ͱɺάϩʔόϧԚછ͢Δ • σʔλόΠϯσΟϯάखಈͰߦͳ͏
Angularͷ಄ • Α͘Angularͱൺֱ͞Ε͍ͯͨ • AngularํόΠϯσΟϯά͕͋Δ͔Β ͍͍ΑͶ • Backboneશ෦खಈͰॻ͘ͷେมͩΑͶ • ৽͍͠ͷ৮Γ͍ͨΑͶʢצʣ
͔͠͠ɺࠓ • Angular2ํσʔλόΠϯσΟϯάΛ ΊΔ • React͕άϯάϯདྷͯΔ • αʔόαΠυϨϯμϦϯάɺvirtual DOM͕ དྷͯΔ
֤ϑϨʔϜϫʔΫൺֱ ग़యɿhttps://roost.bocoup.com/2015/austin/blog/why-backbone/
ͱΓ͋͑ͣσʔλόΠϯσΟϯάͷ
ͦͦ σʔλόΠϯσΟϯάඞཁͳͷ͔ʁ
σʔλόΠϯσΟϯάͷඞཁੑ ʢݸਓతݟղʣ • Model͔ΒViewͷө͋ͬͨํ͕ྑ͍ͱࢥ͏ • View͔ΒModelͷө߹ʹΑͬͯ ແ͍ํ͕Γ͍͢ • ฤूը໘ͳͲͰଈ࣌ө͞ΕͯࠔΔ •
ʹΑͬͯόΠϯσΟϯάͨ͘͠ͳ͔ͬͨΓ ͢Δ
σʔλόΠϯσΟϯάͷํ๏
Backbone.jsͷΈͷ߹
View -> Model var SomeView = Backbone.View.extend({ events:
{ "click .button" : "changeState" }, changeState: function(e){ this.model.set("item", $(e.target).val()); } });
Model -> View var SomeView = Backbone.View.extend({ initialize:
function(){ this.model.on("change", this.render); }, render: function(){ $(this.el).empty().html( _.template( $("#template").html(), this.model.toJSON() ) ); } });
खಈόΠϯσΟϯάπϥ͍
खಈόΠϯσΟϯάπϥ͍ • ྔ͕૿͑ͯ͘Δͱ͔͍ͬ • σʔλͷྲྀΕ͕ҙຯෆ໌ʹͳΓ͕ͪ • ͤΊͯrender͚ͩͰࣗಈԽͯ͠΄͍͠…
None
Marionette.jsͱ • Backbone.jsͷϓϥάΠϯ • ओʹView·ΘΓͷػೳ͕֦ு͞ΕΔ • Regionػೳ • Moduleػೳ
Marionette.jsʹΑΔίϯϙʔωϯτࢥߟ • Marionette.jsʹRegionͱ ͍͏Έ͕͋Δ • ྖҬΛ࡞ͬͯɺͦ͜ʹView ΛቕΊࠐΜͰ͍͘ͷ • ͜ΕReactͷ ίϯϙʔωϯτͷ߹ʹ
ࣅ͍ͯΔ
Backbone.js + Marionette.js ! ͷ߹
Model -> View (Marionette) var SomeView = Marionette.ItemView.extend({
modelEvents: { "change": "render" } });
Model -> View (ൺֱ༻Backbone) var SomeView = Backbone.View.extend({
initialize: function(){ this.model.on("change", this.render); }, render: function(){ $(this.el).empty().html( _.template( $("#template").html(), this.model.toJSON() ) ); } });
ѱ͘ͳ͍
ϩΰ͕ͳ͍ͷͰNYTimesͷΛ…
Stickit.jsͱ • Backbone.jsͷϓϥάΠϯ • σʔλόΠϯσΟϯά·ΘΓͷػೳڧԽ • ยํόΠϯσΟϯά • ํόΠϯσΟϯά
Viewؙ͝ͱͷ࠶ඳըΛͤ͞ͳ͍ • ೖྗΛଈ࣌ө͍ͤͨ͞UIͰ ೖྗ͢ΔͨͼʹView͕࠶ඳը͞Εͯ͠·͍ ΧʔιϧΞτͯ͠͠·͏ • stickitͦΕΛ͍Ͱ͘ΕΔ
Backbone.js + Marionette.js + Stickit.js ! ͷ߹
Model <-> View (Marionette+Stickit) var SomeView = Marionette.ItemView.extend({
bindings: { "#item": "item" }, onRender: function(){ this.stickit(); } });
Model <-> View (ൺֱ༻Backbone) var SomeView = Backbone.View.extend({
initialize: function(){ this.model.on("change", this.render); }, events: { "click .button" : "changeState" }, changeState: function(e){ this.model.set("item", $(e.target).val()); }, render: function(){ $(this.el).empty().html( _.template( $("#template").html(), this.model.toJSON() ) ); } });
ྑ͍ײ͡
Backboneͷ͜Ε͔Β
Backboneͷ͜Ε͔Β • ͓ͦΒ͘Backbone.jsେ͖͘มΘΒͳ͍ͣ • ͦΕ͕BackboneͷҰ൪ͷϝϦοτͩͱࢥ͏ • ഁյతͳมߋ =>શ໘ϦχϡʔΞϧେมͱ͍͏ҙຯͰ • Marionette.jsଆͰɺvirtualDOMͳͲͷͪΒ΄Βग़͍ͯΔ
͚Ͳɺ·ͩٞதͱ͍͏ײ͡ • Backbone + React ͳͲͰɺϞδϡʔϧ୯ҐͰΘΕΔ͜ͱ ݁ߏ͋Γͦ͏
BackboneͱFluxͷؔ • ಛʹ੍ͳ͍ͨΊɺ FluxͷΑ͏ʹσʔλͷྲྀΕΛҰํʹ͢Δ͜ͱՄೳ • View -> Controller -> Model
-> View -> … • ViewͰϢʔβʔΠϕϯτΛ͔ͭΈɺ ͔ͦ͜ΒApp.vent.trigger(…)ͰControllerʹ͑ɺ Controller͕֘ModelʹมߋΛՃ͑Δ • Marionette͕ఏڙ͍ͯ͠ΔControllerԿͷׂ͍࣋ͬͯͳ͍ͷͰɺ ͦΕΛFlux෩ʹҙຯ͚ͯ͋͛͠Ε͍͚ͦ͏
݁
σʔλͷྲྀΕ͕ҰํʹͳΔΑ͏ʹ όΠϯσΟϯάยํ͕ྑͦ͞͏ (Model -> View)
Thank you :)