5分でわかるMarionette.jsのいいところ

天下一クライアントサイドJS MV*フレームワーク武道会 (2014/07/11)のLTの資料です。

Transcript

1. ෼ͰΘ͔Δ.BSJPOFUUFKTͷ͍͍ͱ͜Ζ
   ఱԼҰΫϥΠΞϯταΠυ+4.7ϑϨʔϜϫʔΫ෢ಓձ
   
   !LPCB
   

   View Slide

2. 8IBUJT.BSJPOFUUFKT
   

   View Slide

3. 8IBUJT.BSJPOFUUFKT
   w #BDLCPOFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ
   w େن໛ΞϓϦέʔγϣϯʹ଱͑͏Δઃܭ
   w 7JFXपΓͷศརͳ֦ுͳͲ
   w ࠷ۙWʹͳͬͨ
   

   View Slide

4. 8IZDIPPTF
   

   View Slide

5. 8IZDIPPTF
   4JOHMF1BHF"QQMJDBUJPOΛ࠷ॳ͸#BDLCPOFKT͚ͩͰ࣮૷
   ωετͨ͠7JFXߏ଄ͷαϙʔτ͕ඞཁ
   ࣗྗͰ࣮૷ʜ
   It’s very similar to Marionette.js!!
   

   View Slide

6. ͍͍ͱ͜Ζ
   

   View Slide

7. 7JFXΛ͍͍ײ͡ʹߏ଄Խͯ͘͠ΕΔ
   

   View Slide

8. 4VQQPSU/FTUFE7JFX
   w #BDLCPOFKT͚ͩͩͱࣗ෼Ͱ7JFXͷ࡟আ WJFXSFNPWF
   
   Λ͢Δඞ
   ཁ͕͋Δ
   w .BSJPOFUUFKTͰ͸3FHJPOͱ3FHJPO.BOBHFS "QQMJDBUJPOͱ
   -BZPVU7JFX͕͍࣋ͬͯΔ
   ͕7JFXͷ੾Γସ͑࣌ͷॾʑΛ΍ͬͯ͘
   ΕΔ
   var app = new Marionette.Application();!
   app.addRegions({ main: "#main" });!
   !
   # render()͢Δඞཁ͸ͳ͍!!!
   app.main.show(new MyView());!
   app.main.show(new MyOtherView());
   ˠ;PNCJF7JFX͕࡞ΒΕʹ͍͘
   

   View Slide

9. 7JFX.BOBHFNFOU
   Application
   LayoutView
   ItemView
   CollectionView
   ItemView (in CollectionView)
   

   View Slide

10. 7JFX.BOBHFNFOU
    var TopView = Backbone.Marionette.LayoutView.extend({!
    template: template,!
    regions: {!
    artistSearch: “.js-artist-search",!
    topTracks: “.js-top-tracks"!
    },!
    onRender: function() {!
    this.artistSearch.show(!
    ! ! new ArtistSearchView(model: new Artist())!
    );!
    !
    this.listenTo(tracks, 'reset', this.showTracks);!
    },!
    showTracks: function() {!
    this.topTracks.show(!
    new TracksView(collection: tracks)!
    );!
    }!
    });!
    !
    ɿ!
    ɿ!
    App.content.show(new TopView());!
    RegionΛఆٛ
    ೖྗΤϦΞΛදࣔ
    collection͕reset͞ΕͨΒ
    ۂҰཡͷCollectionViewΛ
    දࣔ
    ApplicationͷRegionʹදࣔ
    

    View Slide

11. ओઓ৔͸+BWB4DSJQU
    

    View Slide

12. -PHJDMFTTUFNQMBUF
    w ֤$PNQPOFOUຖʹ7JFXΛ࡞ΔͨΊɺςϯϓϨʔτ಺Ͱͷ෼ذΛ࠷
    খݶʹग़དྷΔ
    w զʑ͸ςϯϓϨʔτ಺͕ແ๏஍ଳʹͳΔͷΛԿ౓΋ݟ͖ͯͨ͸ͣʜ
    

    View Slide

13. ಡΈ΍͍͢
    

    View Slide

14. :PVEPO`UOFFEUPHPPHMF
    w ͱͯ΋ಡΈ΍͍͢ίʔυͱͱͯ΋ಡΈ΍͍͢υΩϡϝϯτ
    w ͕ͬͭΓ࢖͓͏ͱ͢Δͱ݁ہ࣮૷ݟΔ͜ͱʹͳΔͷͰɺϑϨʔϜϫʔ
    Ϋͷ૚Ͱιʔε͕ಡΊͳ͍ͱπϥ͍
    w (PPHMFͷτϨϯυʁͦΕͬͯʜ
    

    View Slide

15. ͦͷଞ
    

    View Slide

16. .PSF
    w #FIBWJPSTʹΑΔ7JFXͷৼΔ෣͍ͷڞ௨Խ
    w "QQMJDBUJPOͷ.PEVMFʹΑΔ෼ׂ
    w ༷ʑͳλΠϛϯάͰͷΠϕϯτൃߦͱUSJHHFS.FUIPE
    w VJ΍USJHHFSTͳͲͪΐͬͱͨ͠ศརػೳ
    

    View Slide

17. ·ͱΊ
    

    View Slide

18. 4VNNBSZ
    w #BDLCPOFKT͔ΒͷҠߦίετ͕௿͍
    w େن໛ͳ4JOHMF1BHF"QQMJDBUJPOΛ࡞Δͷʹ͸ͱͯ΋ద͍ͯ͠Δ
    w $PNQPOFOUࢦ޲Ͱ7JFXΛ෼ׂग़དྷΔ
    w ϩδοΫΛ+BWB4DSJQUଆʹدͤΔ͜ͱ͕ग़དྷΔ
    

    View Slide

19. .BLFZPVS#BDLCPOFBQQMJDBUJPOTEBODF
    
    speakerdeck.com/koba04
    

    View Slide