今、改めてBackboneを評価する

2015/05/27 Data Binding JS Night

Transcript

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

   View Slide

2. ࣗݾ঺հ
   ࣲా ࿨ف (@shibe97)
   ࢓ࣄ
   ಛٕ
   σβΠφʔ݉ϑϩϯτΤϯυΤϯδχΞɻ

   ๭ࣾͰ޿ࠂͷೖߘπʔϧΛ࡞͍ͬͯ·͢ɻ
   ϒϨΠΫμϯεɻ
   

   View Slide

3. View Slide

4. Backbone.jsͱ͸
   • ܰྔͷMV*ϥΠϒϥϦ
   • jQuery, underscore.jsʹґଘ
   • Model, Collection, View, Router, HistoryΛఏڙ
   • require࢖Θͳ͍ͱɺάϩʔόϧԚછ͢Δ
   • σʔλόΠϯσΟϯά͸खಈͰߦͳ͏
   

   View Slide

5. Angularͷ୆಄
   • Α͘Angularͱൺֱ͞Ε͍ͯͨ
   • Angular͸૒ํ޲όΠϯσΟϯά͕͋Δ͔Β

   ͍͍ΑͶ
   • Backbone͸શ෦खಈͰॻ͘ͷେมͩΑͶ
   • ৽͍͠ͷ৮Γ͍ͨΑͶʢצʣ
   

   View Slide

6. ͔͠͠ɺࠓ
   • Angular2͸૒ํ޲σʔλόΠϯσΟϯάΛ

   ΍ΊΔ
   • React͕άϯάϯདྷͯΔ
   • αʔόαΠυϨϯμϦϯάɺvirtual DOM͕

   དྷͯΔ
   

   View Slide

7. ֤ϑϨʔϜϫʔΫൺֱ
   ग़యɿhttps://roost.bocoup.com/2015/austin/blog/why-backbone/
   

   View Slide

8. ͱΓ͋͑ͣσʔλόΠϯσΟϯάͷ࿩
   

   View Slide

9. ͦ΋ͦ΋

   σʔλόΠϯσΟϯά͸ඞཁͳͷ͔ʁ
   

   View Slide

10. σʔλόΠϯσΟϯάͷඞཁੑ
    ʢݸਓతݟղʣ
    • Model͔ΒView΁ͷ൓ө͸͋ͬͨํ͕ྑ͍ͱࢥ͏
    • View͔ΒModel΁ͷ൓ө͸৔߹ʹΑͬͯ͸

    ແ͍ํ͕΍Γ΍͍͢
    • ฤूը໘ͳͲͰ͸ଈ࣌൓ө͞Εͯ͸ࠔΔ
    • ஋ʹΑͬͯ͸όΠϯσΟϯάͨ͘͠ͳ͔ͬͨΓ
    ͢Δ
    

    View Slide

11. σʔλόΠϯσΟϯάͷํ๏
    

    View Slide

12. Backbone.jsͷΈͷ৔߹
    

    View Slide

13. View -> Model
    var  SomeView  =  Backbone.View.extend({  
      events:  {  
        "click  .button"  :  "changeState"  
      },  
      changeState:  function(e){  
        this.model.set("item",  $(e.target).val());  
      }  
    });
    

    View Slide

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()  
          )  
        );  
      }  
    });
    

    View Slide

15. खಈόΠϯσΟϯά͸πϥ͍
    

    View Slide

16. खಈόΠϯσΟϯά͸πϥ͍
    • ྔ͕૿͑ͯ͘Δͱ΍͔͍ͬ
    • σʔλͷྲྀΕ͕ҙຯෆ໌ʹͳΓ͕ͪ
    • ͤΊͯrender͚ͩͰ΋ࣗಈԽͯ͠΄͍͠…
    

    View Slide

17. View Slide

18. Marionette.jsͱ͸
    • Backbone.jsͷϓϥάΠϯ
    • ओʹView·ΘΓͷػೳ͕֦ு͞ΕΔ
    • Regionػೳ
    • Moduleػೳ
    

    View Slide

