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

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

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=47 koba04
July 11, 2014

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

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

45daf58c77e9dbbab5a1c8a5afc7ac5c?s=128

koba04

July 11, 2014
Tweet

Transcript

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

  2. 8IBUJT.BSJPOFUUFKT

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

  4. 8IZDIPPTF

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

    to Marionette.js!!
  6. ͍͍ͱ͜Ζ

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

  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͕࡞ΒΕʹ͍͘
  9. 7JFX.BOBHFNFOU Application LayoutView ItemView CollectionView ItemView (in CollectionView)

  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ʹදࣔ
  11. ओઓ৔͸+BWB4DSJQU

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

  13. ಡΈ΍͍͢

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

  15. ͦͷଞ

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

  17. ·ͱΊ

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

  19. .BLFZPVS#BDLCPOFBQQMJDBUJPOTEBODF speakerdeck.com/koba04