ripple.js(とcomponent関連)の話

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

Transcript

1. ripple.js(ͱcomponentؔ࿈) ͷ࿩ @parc_b(tajima_j)
2. ripple.js֓ཁ • reactiveͳviewΛఏڙ͢ΔܰྔϑϨʔϜϫʔΫ • ripple.jsͷreadmeΑΓ: WBS
   1FSTPO
   
   SJQQMF EJW\\OBNF^^EJW
   
   
   BUUS OBNF
   \
   SFRVJSFE
   USVF
   UZQF
   TUSJOH
   ^ 
   ! WBS
   QFSTPO
   
   OFX
   1FSTPO \
   
   
   OBNF
   5PN
   ^ 
   ! QFSTPOBQQFOE5P EPDVNFOUCPEZ 
   QFSTPOOBNF
   
   #BSSZ
   %0.͕ࣗಈతʹߋ৽͞ΕΔ
3. • Segment.io੡ • 0.0.1ͷϦϦʔε͸2014/02/16(ࠓ͸0.5.3) • ReactͷΑ͏ͳviewͷcomposition • ViewΛ֦ு͢ΔϓϥάΠϯ
4. composition WBS
   "WBUBS
   
   SJQQMF
   
   
   JNH
   TSDIUUQHSBQIGBDFCPPLDPN\\VTFSOBNF^^QJDUVSF
   
   
   WBS
   -JOL
   
   SJQQMF
   
   
   B
   ISFGIUUQXXXGBDFCPPLDPN\\VTFSOBNF^^\\VTFSOBNF^^B
   
   ! WBS
   1SPpMF
   
   SJQQMF <
   
   
   EJW
   DMBTTQSPpMF
   
   
   
   
   QSPpMFBWBUBS
   VTFSOBNF\\VTFSOBNF^^QSPpMFBWBUBS
   
   
   
   
   QSPpMFMJOL
   VTFSOBNF\\VTFSOBNF^^QSPpMFMJOL
   
   
   EJW
   >KPJO 
   
   
   
   
   
   
   DPNQPTF QSPpMFBWBUBS
   "WBUBS
   
   
   
   
   
   
   DPNQPTF QSPpMFMJOL
   -JOL 
   ! WBS
   QSPpMF
   
   OFX
   1SPpMF \
   VTFSOBNF
   BOUIPOZTIPSU^
   
   
   
   
   BQQFOE5P EPDVNFOUCPEZ 
   EJW
   DMBTTQSPpMF
   
   
   JNH
   TSDIUUQHSBQIGBDFCPPLDPNBOUIPOZTIPSUQJDUVSF
   
   
   B
   ISFGIUUQXXXGBDFCPPLDPNBOUIPOZTIPSUBOUIPOZTIPSUB
   EJW
5. plugin • eventsϓϥάΠϯΛར༻͍ͯ͠Δαϯϓϧ WBS
   'PSN
   
   SJQQMF <
   
   
   GPSN
   
   
   
   
   CVUUPO
   PODMJDL\\UIJTDMJDLFE^^CVUUPOCVUUPO
   
   
   GPSN
   >KPJO 
   
   
   
   
   
   
   VTF SJQQMFFWFOUT 
   ! 'PSNQSPUPUZQFDMJDLFE
   
   GVODUJPO F
   \
   
   
   FQSFWFOU%FGBVMU 
   
   
   BMFSU DMJDLFE 
   ^
   ! WBS
   GPSN
   
   OFX
   'PSN BQQFOE5P EPDVNFOUCPEZ 
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
7. • ͱͯ΋Reactʹࣅ͍ͯΔ • ͡Ό͊࡞ऀ͸ͳͥΘ͟Θ͟rippleΛ࡞ͬͨͷ͔ …ripple͸componentϕʔε
8. component֓ཁ • githubΛجຊͷϦϙδτϦͱ͢ΔΫϥΠΞϯταΠυ޲͚ ύοέʔδϚωʔδϟ • Ұͭͷcomponent͸JavaScripts͚ͩͰͳ͘cssɺimageɺfont ΛؚΊͯߏ੒͢Δ • ୯ҰͷλεΫͷΈΛ࣮ݱ͢Δখ͞ͳcomponent • TJ͕componentʹ͍ͭͯޠ͍ͬͯΔϒϩά • TJ Holowaychuk, Components
9. componentͱripple.js • ripple.js͸୯ಠͰ΋࢖͑Δ͚Ͳɺجຊతʹ͸ componentϕʔε • ripple.jsͷϓϥάΠϯ͸ҰͭҰ͕ͭ componentͱͯ͠ఏڙ͞Ε͍ͯΔ
10. • componentͱripple.jsͷαϯϓϧ: WBS
    SJQQMF
    
    SFRVJSF SJQQMF 
    WBS
    SFGT
    
    SFRVJSF bSFGT 
    WBS
    SFGT
    
    SFRVJSF FWFOUT 
    WBS
    UFNQMBUF
    
    SFRVJSF UFNQMBUF 
    ! WBS
    'PSN
    
    SJQQMF UFNQMBUF
    
    
    
    
    
    
    VTF FWFOUT
    
    
    
    
    
    
    VTF SFGT 
    ! WBS
    GPSN
    
    OFX
    'PSN BQQFOE5P EPDVNFOUCPEZ 
11. • ֤ϓϥάΠϯ͸୯ػೳΛ࣮ݱ͢Δখ͍͞component • ͦͷϓϥάΠϯΛར༻࣮ͯ͠૷͞ΕΔview • rippleͷcomposeΛར༻͢Δ͜ͱͰview΋ࣗ෼ͷUI Λ࣮૷͢Δcomponentʹ͢Δ • componentͷϞδϡϥϦςΟͷߴ͞ͱripple.jsͷϓ ϥάΠϯػߏ͸ͱͯ΋Ϛον͢Δ
12. ݱঢ়ͷripple.jsͱ͜Ε͔Β • 0.4͔Β0.5ͰAPI͕มߋ͞Ε͍ͯͯ௥ैͰ͖ͯ ͍ͳ͍ϓϥάΠϯ͕͋Δ • υΩϡϝϯτ͕গͳ͍ • ࣗ෼ؚΊͯ΋ͬͱίϯτϦϏϡʔτ͍ͯ͘͠ ͷ͸໘ന͍ͱࢥ͏