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
950
SentryでSPAのエラーログを収集する
shibe97
1
1.7k
useRefについて調べてみた
shibe97
1
150
フロントエンドエンジニアのキャリアパス
shibe97
9
3.8k
Other Decks in Technology
See All in Technology
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
Digitization部 紹介資料
sansan33
PRO
1
4k
libsyncrpcってなに?
uhyo
0
240
Text-to-SQLの評価データセットを作って最新LLMモデルの性能評価をしてみた
gotalab555
2
390
Spring for GraphQLって実際どうなの?〜小規模スタートアップの事例紹介〜
kogayushi
0
160
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
6.7k
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.4k
AIエージェントのフレームワークを見るときの個人的注目ポイント
os1ma
1
170
從開發到架構設計的可觀測性實踐
philipz
0
190
Go Connectへの想い
chiroruxx
0
140
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.3k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
270
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Unsuck your backbone
ammeep
671
58k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Automating Front-end Workflow
addyosmani
1370
200k
Balancing Empowerment & Direction
lara
1
100
Measuring & Analyzing Core Web Vitals
bluesmoon
7
470
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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 :)