Slide 1
Slide 1 text
ࠓɺվΊͯBackboneΛධՁ͢Δ
@shibe97
2015/05/27 Data Binding JS Night
Slide 2
Slide 2 text
ࣗݾհ
ࣲా ف (@shibe97)
ࣄ
ಛٕ
σβΠφʔ݉ϑϩϯτΤϯυΤϯδχΞɻ
ࣾͰࠂͷೖߘπʔϧΛ࡞͍ͬͯ·͢ɻ
ϒϨΠΫμϯεɻ
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Backbone.jsͱ
• ܰྔͷMV*ϥΠϒϥϦ
• jQuery, underscore.jsʹґଘ
• Model, Collection, View, Router, HistoryΛఏڙ
• requireΘͳ͍ͱɺάϩʔόϧԚછ͢Δ
• σʔλόΠϯσΟϯάखಈͰߦͳ͏
Slide 5
Slide 5 text
Angularͷ಄
• Α͘Angularͱൺֱ͞Ε͍ͯͨ
• AngularํόΠϯσΟϯά͕͋Δ͔Β
͍͍ΑͶ
• Backboneશ෦खಈͰॻ͘ͷେมͩΑͶ
• ৽͍͠ͷ৮Γ͍ͨΑͶʢצʣ
Slide 6
Slide 6 text
͔͠͠ɺࠓ
• Angular2ํσʔλόΠϯσΟϯάΛ
ΊΔ
• React͕άϯάϯདྷͯΔ
• αʔόαΠυϨϯμϦϯάɺvirtual DOM͕
དྷͯΔ
Slide 7
Slide 7 text
֤ϑϨʔϜϫʔΫൺֱ
ग़యɿhttps://roost.bocoup.com/2015/austin/blog/why-backbone/
Slide 8
Slide 8 text
ͱΓ͋͑ͣσʔλόΠϯσΟϯάͷ
Slide 9
Slide 9 text
ͦͦ
σʔλόΠϯσΟϯάඞཁͳͷ͔ʁ
Slide 10
Slide 10 text
σʔλόΠϯσΟϯάͷඞཁੑ
ʢݸਓతݟղʣ
• Model͔ΒViewͷө͋ͬͨํ͕ྑ͍ͱࢥ͏
• View͔ΒModelͷө߹ʹΑͬͯ
ແ͍ํ͕Γ͍͢
• ฤूը໘ͳͲͰଈ࣌ө͞ΕͯࠔΔ
• ʹΑͬͯόΠϯσΟϯάͨ͘͠ͳ͔ͬͨΓ
͢Δ
Slide 11
Slide 11 text
σʔλόΠϯσΟϯάͷํ๏
Slide 12
Slide 12 text
Backbone.jsͷΈͷ߹
Slide 13
Slide 13 text
View -> Model
var
SomeView
=
Backbone.View.extend({
events:
{
"click
.button"
:
"changeState"
},
changeState:
function(e){
this.model.set("item",
$(e.target).val());
}
});
Slide 14
Slide 14 text
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()
)
);
}
});
Slide 15
Slide 15 text
खಈόΠϯσΟϯάπϥ͍
Slide 16
Slide 16 text
खಈόΠϯσΟϯάπϥ͍
• ྔ͕૿͑ͯ͘Δͱ͔͍ͬ
• σʔλͷྲྀΕ͕ҙຯෆ໌ʹͳΓ͕ͪ
• ͤΊͯrender͚ͩͰࣗಈԽͯ͠΄͍͠…
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Marionette.jsͱ
• Backbone.jsͷϓϥάΠϯ
• ओʹView·ΘΓͷػೳ͕֦ு͞ΕΔ
• Regionػೳ
• Moduleػೳ
Slide 19
Slide 19 text
Marionette.jsʹΑΔίϯϙʔωϯτࢥߟ
• Marionette.jsʹRegionͱ
͍͏Έ͕͋Δ
• ྖҬΛ࡞ͬͯɺͦ͜ʹView
ΛቕΊࠐΜͰ͍͘ͷ
• ͜ΕReactͷ
ίϯϙʔωϯτͷ߹ʹ
ࣅ͍ͯΔ
Slide 20
Slide 20 text
Backbone.js + Marionette.js
!
ͷ߹
Slide 21
Slide 21 text
Model -> View (Marionette)
var
SomeView
=
Marionette.ItemView.extend({
modelEvents:
{
"change":
"render"
}
});
Slide 22
Slide 22 text
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()
)
);
}
});
Slide 23
Slide 23 text
ѱ͘ͳ͍
Slide 24
Slide 24 text
ϩΰ͕ͳ͍ͷͰNYTimesͷΛ…
Slide 25
Slide 25 text
Stickit.jsͱ
• Backbone.jsͷϓϥάΠϯ
• σʔλόΠϯσΟϯά·ΘΓͷػೳڧԽ
• ยํόΠϯσΟϯά
• ํόΠϯσΟϯά
Slide 26
Slide 26 text
Viewؙ͝ͱͷ࠶ඳըΛͤ͞ͳ͍
• ೖྗΛଈ࣌ө͍ͤͨ͞UIͰ
ೖྗ͢ΔͨͼʹView͕࠶ඳը͞Εͯ͠·͍
ΧʔιϧΞτͯ͠͠·͏
• stickitͦΕΛ͍Ͱ͘ΕΔ
Slide 27
Slide 27 text
Backbone.js +
Marionette.js + Stickit.js
!
ͷ߹
Slide 28
Slide 28 text
Model <-> View (Marionette+Stickit)
var
SomeView
=
Marionette.ItemView.extend({
bindings:
{
"#item":
"item"
},
onRender:
function(){
this.stickit();
}
});
Slide 29
Slide 29 text
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()
)
);
}
});
Slide 30
Slide 30 text
ྑ͍ײ͡
Slide 31
Slide 31 text
Backboneͷ͜Ε͔Β
Slide 32
Slide 32 text
Backboneͷ͜Ε͔Β
• ͓ͦΒ͘Backbone.jsେ͖͘มΘΒͳ͍ͣ
• ͦΕ͕BackboneͷҰ൪ͷϝϦοτͩͱࢥ͏
• ഁյతͳมߋ =>શ໘ϦχϡʔΞϧେมͱ͍͏ҙຯͰ
• Marionette.jsଆͰɺvirtualDOMͳͲͷͪΒ΄Βग़͍ͯΔ
͚Ͳɺ·ͩٞதͱ͍͏ײ͡
• Backbone + React ͳͲͰɺϞδϡʔϧ୯ҐͰΘΕΔ͜ͱ
݁ߏ͋Γͦ͏
Slide 33
Slide 33 text
BackboneͱFluxͷؔ
• ಛʹ੍ͳ͍ͨΊɺ
FluxͷΑ͏ʹσʔλͷྲྀΕΛҰํʹ͢Δ͜ͱՄೳ
• View -> Controller -> Model -> View -> …
• ViewͰϢʔβʔΠϕϯτΛ͔ͭΈɺ
͔ͦ͜ΒApp.vent.trigger(…)ͰControllerʹ͑ɺ
Controller͕֘ModelʹมߋΛՃ͑Δ
• Marionette͕ఏڙ͍ͯ͠ΔControllerԿͷׂ͍࣋ͬͯͳ͍ͷͰɺ
ͦΕΛFlux෩ʹҙຯ͚ͯ͋͛͠Ε͍͚ͦ͏
Slide 34
Slide 34 text
݁
Slide 35
Slide 35 text
σʔλͷྲྀΕ͕ҰํʹͳΔΑ͏ʹ
όΠϯσΟϯάยํ͕ྑͦ͞͏
(Model -> View)
Slide 36
Slide 36 text
Thank you :)