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

https://github.com/betachelsea/reactjs-tutorial

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. ͜Ε͔Β Ͳ͏ͳΔ
19. 2015೥ɺ஫໨ͯ͠Έ·͠ΐ͏ʂ ͓͠·͍