Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
仮想DOMテンプレーティング概念
Koutarou Chikuba
October 17, 2014
7
3.1k
仮想DOMテンプレーティング概念
Koutarou Chikuba
October 17, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
Edge Side Frontend という新領域
mizchi
24
10k
バンドル最適化マニアクス at tfconf
mizchi
5
2.8k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
45
18k
Deno Node 両刀
mizchi
5
1.7k
「フロントエンド領域」を再定義する
mizchi
50
32k
光を超えるためのフロントエンドアーキテクチャ
mizchi
81
20k
ServiceWorkerSideReactServerSideRendering
mizchi
5
730
Development Tools for Next Generation
mizchi
16
1.3k
加速するフロントエンドとPWA
mizchi
56
14k
Featured
See All Featured
Designing for Performance
lara
597
64k
Facilitating Awesome Meetings
lara
29
4.1k
Practical Orchestrator
shlominoach
178
8.7k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Clear Off the Table
cherdarchuk
79
290k
Agile that works and the tools we love
rasmusluckow
319
19k
Fireside Chat
paigeccino
13
1.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Automating Front-end Workflow
addyosmani
1351
200k
The Invisible Side of Design
smashingmag
290
48k
Transcript
ԾDOMςϯϓϨʔςΟϯά֓೦ͰੈքΛม͑Δͧʂ @mizchi
About — mizchi — JSͰSPA࡞Δਓ — ΰάϚδΦεͨ͠
స৬͠·ͨ͠
None
ԾDOMͷ
ϖʔδϟφΠτʹͯ — աڈͷࢿྉ: ͓લࣗͪͷϖʔδϟUI͕ຊʹ͍ͱࢥͬ ͯΜͷʁ // Speaker Deck — ཁ
— σʔλόΠϯυͰjQueryͷૢ࡞ආ͚ͯཧίετԼ͛ͨ ͔ͬͨ
ࠓճͷϨΠϠʔ HTMLจࣈྻ => ߏங ͕͍
ຊΞτϛοΫૢ࡞͍ͨ͠ — ৗʹಉ͡ೖྗ(JSON)͔Βಉ͡ग़ྗ(DOM)Λ͍ͨ͠ — ଐੑॻ͖͑ͯθϩ͔Βશ෦ߏங͍ͨ͠
ͭ·ΓͲ͏͍͏͜ͱ͔ //Ͳ͔͜ͰݺΕΔϋϯυϥ var count = 0; function onClick(){count++; update()}; //ΫϦοΫͷʹຖճݺͼ͍ͨʂʂʂ
function update(){ document.body.innerHTML = ''; var html = renderHTML({count: count}); document.body.innerHTML = html; }
ϠόΠ ϖʔδભҠ૬
ԾDOMͱ — ≠ ϥΠϒϥϦ — ৽͍͠ϑϩϯτΤϯυʮ֓೦ʯ — facebook/react — Matt-Esch/virtual-dom
༻ޠཧ
HTML จॻߏΛࣔ͢ʮจࣈྻʯ ※௨ৗͷςϯϓϨʔτΤϯδϯͷλʔήοτ
DOM HTML͔Βੜ͞ΕΔϒϥβ্ͷʮΠϯελϯεʯ
ԾDOM DOMͱҰରҰʹରԠ͢Δߏମ(͋ͱͰৄ͘͠)
ԾDOMͷ֓೦ 1. ϢʔβৗʹʮԾͷʯDOMͷߏΛϓογϡ 2. ϥΠϒϥϦ͕લޙͷԾDOMͷdiffΛ࡞Δ 3. diff͔ΒʮຊͷʯDOMɺߏͷૢ࡞Λpatch͢Δ
None
ୡ͞ΕΔ͜ͱ — patchॲཧͳͷͰര — DOMΛલʹ͢Εdiffίετ(΄΅)ແࢹͰ͖Δ
ςϯϓϨʔτΤϯδϯͷݶք — ԾDOM ≠ HTMLςϯϓϨʔτ — จࣈྻΛܦ༝͢ΔͱΠϕϯτϋϯυϥΛͤͳ͍
facebook/reactͷΞϓϩʔν — JSXͱ͔͍͏HTMLຒΊࠐΈ֦ுݴޠ var div = React.DOM.div; var app =
<div className="appClass">Hello, React!</div>; (E4X…͍ɺͳΜͰͳ͍)
JSXΘͳ͍Ξϓϩʔν — ֤छAltJSϓϦίϯύΠϥͱ૬ੑ࠷ѱ(ύʔα௨Βͳ͍) — Πϯελϯεʹ৮ΔͨΊʹݴޠDSLͰԾDOMੜ͍ͨ͠
ݴޠDSLͰԾDOM……?
=> ςϯϓϨʔτΤϯδϯ ͩʂʂʂʂ
ྫ: react-kup(CoffeeScript) ReactKup ($) -> $.ul {className: 'container'}, -> for
i in [1..10] $.li {key: i}, "index:"+i
ྫ: Om(ClojureScript) (defn widget [data owner] (reify om/IRender (render [this]
(dom/h1 nil (:text data))))) Sࣜ
ྫ: elm-html(elm) yogi : Html yogi = img [ src
"http://elm-lang.org/yogi.jpg" , style [ prop "width" "100%" , prop "height" "100%" ] ] [] ※ virtual-domόοΫΤϯυ
— աʹϓϩάϥϚϒϧ — ίʔυಡΊͳ͍σβΠφͳΜ͍ͯͳ͔ͬͨΜͩʂ
ී௨ͷςϯϓϨʔτΤϯδϯ(HTML)Λ͍·ΘͤΔʁ — طͷͷͩͱ react-jade(jade) ͋Δ༷ — HTML to Virtual DOM
ม͋Δ — reactjs/react-magic
طଘͷʮςϯϓϨʔτΤϯδϯʯͷ֓೦্ͷ — จࣈྻܦ༝͢ΔͱΠϕϯτϋϯυϥ͕ѻ͑ͳ͍ — ࠷దԽʹkeyଐੑ͕ඞཁ(diffΞϧΰϦζϜʹର͢ΔϢχʔΫ ωεอূ)
ݴ͍͔ͨͬͨ͜ͱ — ԾDOMύϥμΠϜνΣϯδ — ·ͩύʔπ͕Γͳ͍ — ͦ͏͍͑ʮJavaScriptΤϯδχΞཆಡຊʯങͬͯͩ͘ ͍͞
ͬͯΈͨ mizchi/my-feed-reader
None
— 2ͰRSSϦʔμʔ࡞Εͨ — ͳ͓࡞Δඞཁͳ͔༷ͬͨ
͓ΘΓ