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

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

Transcript

1. ෼ͰΘ͔Δ.BSJPOFUUFKTͷ͍͍ͱ͜Ζ ఱԼҰΫϥΠΞϯταΠυ+4
   .7 ϑϨʔϜϫʔΫ෢ಓձ
   
   !LPCB
   
2. 8IBU
   JT
   .BSJPOFUUFKT
3. 8IBU
   JT
   .BSJPOFUUFKT w #BDLCPOFKTΛ֦ுͨ͠ϑϨʔϜϫʔΫ
   w େن໛ΞϓϦέʔγϣϯʹ଱͑͏Δઃܭ
   w 7JFXपΓͷศརͳ֦ுͳͲ
   w ࠷ۙWʹͳͬͨ
4. 8IZ
   DIPPTF
5. 8IZ
   DIPPTF  4JOHMF1BHF"QQMJDBUJPOΛ࠷ॳ͸#BDLCPOFKT͚ͩͰ࣮૷
    ωετͨ͠7JFXߏ଄ͷαϙʔτ͕ඞཁ
    ࣗྗͰ࣮૷ʜ It’s very similar to Marionette.js!!
6. ͍͍ͱ͜Ζ
7. 7JFXΛ͍͍ײ͡ʹߏ଄Խͯ͘͠ΕΔ
8. 4VQQPSU
   /FTUFE
   7JFX 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. -PHJDMFTT
    UFNQMBUF w ֤$PNQPOFOUຖʹ7JFXΛ࡞ΔͨΊɺςϯϓϨʔτ಺Ͱͷ෼ذΛ࠷ খݶʹग़དྷΔ
    w զʑ͸ςϯϓϨʔτ಺͕ແ๏஍ଳʹͳΔͷΛԿ౓΋ݟ͖ͯͨ͸ͣʜ
13. ಡΈ΍͍͢
14. :PV
    EPO`U
    OFFE
    UP
    HPPHMF 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. .BLF
    ZPVS
    #BDLCPOF
    BQQMJDBUJPOT
    EBODF
     speakerdeck.com/koba04