今、改めてBackboneを評価する

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 :)