In VDOM we Trust; unraveling the mystery of Virtual DOM

Transcript

1. Unraveling the mystery of VDOM In VDOM We Trust; Divya Sasidharan
2. Web Developer @ KnightLab Divya Sasidharan @shortdiv
3. The problem How browsers work Virtual DOM Why Virtual DOM Overview
4. The Problem: How Browsers render state
5. ☕
6. OR
8. OR
10. Internal State => Screen
11. Browsers… How do they work?
12. DOM Tree Render Tree HTML DOM Parser CSS Parser Styles Attach Paint Layout
13. DOM CSS Object Model html head body div body div 3:45pm color: black body div color: black 3:45pm Render Tree +
14. (adjective re.flow ) An event as a result of changes that affect the layout of a portion of the page. Reflow
15. 3:46pm body div color: black 3:45pm Reflow
16. (adjective re·paint ) An event as a result of changes made to element visibility. Repaint
17. color: red body div 3:45pm color: black Repaint
18. Beware the Reflow/Repaint
20. <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™
21. 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’} ] ™
22. 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 ™
23. 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/
24. Model View MVC
25. Model action controller View
26. state component
27. 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
28. 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/
29. 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/
30. state component component component component component component
31. action view controller model model model model view view view view model
33. Virtual DOM
34. Model Virtual DOM DOM
35. Model Virtual DOM DOM
36. But isn’t that slow?
37. 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
38. Let’s Do the Numbers.
39. Daredevil Ironman Jessica Jones Thor Luke Cage Marvel Cinematic Universe Movie Netflix All
40. 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/
41. 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/
42. Example Time!
43. function render(time) { return ( new virtualDom.VNode(‘span’, {className: "clock"}, [ new virtualDom.VText(time) ]) ) } var vTree = render(new Date().toLocaleTimeString()); index.js
44. 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
45. <div> 12:45pm </div>
46. 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
47. Diff (noun \ˈdif\) Compare the current virtual tree with the new virtual tree to identify changes
48. Old Tree New Tree
49. Append node Remove node Change node
50. Append a Node ?
51. Remove a Node ?
52. Change a Node
53. But what if nodes aren’t in order?
54. <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
55. 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
56. 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 ?
57. 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>
58. 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 ?
59. Why Virtual DOM
60. State Manager Agnostic
61. Browser independent
62. Testable
63. Keep Calm And Trust in VDom
64. Thanks! @shortdiv