2015/05/27 Data Binding JS Night
ࠓɺվΊͯBackboneΛධՁ͢Δ@shibe972015/05/27 Data Binding JS Night
View Slide
ࣗݾհࣲా ف (@shibe97)ࣄಛٕσβΠφʔ݉ϑϩϯτΤϯυΤϯδχΞɻ ࣾͰࠂͷೖߘπʔϧΛ࡞͍ͬͯ·͢ɻϒϨΠΫμϯεɻ
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 -> Modelvar SomeView = Backbone.View.extend({ events: { "click .button" : "changeState" }, changeState: function(e){ this.model.set("item", $(e.target).val()); } });
Model -> Viewvar 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͚ͩͰࣗಈԽͯ͠΄͍͠…
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 :)