Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今、改めてBackboneを評価する

 今、改めてBackboneを評価する

2015/05/27 Data Binding JS Night

Kazuki Shibata

May 27, 2015
Tweet

More Decks by Kazuki Shibata

Other Decks in Technology

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