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
100
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.5k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.5k
「フロントエンド領域」を再定義する
mizchi
50
36k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The World Runs on Bad Software
bkeepers
PRO
69
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Bash Introduction
62gerente
613
210k
Typedesign – Prime Four
hannesfritz
42
2.7k
How to train your dragon (web standard)
notwaldorf
96
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Statistics for Hackers
jakevdp
799
220k
Done Done
chrislema
184
16k
The Cult of Friendly URLs
andyhume
79
6.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
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Ϧʔμʔ࡞Εͨ — ͳ͓࡞Δඞཁͳ͔༷ͬͨ
͓ΘΓ