why and how to use virtual dom
TRANSCRIPT
![Page 1: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/1.jpg)
Virtual DOMA practical guide
@daiweilud6u
![Page 2: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/2.jpg)
Agenda
1. A little history of where Virtual DOM came
2. What we learned from templating
3. Improve templating with Virtual DOM
4. A practical guide to work with Virtual DOM
5. Beyond DOM manipulation
![Page 3: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/3.jpg)
• Virtual DOM concept was first introduced in React.js
• React.js was created by Jordan Walke at Facebook.
• Inspired by XHP, like JSX, you write HTML in PHP
• React.js was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.
• There are 17 implementations (according to vdom-benchmark) besides React.js when I wrote this talk.
A Little History
![Page 4: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/4.jpg)
Templating
![Page 5: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/5.jpg)
Simple Templatingfunction render(title, content) { return ( '<div class="entry">' + '<h1>' + title + '</h1>' + '<div class="content">' + content + '</div>' + '</div>' );}
document.body.innerHTML = render('Hello', 'DevIgnition');// Outputs:// <div class="entry">// <h1>Hello</h1>// <div class="content">// DevIgnition// </div>// </div>
![Page 6: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/6.jpg)
function render(title, content) { return ( '<div class="entry">' + '<h1>' + title + '</h1>' + '<div class="content">' + content + '</div>' + '</div>' );}
document.body.innerHTML = render('Hello', 'DevIgnition');// Outputs:// <div class="entry">// <h1>Hello</h1>// <div class="content">// DevIgnition// </div>// </div>
<div class="entry"> <h1>{{title}}</h1> <div class="content"> {{content}} </div></div>
Handlebars
Simple Templating
![Page 7: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/7.jpg)
InefficientRecreating the entire DOM every time you want to update
body
.entry
h1 .content
![Page 8: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/8.jpg)
Recreating the entire DOM every time you want to update
body
.entry
h1 .content
Inefficient
![Page 9: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/9.jpg)
Lack of SecuritySubject to XSS attach
function render(title, content) { return ( '<div class="entry">' + '<h1>' + title + '</h1>' + '<div class="content">' + content + '</div>' + '</div>' );}
document.body.innerHTML = render('Hello', '<script>alert("evil")</script>');// Outputs:// <div class="entry">// <h1>Hello</h1>// <div class="content">// <script>alert("evil")</script>// </div>// </div>
![Page 10: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/10.jpg)
Data Binding
body
.entry
h1 .content
![Page 11: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/11.jpg)
Data Binding
body
.entry
h1 .contentvar controller = { title: 'Hello', content: 'DevIgnition'};
![Page 12: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/12.jpg)
h1
Data Binding
body
.entry
.contentvar controller = { title: 'Yo', content: 'DevIgnition'};
![Page 13: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/13.jpg)
Complexity
var controller = { title: 'Yo', content: 'DevIgnition'};
Life cycle management
Stateful component
Binding calculations are slow
Fast O(1)???
![Page 14: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/14.jpg)
Improve Templating with Virtual DOM
![Page 15: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/15.jpg)
Break the Binding
Object View DOM
set
set
set
Developer Code
![Page 16: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/16.jpg)
Break the Binding
Object View DOMV-DOM
![Page 17: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/17.jpg)
Break the Binding
Object View(data) DOMV-DOM
![Page 18: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/18.jpg)
Break the Binding
Object View(data) DOMV-DOM
![Page 19: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/19.jpg)
Break the Binding
Object View(data) DOMV-DOM
Developer Code
![Page 20: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/20.jpg)
Break the Binding
Object View(data) DOMV-DOM
Object View DOM
set
set
set
![Page 21: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/21.jpg)
Diff
Object View(data) DOMV-DOM
![Page 22: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/22.jpg)
Diff
View(data) DOM
data1 VDOM1
data2 VDOM2
<div class="entry"> <h1>- Templating+ Virtual DOM </h1> <div class="content"> Easy to understand </div> </div>
![Page 23: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/23.jpg)
Diff
View(data) DOM
data1 VDOM1
data2 VDOM2
<div class="entry"> <h1>- Templating+ Virtual DOM </h1> <div class="content"> Easy to understand </div> </div>
![Page 24: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/24.jpg)
Simpler APIFast O(n)Stateless component
Decouple view layer with DOM
![Page 25: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/25.jpg)
A Practical Guide
![Page 26: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/26.jpg)
Virtual Hyperscript// JSX<div class="entry"> <h1>Hello</h1> <div class="content"> DevIgnition </div></div>
// React.createElementReact.createElement('div', {class: 'entry'}, React.createElement('h1', null, 'Hello'), React.createElement('div', {class: 'content'}, 'DevIgnition'));
// Hyperscripth('div', {class: 'entry'}, [ h('h1', null, 'Hello'), h('div', {class: 'content'}, 'DevIgnition')]);
![Page 27: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/27.jpg)
Components are just Functionsfunction render(title, content) { return h('div', {class: 'entry'}, [ h('h1', null, title), h('div', {class: 'content'}, content) ]);}
// Break into componentsfunction render(title, content) { return h('div', {class: 'entry'}, [ TitleComp(title), ContentComp(content) ]);}
function TitleComp(title) { return h('h1', null, title);}
function ContentComp(content) { return h('div', {class: 'content'}, content);}
![Page 28: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/28.jpg)
Give diff() a Hint
function render() { return h('ul', null, [ h('li', null, 'A'), h('li', null, 'B'), h('li', null, 'C'), h('li', null, 'D'), h('li', null, 'E'), h('li', null, 'F') ]);}
function render() { return h('ul', null, [ h('li', null, 'B'), h('li', null, 'C'), h('li', null, 'A'), h('li', null, 'D'), h('li', null, 'E'), h('li', null, 'F') ]);}
![Page 29: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/29.jpg)
Give diff() a Hint
function render() { return h('ul', null, [ h('li', {key: 'A'}, 'A'), h('li', {key: 'B'}, 'B'), h('li', {key: 'C'}, 'C'), h('li', {key: 'D'}, 'D'), h('li', {key: 'E'}, 'E'), h('li', {key: 'F'}, 'F') ]);}
function render() { return h('ul', null, [ h('li', {key: 'B'}, 'B'), h('li', {key: 'C'}, 'C'), h('li', {key: 'A'}, 'A'), h('li', {key: 'D'}, 'D'), h('li', {key: 'E'}, 'E'), h('li', {key: 'F'}, 'F') ]);}
![Page 30: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/30.jpg)
Update CycleHow Flux was Born
Data DOM
View()
Action
![Page 31: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/31.jpg)
Beyond DOM
![Page 32: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/32.jpg)
Frameworks
and many more …
React.js Cycle.js Elm
![Page 33: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/33.jpg)
Patch the DOM Anything
<div class="entry"> <h1>- Templating+ Virtual DOM </h1> <div class="content"> Easy to understand </div> </div>
new view
DOM
old view
diff
![Page 34: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/34.jpg)
iOS Views
Patch the DOM Anything
<div class="entry"> <h1>- Templating+ Virtual DOM </h1> <div class="content"> Easy to understand </div> </div>
new view
old view
diff
![Page 35: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/35.jpg)
String
Patch the DOM Anything
<div class="entry"> <h1>- Templating+ Virtual DOM </h1> <div class="content"> Easy to understand </div> </div>
new view
old view
diff
![Page 36: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/36.jpg)
React Canvas
Server Rendering
Elm Native
Patch the DOM Anything
![Page 37: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/37.jpg)
Hybrid Templating?!
Vue.js 2.0 Templates, JSX, or Hyperscript?
![Page 38: Why and How to Use Virtual DOM](https://reader034.vdocument.in/reader034/viewer/2022042723/587ceeef1a28ab564b8b5d0d/html5/thumbnails/38.jpg)
Questions / Thanks!
@daiweilud6u