Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
仮想DOMテンプレーティング概念
Search
Koutarou Chikuba
October 17, 2014
7
3.5k
仮想DOMテンプレーティング概念
Koutarou Chikuba
October 17, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
130
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.4k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
4 Signs Your Business is Dying
shpigford
185
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Facilitating Awesome Meetings
lara
56
6.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Speed Design
sergeychernyshev
32
1.1k
The Language of Interfaces
destraynor
162
25k
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Ϧʔμʔ࡞Εͨ — ͳ͓࡞Δඞཁͳ͔༷ͬͨ
͓ΘΓ