19. Marionette.jsʹΑΔίϯϙʔωϯτࢥߟ
    • Marionette.jsʹ͸Regionͱ
    ͍͏࢓૊Έ͕͋Δ
    • ྖҬΛ࡞ͬͯɺͦ͜ʹView
    ΛቕΊࠐΜͰ͍͘΋ͷ
    • ͜Ε͸Reactͷ

    ίϯϙʔωϯτͷ߹੒ʹ

    ࣅ͍ͯΔ
    

    View Slide

20. Backbone.js + Marionette.js
    !
    ͷ৔߹
    

    View Slide

21. Model -> View (Marionette)
    var  SomeView  =  Marionette.ItemView.extend({  
      modelEvents:  {  
        "change":  "render"  
      }  
    });
    

    View Slide

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()  
          )  
        );  
      }  
    });
    

    View Slide

23. ѱ͘ͳ͍
    

    View Slide

24. ϩΰ͕ͳ͍ͷͰNYTimesͷΛ…
    

    View Slide

25. Stickit.jsͱ͸
    • Backbone.jsͷϓϥάΠϯ
    • σʔλόΠϯσΟϯά·ΘΓͷػೳڧԽ
    • ยํ޲όΠϯσΟϯά
    • ૒ํ޲όΠϯσΟϯά
    

    View Slide

26. Viewؙ͝ͱͷ࠶ඳըΛͤ͞ͳ͍
    • ೖྗ஋Λଈ࣌൓ө͍ͤͨ͞UIͰ͸

    ೖྗ͢ΔͨͼʹView͕࠶ඳը͞Εͯ͠·͍
    ΧʔιϧΞ΢τͯ͠͠·͏
    • stickit͸ͦΕΛ๷͍Ͱ͘ΕΔ
    

    View Slide

27. Backbone.js +
    Marionette.js + Stickit.js
    !
    ͷ৔߹
    

    View Slide

28. Model View (Marionette+Stickit)
    var  SomeView  =  Marionette.ItemView.extend({  
      bindings:  {  
        "#item":  "item"  
      },  
      onRender:  function(){  
        this.stickit();  
      }  
    });
    

    View Slide

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()  
          )  
        );  
      }  
    });
    

    View Slide

30. ྑ͍ײ͡
    

    View Slide

31. Backboneͷ͜Ε͔Β
    

    View Slide

32. Backboneͷ͜Ε͔Β
    • ͓ͦΒ͘Backbone.js͸େ͖͘͸มΘΒͳ͍͸ͣ
    • ͦΕ͕BackboneͷҰ൪ͷϝϦοτͩͱࢥ͏
    • ഁյతͳมߋ =>શ໘ϦχϡʔΞϧ͸େมͱ͍͏ҙຯͰ
    • Marionette.jsଆͰɺvirtualDOMͳͲͷ࿩΋ͪΒ΄Βग़͍ͯΔ

    ͚Ͳɺ·ͩٞ࿦தͱ͍͏ײ͡
    • Backbone + React ͳͲͰɺϞδϡʔϧ୯ҐͰ࢖ΘΕΔ͜ͱ͸

    ݁ߏ͋Γͦ͏
    

    View Slide

33. BackboneͱFluxͷؔ܎
    • ಛʹ੍໿͸ͳ͍ͨΊɺ

    FluxͷΑ͏ʹσʔλͷྲྀΕΛҰํ޲ʹ͢Δ͜ͱ͸Մೳ
    • View -> Controller -> Model -> View -> …
    • ViewͰϢʔβʔΠϕϯτΛ͔ͭΈɺ

    ͔ͦ͜ΒApp.vent.trigger(…)ͰControllerʹ఻͑ɺ

    Controller͕֘౰ModelʹมߋΛՃ͑Δ
    • Marionette͕ఏڙ͍ͯ͠ΔController͸Կͷ໾ׂ΋͍࣋ͬͯͳ͍ͷͰɺ

    ͦΕΛFlux෩ʹҙຯ෇͚ͯ͋͛͠Ε͹͍͚ͦ͏
    

    View Slide

34. ݁࿦
    

    View Slide

35. σʔλͷྲྀΕ͕Ұํ޲ʹͳΔΑ͏ʹ
    όΠϯσΟϯά΋ยํ޲͕ྑͦ͞͏
    (Model -> View)
    

    View Slide

36. Thank you :)
    

    View Slide