今、改めてBackboneを評価する

2015/05/27 Data Binding JS Night

Transcript

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