仮想DOMテンプレーティング概念

Transcript

1. Ծ૝DOMςϯϓϨʔςΟϯά֓೦ͰੈքΛม͑Δͧʂ @mizchi
2. About — mizchi — JSͰSPA࡞Δਓ — ΰάϚδΦε౗ͨ͠
3. స৬͠·ͨ͠
5. Ծ૝DOMͷ࿩
6. ϖʔδϟφΠτʹͯ — աڈͷࢿྉ: ͓લࣗ෼ͪͷϖʔδϟUI͕ຊ౰ʹ଎͍ͱࢥͬ ͯΜͷʁ // Speaker Deck — ཁ໿ — σʔλόΠϯυͰjQueryͷૢ࡞ආ͚ͯ؅ཧίετԼ͛ͨ ͔ͬͨ
7. ࠓճͷϨΠϠʔ HTMLจࣈྻ => ໦ߏங ͕஗͍
8. ຊ౰͸ΞτϛοΫૢ࡞͍ͨ͠ — ৗʹಉ͡ೖྗ(JSON)͔Βಉ͡ग़ྗ(DOM)Λ͍ͨ͠ — ଐੑॻ͖׵͑ͯθϩ͔Βશ෦ߏங͍ͨ͠
9. ͭ·ΓͲ͏͍͏͜ͱ͔ //Ͳ͔͜Ͱݺ͹ΕΔϋϯυϥ var count = 0; function onClick(){count++; update()}; //ΫϦοΫͷ౓ʹຖճݺͼ͍ͨʂʂʂ function update(){ document.body.innerHTML = ''; var html = renderHTML({count: count}); document.body.innerHTML = html; }
10. ϠόΠ ϖʔδભҠ૬౰
11. Ծ૝DOMͱ͸ — ≠ ϥΠϒϥϦ — ৽͍͠ϑϩϯτΤϯυʮ֓೦ʯ — facebook/react — Matt-Esch/virtual-dom
12. ༻ޠ੔ཧ
13. HTML จॻߏ଄Λࣔ͢ʮจࣈྻʯ ※௨ৗͷςϯϓϨʔτΤϯδϯͷλʔήοτ
14. DOM HTML͔Βੜ੒͞ΕΔϒϥ΢β্ͷʮΠϯελϯεʯ
15. Ծ૝DOM DOMͱҰରҰʹରԠ͢Δߏ଄ମ(͋ͱͰৄ͘͠)
16. Ծ૝DOMͷ֓೦ 1. Ϣʔβ͸ৗʹʮԾ૝ͷʯDOMͷߏ଄Λϓογϡ 2. ϥΠϒϥϦ͕લޙͷԾ૝DOMͷdiffΛ࡞Δ 3. diff͔Βʮຊ෺ͷʯDOM΁ɺ໦ߏ଄ͷૢ࡞Λpatch͢Δ
18. ୡ੒͞ΕΔ͜ͱ — patchॲཧͳͷͰര଎ — DOMΛલʹ͢Ε͹diffίετ͸(΄΅)ແࢹͰ͖Δ
19. ςϯϓϨʔτΤϯδϯͷݶք — Ծ૝DOM ≠ HTMLςϯϓϨʔτ — จࣈྻΛܦ༝͢ΔͱΠϕϯτϋϯυϥΛ౉ͤͳ͍
20. facebook/reactͷΞϓϩʔν — JSXͱ͔͍͏HTMLຒΊࠐΈ֦ுݴޠ var div = React.DOM.div; var app = <div className="appClass">Hello, React!</div>; (E4X…͍΍ɺͳΜͰ΋ͳ͍)
21. JSX࢖Θͳ͍Ξϓϩʔν — ֤छAltJS΍ϓϦίϯύΠϥͱ૬ੑ࠷ѱ(ύʔα௨Βͳ͍) — Πϯελϯεʹ৮ΔͨΊʹݴޠ಺DSLͰԾ૝DOMੜ੒͍ͨ͠
22. ݴޠ಺DSLͰԾ૝DOM……?
23. => ςϯϓϨʔτΤϯδϯ ͩʂʂʂʂ
24. ྫ: react-kup(CoffeeScript) ReactKup ($) -> $.ul {className: 'container'}, -> for i in [1..10] $.li {key: i}, "index:"+i
25. ྫ: Om(ClojureScript) (defn widget [data owner] (reify om/IRender (render [this] (dom/h1 nil (:text data))))) Sࣜ
26. ྫ: elm-html(elm) yogi : Html yogi = img [ src "http://elm-lang.org/yogi.jpg" , style [ prop "width" "100%" , prop "height" "100%" ] ] [] ※ virtual-domόοΫΤϯυ
27. ໰୊఺ — ա৒ʹϓϩάϥϚϒϧ — ίʔυಡΊͳ͍σβΠφͳΜ͍ͯͳ͔ͬͨΜͩʂ
28. ී௨ͷςϯϓϨʔτΤϯδϯ(HTML)Λ࢖͍·ΘͤΔʁ — ط஌ͷ΋ͷͩͱ react-jade(jade) ͸͋Δ໛༷ — HTML to Virtual DOM ม׵͸͋Δ — reactjs/react-magic
29. طଘͷʮςϯϓϨʔτΤϯδϯʯͷ֓೦্ͷ໰୊ — จࣈྻܦ༝͢ΔͱΠϕϯτϋϯυϥ͕ѻ͑ͳ͍ — ࠷దԽʹkeyଐੑ͕ඞཁ(diffΞϧΰϦζϜʹର͢ΔϢχʔΫ ωεอূ)
30. ݴ͍͔ͨͬͨ͜ͱ — Ծ૝DOM͸ύϥμΠϜνΣϯδ — ·ͩύʔπ͕଍Γͳ͍ — ͦ͏͍͑͹ʮJavaScriptΤϯδχΞཆ੒ಡຊʯങͬͯͩ͘ ͍͞
31. ࢖ͬͯΈͨ mizchi/my-feed-reader
33. — 2೔ͰRSSϦʔμʔ࡞Εͨ — ͳ͓࡞Δඞཁ͸ͳ͔ͬͨ໛༷
34. ͓ΘΓ