VirtualDOMをお勉強しました-React.jsチュートリアル所感-

Transcript

1. LOUPE Study#14 2015/01/06 @beta_chelsea VirtualDOMΛ ͓ษڧ͠·ͨ͠
 - React.js νϡʔτϦΞϧॴײ -

   ← webॻಓ.com ΑΓ

2. #ͱ͸

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

4. ࠷ۙ࿩୊ͷ

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

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

   • ↑ͦΕ͸VirtualDOMͷ࣮૷͕΍ͬͯ͘ΕΔ • jQueryͷ$(“#hoge”).append(“<p>΄͛</p>”);
 ͸΋͏΍ΊΑ͏ͱ͍͏ํ਑ͬΆ͍΋ͷΛײ͡Δ

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

   etc…

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

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

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

11. ࣸܦ݁Ռ

12. ࣸܦ͔Βಘͨཧղ

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

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

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

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

17. ͜Ε͔Β Ͳ͏ͳΔ

18. None

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