why and how to use virtual dom
TRANSCRIPT
Virtual DOMA practical guide
@daiweilud6u
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
• 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
Templating
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>
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
InefficientRecreating the entire DOM every time you want to update
body
.entry
h1 .content
Recreating the entire DOM every time you want to update
body
.entry
h1 .content
Inefficient
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>
Data Binding
body
.entry
h1 .content
Data Binding
body
.entry
h1 .contentvar controller = { title: 'Hello', content: 'DevIgnition'};
h1
Data Binding
body
.entry
.contentvar controller = { title: 'Yo', content: 'DevIgnition'};
Complexity
var controller = { title: 'Yo', content: 'DevIgnition'};
Life cycle management
Stateful component
Binding calculations are slow
Fast O(1)???
Improve Templating with Virtual DOM
Break the Binding
Object View DOM
set
set
set
Developer Code
Break the Binding
Object View DOMV-DOM
Break the Binding
Object View(data) DOMV-DOM
Break the Binding
Object View(data) DOMV-DOM
Break the Binding
Object View(data) DOMV-DOM
Developer Code
Break the Binding
Object View(data) DOMV-DOM
Object View DOM
set
set
set
Diff
Object View(data) DOMV-DOM
Diff
View(data) DOM
data1 VDOM1
data2 VDOM2
<div class="entry"> <h1>- Templating+ Virtual DOM </h1> <div class="content"> Easy to understand </div> </div>
Diff
View(data) DOM
data1 VDOM1
data2 VDOM2
<div class="entry"> <h1>- Templating+ Virtual DOM </h1> <div class="content"> Easy to understand </div> </div>
Simpler APIFast O(n)Stateless component
Decouple view layer with DOM
A Practical Guide
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')]);
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);}
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') ]);}
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') ]);}
Update CycleHow Flux was Born
Data DOM
View()
Action
Beyond DOM
Frameworks
and many more …
React.js Cycle.js Elm
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
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
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
React Canvas
Server Rendering
Elm Native
Patch the DOM Anything
Hybrid Templating?!
Vue.js 2.0 Templates, JSX, or Hyperscript?
Questions / Thanks!
@daiweilud6u