ripple.js(とcomponent関連)の話

by Tajima Junpei

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ओͳϓϥάΠϯҰཡ • 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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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