Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

3aebd86547bfc5cdb451d5f2f95ed5d8?s=47 Koutarou Chikuba
October 17, 2014
3.1k

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

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

October 17, 2014
Tweet

Transcript

  1. Ծ૝DOMςϯϓϨʔςΟϯά֓೦ͰੈքΛม͑Δͧʂ @mizchi

  2. About — mizchi — JSͰSPA࡞Δਓ — ΰάϚδΦε౗ͨ͠

  3. స৬͠·ͨ͠

  4. None
  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͢Δ

  17. None
  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

  32. None
  33. — 2೔ͰRSSϦʔμʔ࡞Εͨ — ͳ͓࡞Δඞཁ͸ͳ͔ͬͨ໛༷

  34. ͓ΘΓ