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
120
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.5k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.3k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How GitHub (no longer) Works
holman
314
140k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Cult of Friendly URLs
andyhume
79
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
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Ϧʔμʔ࡞Εͨ — ͳ͓࡞Δඞཁͳ͔༷ͬͨ
͓ΘΓ