Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

స৬͠·ͨ͠

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Ծ૝DOMͷ࿩

Slide 6

Slide 6 text

ϖʔδϟφΠτʹͯ — աڈͷࢿྉ: ͓લࣗ෼ͪͷϖʔδϟUI͕ຊ౰ʹ଎͍ͱࢥͬ ͯΜͷʁ // Speaker Deck — ཁ໿ — σʔλόΠϯυͰjQueryͷૢ࡞ආ͚ͯ؅ཧίετԼ͛ͨ ͔ͬͨ

Slide 7

Slide 7 text

ࠓճͷϨΠϠʔ HTMLจࣈྻ => ໦ߏங ͕஗͍

Slide 8

Slide 8 text

ຊ౰͸ΞτϛοΫૢ࡞͍ͨ͠ — ৗʹಉ͡ೖྗ(JSON)͔Βಉ͡ग़ྗ(DOM)Λ͍ͨ͠ — ଐੑॻ͖׵͑ͯθϩ͔Βશ෦ߏங͍ͨ͠

Slide 9

Slide 9 text

ͭ·ΓͲ͏͍͏͜ͱ͔ //Ͳ͔͜Ͱݺ͹ΕΔϋϯυϥ var count = 0; function onClick(){count++; update()}; //ΫϦοΫͷ౓ʹຖճݺͼ͍ͨʂʂʂ function update(){ document.body.innerHTML = ''; var html = renderHTML({count: count}); document.body.innerHTML = html; }

Slide 10

Slide 10 text

ϠόΠ ϖʔδભҠ૬౰

Slide 11

Slide 11 text

Ծ૝DOMͱ͸ — ≠ ϥΠϒϥϦ — ৽͍͠ϑϩϯτΤϯυʮ֓೦ʯ — facebook/react — Matt-Esch/virtual-dom

Slide 12

Slide 12 text

༻ޠ੔ཧ

Slide 13

Slide 13 text

HTML จॻߏ଄Λࣔ͢ʮจࣈྻʯ ※௨ৗͷςϯϓϨʔτΤϯδϯͷλʔήοτ

Slide 14

Slide 14 text

DOM HTML͔Βੜ੒͞ΕΔϒϥ΢β্ͷʮΠϯελϯεʯ

Slide 15

Slide 15 text

Ծ૝DOM DOMͱҰରҰʹରԠ͢Δߏ଄ମ(͋ͱͰৄ͘͠)

Slide 16

Slide 16 text

Ծ૝DOMͷ֓೦ 1. Ϣʔβ͸ৗʹʮԾ૝ͷʯDOMͷߏ଄Λϓογϡ 2. ϥΠϒϥϦ͕લޙͷԾ૝DOMͷdiffΛ࡞Δ 3. diff͔Βʮຊ෺ͷʯDOM΁ɺ໦ߏ଄ͷૢ࡞Λpatch͢Δ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

ୡ੒͞ΕΔ͜ͱ — patchॲཧͳͷͰര଎ — DOMΛલʹ͢Ε͹diffίετ͸(΄΅)ແࢹͰ͖Δ

Slide 19

Slide 19 text

ςϯϓϨʔτΤϯδϯͷݶք — Ծ૝DOM ≠ HTMLςϯϓϨʔτ — จࣈྻΛܦ༝͢ΔͱΠϕϯτϋϯυϥΛ౉ͤͳ͍

Slide 20

Slide 20 text

facebook/reactͷΞϓϩʔν — JSXͱ͔͍͏HTMLຒΊࠐΈ֦ுݴޠ var div = React.DOM.div; var app =
Hello, React!
; (E4X…͍΍ɺͳΜͰ΋ͳ͍)

Slide 21

Slide 21 text

JSX࢖Θͳ͍Ξϓϩʔν — ֤छAltJS΍ϓϦίϯύΠϥͱ૬ੑ࠷ѱ(ύʔα௨Βͳ͍) — Πϯελϯεʹ৮ΔͨΊʹݴޠ಺DSLͰԾ૝DOMੜ੒͍ͨ͠

Slide 22

Slide 22 text

ݴޠ಺DSLͰԾ૝DOM……?

Slide 23

Slide 23 text

=> ςϯϓϨʔτΤϯδϯ ͩʂʂʂʂ

Slide 24

Slide 24 text

ྫ: react-kup(CoffeeScript) ReactKup ($) -> $.ul {className: 'container'}, -> for i in [1..10] $.li {key: i}, "index:"+i

Slide 25

Slide 25 text

ྫ: Om(ClojureScript) (defn widget [data owner] (reify om/IRender (render [this] (dom/h1 nil (:text data))))) Sࣜ

Slide 26

Slide 26 text

ྫ: elm-html(elm) yogi : Html yogi = img [ src "http://elm-lang.org/yogi.jpg" , style [ prop "width" "100%" , prop "height" "100%" ] ] [] ※ virtual-domόοΫΤϯυ

Slide 27

Slide 27 text

໰୊఺ — ա৒ʹϓϩάϥϚϒϧ — ίʔυಡΊͳ͍σβΠφͳΜ͍ͯͳ͔ͬͨΜͩʂ

Slide 28

Slide 28 text

ී௨ͷςϯϓϨʔτΤϯδϯ(HTML)Λ࢖͍·ΘͤΔʁ — ط஌ͷ΋ͷͩͱ react-jade(jade) ͸͋Δ໛༷ — HTML to Virtual DOM ม׵͸͋Δ — reactjs/react-magic

Slide 29

Slide 29 text

طଘͷʮςϯϓϨʔτΤϯδϯʯͷ֓೦্ͷ໰୊ — จࣈྻܦ༝͢ΔͱΠϕϯτϋϯυϥ͕ѻ͑ͳ͍ — ࠷దԽʹkeyଐੑ͕ඞཁ(diffΞϧΰϦζϜʹର͢ΔϢχʔΫ ωεอূ)

Slide 30

Slide 30 text

ݴ͍͔ͨͬͨ͜ͱ — Ծ૝DOM͸ύϥμΠϜνΣϯδ — ·ͩύʔπ͕଍Γͳ͍ — ͦ͏͍͑͹ʮJavaScriptΤϯδχΞཆ੒ಡຊʯങͬͯͩ͘ ͍͞

Slide 31

Slide 31 text

࢖ͬͯΈͨ mizchi/my-feed-reader

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

͓ΘΓ