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
In VDOM we Trust; unraveling the mystery of Vir...
Search
shortdiv
July 21, 2017
Programming
0
31
In VDOM we Trust; unraveling the mystery of Virtual DOM
shortdiv
July 21, 2017
Tweet
Share
More Decks by shortdiv
See All by shortdiv
Supercharge Your Maps
shortdiv
3
98
Other Decks in Programming
See All in Programming
Is Xcode slowly dying out in 2025?
uetyo
1
190
Select API from Kotlin Coroutine
jmatsu
1
190
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
550
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
童醫院敏捷轉型的實踐經驗
cclai999
0
190
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Create a website using Spatial Web
akkeylab
0
300
Gleamという選択肢
comamoca
6
760
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Facilitating Awesome Meetings
lara
54
6.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Raft: Consensus for Rubyists
vanstee
140
7k
The Language of Interfaces
destraynor
158
25k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Docker and Python
trallard
44
3.4k
Transcript
Unraveling the mystery of VDOM In VDOM We Trust; Divya
Sasidharan
Web Developer @ KnightLab Divya Sasidharan @shortdiv
The problem How browsers work Virtual DOM Why Virtual DOM
Overview
The Problem: How Browsers render state
☕
OR
None
OR
None
Internal State => Screen
Browsers… How do they work?
DOM Tree Render Tree HTML DOM Parser CSS Parser Styles
Attach Paint Layout
DOM CSS Object Model html head body div body div
3:45pm color: black body div color: black 3:45pm Render Tree +
(adjective re.flow ) An event as a result of changes
that affect the layout of a portion of the page. Reflow
3:46pm body div color: black 3:45pm Reflow
(adjective re·paint ) An event as a result of changes
made to element visibility. Repaint
color: red body div 3:45pm color: black Repaint
Beware the Reflow/Repaint
None
<span class=“clock”></span> const clock = document.querySelector('.clock') clock.innerHTML = new Date().toLocaleTimeString()
setInterval(() => { clock.innerHTML = new Date().toLocaleTimeString() }, 1000) index.html index.js Vanilla JS™
Vanilla JS var heroes = [ {name: 'Daredevil', universe: 'netflix'},
{name: 'Ironman', universe: 'movie'}, {name: 'Jessica Jones', universe: 'netflix'}, {name: 'Thor', universe: 'movie'}, {name: 'Luke Cage', universe: ‘netflix’}, {name: ‘Doctor Strange', universe: ‘movie’} ] ™
Vanilla JS <input id=‘all’ type=‘radio’> <label for=‘all’>All</label> <input id=‘movie’ type=‘radio’>
<label for=‘movie’>Movie</label> <input id=‘netflix’ type=“radio”> <label for=‘netflix'>Netflix</label> <ul class="superheroes"> <li>Daredevil</li> <li>Ironman</li> <li>Jessica Jones</li> <li>Thor</li> <li>Luke Cage</li> </ul> Daredevil Ironman Jessica Jones Thor Luke Cage Marvel Cinematic Universe Movie Netflix All ™
Reflow + Repaint Repaint Render: 367.7ms Paint: 258.0ms Render: 443.7ms
Paint: 107.7ms https://jsfiddle.net/shortdiv/pvr39uwk/ https://jsfiddle.net/shortdiv/jc6Ldkk6/
Model View MVC
Model action controller View
state component
MVC <div data-bind=“text: time”> function viewModel() { var self =
this this.time = ko.observable(new Date().toLocaleTimeString()) this.tick = function() { self.time(new Date().toLocaleTimeString()) } setInterval(self.tick, 1000) } ko.applyBindings(new viewModel()); index.html index.js
Vanilla JS KOJS Render: 236.1ms Paint: 36.7ms Render: 231.0ms Paint:
32.9ms https://jsfiddle.net/shortdiv/fLos0e29/ https://jsfiddle.net/shortdiv/dL5np1mr/
Vanilla JS KOJS Render: 367.7ms Paint: 258.0ms Render: 382.7ms Paint:
120.4ms https://jsfiddle.net/shortdiv/pvr39uwk/ https://jsfiddle.net/shortdiv/tt92Lnb5/
state component component component component component component
action view controller model model model model view view view
view model
None
Virtual DOM
Model Virtual DOM DOM
Model Virtual DOM DOM
But isn’t that slow?
Game state / input Game logic Scene IR Render OpenGL
ops GFX card App state / events Components Virtual DOM Compute DOM operations Browser https://www.youtube.com/watch?v=-DX3vJiqxm4
Let’s Do the Numbers.
Daredevil Ironman Jessica Jones Thor Luke Cage Marvel Cinematic Universe
Movie Netflix All
Vanilla JS Virtual DOM Render: 414.5ms Paint: 180.1ms Render: 311.3ms
Paint: 85.5ms https://jsfiddle.net/shortdiv/rzyf4sps/ https://jsfiddle.net/shortdiv/dpqoLntj/
KOJS Virtual DOM Render: 382.7ms Paint: 120.4ms Render: 311.3ms Paint:
85.5ms https://jsfiddle.net/shortdiv/tt92Lnb5/ https://jsfiddle.net/shortdiv/dpqoLntj/
Example Time!
function render(time) { return ( new virtualDom.VNode(‘span’, {className: "clock"}, [
new virtualDom.VText(time) ]) ) } var vTree = render(new Date().toLocaleTimeString()); index.js
function render(time) { return ( new virtualDom.VNode(‘span’, {className: "clock"}, [
new virtualDom.VText(time) ]) ) } var vTree = render(new Date().toLocaleTimeString()); var rootNode = virtualDom.create(vTree); document.body.appendChild(rootNode); index.js
<div> 12:45pm </div>
function render(time) { return ( new virtualDom.VNode(‘div', {className: "clock"}, [
new virtualDom.VText(time) ]) ) } var vTree = render(new Date().toLocaleTimeString()); var rootNode = virtualDom.create(vTree); document.body.appendChild(rootNode); setInterval(function() { var time = new Date().toLocaleTimeString() var newVTree = render(time); var patches = virtualDom.diff(vtree, newVTree); rootNode = virtualDom.patch(rootNode, patches); vtree = newTree; }, 1000) index.js
Diff (noun \ˈdif\) Compare the current virtual tree with the
new virtual tree to identify changes
Old Tree New Tree
Append node Remove node Change node
Append a Node ?
Remove a Node ?
Change a Node
But what if nodes aren’t in order?
<h2>Marvel Netflix Original</h2> <ul class=“superheroes"> <li> <img src=“#”> <p>Daredevil</p> </li>
<li> <p>Iron Fist</p> </li> <li> <img src=“#”> <p>Jessica Jonas</p> </li> <li> <img src=“#”> <p>Luke Cage</p> </li> </ul> Luke Cage Iron Fist Jessica Jones Daredevil Marvel Netflix Original
ul li img p li img p li p li
img p ul li img p li img p li img p li img p Old Tree New Tree
Nodes not in order ul li li li li p
img p img p p img text text text text ul li li li li p img p img p img p img text text text text ?
Keys <ul class=“superheroes"> <li> <img src=“#”> <p key=“daredevil”>Daredevil</p> </li> <li>
<p key=“iron-fist”>Iron Fist</p> </li> <li> <img src=“#”> <p key=“jessica-jones”>Jessica Jones</p> </li> <li> <img src=“#”> <p key=“luke-cage”>Luke Cage</p> </li> </ul>
Nodes not in order ul li li li li p
img p img p p img text text text text ul li li li li p img p img p img p img text text text text ?
Why Virtual DOM
State Manager Agnostic
Browser independent
Testable
Keep Calm And Trust in VDom
Thanks! @shortdiv