今、改めてBackboneを評価する

 今、改めてBackboneを評価する

2015/05/27 Data Binding JS Night

B22ff27b7826e3299c8dba2e99f2aef8?s=128

Kazuki Shibata

May 27, 2015
Tweet

Transcript

  1. ࠓɺվΊͯBackboneΛධՁ͢Δ @shibe97 2015/05/27 Data Binding JS Night

  2. ࣗݾ঺հ ࣲా ࿨ف (@shibe97) ࢓ࣄ ಛٕ σβΠφʔ݉ϑϩϯτΤϯυΤϯδχΞɻ
 ๭ࣾͰ޿ࠂͷೖߘπʔϧΛ࡞͍ͬͯ·͢ɻ ϒϨΠΫμϯεɻ

  3. None
  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͚ͩͰ΋ࣗಈԽͯ͠΄͍͠…

  17. None
  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 :)