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
6k
今、改めて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.2k
SvelteKitでJamstackを試す
shibe97
1
1.2k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.9k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.6k
Jamstack×microCMS 実装編
shibe97
4
970
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
160
フロントエンドエンジニアのキャリアパス
shibe97
9
3.9k
Other Decks in Technology
See All in Technology
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
260
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Android Audio: Beyond Winning On It
atsushieno
0
110
Obsidian応用活用術
onikun94
2
490
Agile PBL at New Grads Trainings
kawaguti
PRO
1
420
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.7k
S3アクセス制御の設計ポイント
tommy0124
3
200
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
160
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
280
Featured
See All Featured
Scaling GitHub
holman
463
140k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
How to Ace a Technical Interview
jacobian
279
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bash Introduction
62gerente
615
210k
The Language of Interfaces
destraynor
161
25k
Optimizing for Happiness
mojombo
379
70k
Context Engineering - Making Every Token Count
addyosmani
2
40
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Six Lessons from altMBA
skipperchong
28
4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
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 :)