$30 off During Our Annual Pro Sale. View Details »

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

koba04
July 11, 2014

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

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

koba04

July 11, 2014
Tweet

More Decks by koba04

Other Decks in Programming

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