ripple.js(とcomponent関連)の話

天下一クライアントサイドJS MV*フレームワーク武道会

Transcript

1. ripple.js(ͱcomponentؔ࿈)
   ͷ࿩
   @parc_b(tajima_j)
   

   View Slide

2. ripple.js֓ཁ
   • reactiveͳviewΛఏڙ͢ΔܰྔϑϨʔϜϫʔΫ
   • ripple.jsͷreadmeΑΓ:
   WBS1FSTPOSJQQMF EJW\\OBNF^^EJW
   
   BUUS OBNF \SFRVJSFEUSVF UZQFTUSJOH^
   
   !
   WBSQFSTPOOFX1FSTPO \
   OBNF5PN
   ^
   
   !
   QFSTPOBQQFOE5P EPDVNFOUCPEZ
   
   QFSTPOOBNF#BSSZ %0.͕ࣗಈతʹߋ৽͞ΕΔ
   

   View Slide

3. • Segment.io੡
   • 0.0.1ͷϦϦʔε͸2014/02/16(ࠓ͸0.5.3)
   • ReactͷΑ͏ͳviewͷcomposition
   • ViewΛ֦ு͢ΔϓϥάΠϯ
   

   View Slide

4. composition
   WBS"WBUBSSJQQMF
   JNHTSDIUUQHSBQIGBDFCPPLDPN\\VTFSOBNF^^QJDUVSF
   
   
   WBS-JOLSJQQMF
   BISFGIUUQXXXGBDFCPPLDPN\\VTFSOBNF^^\\VTFSOBNF^^B
   
   
   !
   WBS1SPpMFSJQQMF
   EJWDMBTTQSPpMF
   QSPpMFBWBUBSVTFSOBNF\\VTFSOBNF^^QSPpMFBWBUBS
   QSPpMFMJOLVTFSOBNF\\VTFSOBNF^^QSPpMFMJOL
   EJW
   >KPJO
   
   
   DPNQPTF QSPpMFBWBUBS "WBUBS
   
   DPNQPTF QSPpMFMJOL -JOL
   
   !
   WBSQSPpMFOFX1SPpMF \VTFSOBNFBOUIPOZTIPSU^
   
   BQQFOE5P EPDVNFOUCPEZ
   
   EJWDMBTTQSPpMF
   JNHTSDIUUQHSBQIGBDFCPPLDPNBOUIPOZTIPSUQJDUVSF
   BISFGIUUQXXXGBDFCPPLDPNBOUIPOZTIPSUBOUIPOZTIPSUB
   EJW
   

   View Slide

5. plugin
   • eventsϓϥάΠϯΛར༻͍ͯ͠Δαϯϓϧ
   WBS'PSNSJQQMF
   GPSN
   CVUUPOPODMJDL\\UIJTDMJDLFE^^CVUUPOCVUUPO
   GPSN
   >KPJO
   
   
   VTF SJQQMFFWFOUT
   
   !
   'PSNQSPUPUZQFDMJDLFEGVODUJPO F
   \
   FQSFWFOU%FGBVMU
   
   BMFSU DMJDLFE
   
   ^
   !
   WBSGPSNOFX'PSN
   BQQFOE5P EPDVNFOUCPEZ
   
   

   View Slide

6. ओͳϓϥάΠϯҰཡ
   • shortcuts - add custom key binding combos
   • events - add event listeners to the DOM and call methods on the view
   • each - Basic iteration using the each directive.
   • bind-methods - Bind all methods on the prototype to the view
   • markdown - Adds a directive to render markdown using Marked.
   • extend - Makes adding methods to the view prototype a little cleaner
   • intervals - Easily add and remove intervals
   • computed - Add computed properties.
   • refs - Easily reference elements within the template
   • dispatch - Dispatch custom DOM events up the tree
   

   View Slide

7. • ͱͯ΋Reactʹࣅ͍ͯΔ
   • ͡Ό͊࡞ऀ͸ͳͥΘ͟Θ͟rippleΛ࡞ͬͨͷ͔
   …ripple͸componentϕʔε
   

   View Slide

8. component֓ཁ
   • githubΛجຊͷϦϙδτϦͱ͢ΔΫϥΠΞϯταΠυ޲͚
   ύοέʔδϚωʔδϟ
   • Ұͭͷcomponent͸JavaScripts͚ͩͰͳ͘cssɺimageɺfont
   ΛؚΊͯߏ੒͢Δ
   • ୯ҰͷλεΫͷΈΛ࣮ݱ͢Δখ͞ͳcomponent
   • TJ͕componentʹ͍ͭͯޠ͍ͬͯΔϒϩά
   • TJ Holowaychuk, Components
   

   View Slide

9. componentͱripple.js
   • ripple.js͸୯ಠͰ΋࢖͑Δ͚Ͳɺجຊతʹ͸
   componentϕʔε
   • ripple.jsͷϓϥάΠϯ͸ҰͭҰ͕ͭ
   componentͱͯ͠ఏڙ͞Ε͍ͯΔ
   

   View Slide

10. • componentͱripple.jsͷαϯϓϧ:
    WBSSJQQMFSFRVJSF SJQQMF
    
    WBSSFGTSFRVJSF bSFGT
    
    WBSSFGTSFRVJSF FWFOUT
    
    WBSUFNQMBUFSFRVJSF UFNQMBUF
    
    !
    WBS'PSNSJQQMF UFNQMBUF
    
    VTF FWFOUT
    
    VTF SFGT
    
    !
    WBSGPSNOFX'PSN
    BQQFOE5P EPDVNFOUCPEZ
    
    

    View Slide

11. • ֤ϓϥάΠϯ͸୯ػೳΛ࣮ݱ͢Δখ͍͞component
    • ͦͷϓϥάΠϯΛར༻࣮ͯ͠૷͞ΕΔview
    • rippleͷcomposeΛར༻͢Δ͜ͱͰview΋ࣗ෼ͷUI
    Λ࣮૷͢Δcomponentʹ͢Δ
    • componentͷϞδϡϥϦςΟͷߴ͞ͱripple.jsͷϓ
    ϥάΠϯػߏ͸ͱͯ΋Ϛον͢Δ
    

    View Slide

12. ݱঢ়ͷripple.jsͱ͜Ε͔Β
    • 0.4͔Β0.5ͰAPI͕มߋ͞Ε͍ͯͯ௥ैͰ͖ͯ
    ͍ͳ͍ϓϥάΠϯ͕͋Δ
    • υΩϡϝϯτ͕গͳ͍
    • ࣗ෼ؚΊͯ΋ͬͱίϯτϦϏϡʔτ͍ͯ͘͠
    ͷ͸໘ന͍ͱࢥ͏
    

    View Slide