Tweet
Tweet

Slide 1

Slide 1 text

LOUPE Study#14 2015/01/06 @beta_chelsea VirtualDOMΛ ͓ษڧ͠·ͨ͠
 - React.js νϡʔτϦΞϧॴײ - ← webॻಓ.com ΑΓ

Slide 2

Slide 2 text

#ͱ͸

Slide 3

Slide 3 text

ͬ͞ͺΓ஌Βͳ͔ͬͨͷͰ θϩ͔Βษڧ

Slide 4

Slide 4 text

࠷ۙ࿩୊ͷ

Slide 5

Slide 5 text

ͬ͘͟ΓಡΜͩ݁Ռͷ ͓΅Ζ͛ͳཧղ

Slide 6

Slide 6 text

VirtualDOM͸֓೦ʢํ๏࿦ʣ • DOMΛ௚઀ૢ࡞ͤͣɺDOMΛදݱ͢ΔjsΦϒδΣΫτΛ ৮ͬͯมߋΛ؅ཧ͠Α͏ͱ͍͏ํ๏ • ಺෦Ͱ͸มߋલޙͷdiffΛॲཧ͢Δ͜ͱͰܰಈ࡞Λ࣮ݱ • ৗʹθϩ͔Βॻ͖௚͢Α͏ʹॻ͘͜ͱ͕Ͱ͖Δ • Կ൪໨ͷཁૉʹ
  • Λૠೖ͢Δͱ͔Λߟ͑ͳͯ͘Α͍ • ↑ͦΕ͸VirtualDOMͷ࣮૷͕΍ͬͯ͘ΕΔ • jQueryͷ$(“#hoge”).append(“

    ΄͛

    ”);
 ͸΋͏΍ΊΑ͏ͱ͍͏ํ਑ͬΆ͍΋ͷΛײ͡Δ

    • Slide 7

    Slide 7 text

    ࣮૷ࣗମ͸ઓࠃ࣌୅ͬΆ͍ • facebook/react • Matt-Esch/virtual-dom • segmentio/deku • VirtualDOMʹదͨ͠Fluxͱ͍͏ߏ੒ͱ͔ʢ͜Ε΋֓೦ʣ • etc…

    Slide 8

    Slide 8 text

    ͱΓ͋͑ͣ௕͍Ϟϊʹ͸ר͔ΕΖਫ਼ਆͰ ࠓҰ൪ࢿྉ͕ଟͦ͏ͳ facebook/react ΛݟͯΈΑ͏

    Slide 9

    Slide 9 text

    2015೥ॻ͖ॳΊɿνϡʔτϦΞϧࣸܦ

    Slide 10

    Slide 10 text

    2015೥ॻ͖ॳΊɿνϡʔτϦΞϧࣸܦ

    Slide 11

    Slide 11 text

    ࣸܦ݁Ռ

    Slide 12

    Slide 12 text

    ࣸܦ͔Βಘͨཧղ

    Slide 13

    Slide 13 text

    ྫ୊ɿ 3000ϛϦඵޙʹ ʮϛϧΫʯΛʮڇೕʯʹม׵͠ͳ͍͞

    Slide 14

    Slide 14 text

    ΨνjQueryʢੜDOMΛ৮Δํ๏ʣͩͱ ※ίʔυ͸݁ߏద౰Ͱ͢

    Slide 15

    Slide 15 text

    VirtualDOMͷߟ͑ํͩͱ ※ίʔυ͸݁ߏద౰Ͱ͢

    Slide 16

    Slide 16 text

    VirtualDOMͷϝϦοτ DOMૢ࡞ΛΑΓগͳ͘͢ΔͨΊʹ೰·ͳͯ͘Α͍ શσʔλΛͿͪ͜Ί͹উखʹൺֱɾमਖ਼Λ΍ͬͯ͘ΕΔ ͋ͱ଎͍Β͍͠ʢখ͍͞σʔλ͡ΌΘ͔ΒΜʣ VirtualDOMͷσϝϦοτ DOMૢ࡞લఏͷطଘϥΠϒϥϦͱ૬ੑ͕ѱ͍ VirtualDOM࣮૷͕೺Ѳ͍ͯ͠ͳ͍ͱ͜Ζ͔Βԣ΍Γ͕ ೖΔͱ੔߹ੑ͔औΕͳ͘ͳͬͯ͠·͏

    Slide 17

    Slide 17 text

    ͜Ε͔Β Ͳ͏ͳΔ

    Slide 18

    Slide 18 text

    No content

    Slide 19

    Slide 19 text

    2015೥ɺ஫໨ͯ͠Έ·͠ΐ͏ʂ ͓͠·͍