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.3k
仮想DOMテンプレーティング概念
Koutarou Chikuba
October 17, 2014
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
14
4.2k
Server Side JavaScript のためのバンドル最適化
mizchi
5
5.8k
V8 as a container on CDN Edge worker
mizchi
5
1.7k
Edge Side Frontend という新領域
mizchi
33
13k
バンドル最適化マニアクス at tfconf
mizchi
7
3.9k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.2k
「フロントエンド領域」を再定義する
mizchi
50
35k
光を超えるためのフロントエンドアーキテクチャ
mizchi
84
21k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Visualization
eitanlees
135
14k
Statistics for Hackers
jakevdp
789
220k
Teambox: Starting and Learning
jrom
128
8.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Producing Creativity
orderedlist
PRO
336
39k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
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Ϧʔμʔ࡞Εͨ — ͳ͓࡞Δඞཁͳ͔༷ͬͨ
͓ΘΓ