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
1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.8k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.1k
CSR / SSR / SSGの動向2020
shibe97
2
1.5k
Jamstack×microCMS 実装編
shibe97
4
870
SentryでSPAのエラーログを収集する
shibe97
1
1.6k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.7k
Other Decks in Technology
See All in Technology
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
960
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
510
Taming you application's environments
salaboy
0
180
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
Designing for humans not robots
tammielis
250
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Navigating Team Friction
lara
183
14k
Code Review Best Practice
trishagee
64
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Rails Girls Zürich Keynote
gr2m
94
13k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Teambox: Starting and Learning
jrom
133
8.8k
Agile that works and the tools we love
rasmusluckow
327
21k
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 :)