What the v...DOM?

WHAT THE v...DOM?
@stefanjudis

View Slide

STEFAN JUDIS
@stefanjudis
www.stefanjudis.com
[email protected]

View Slide

2013

View Slide

"Super fast and revolutionary
because of the virtual DOM 
and JSX."
MAGIC!

View Slide

THERE IS NO
MAGIC IN CODE!

View Slide

SOMETIMES 
IT FEELS  
LIKE MAGIC

View Slide

TAKE A BREAK!

View Slide

Matthias

View Slide

IMPERATIVE

View Slide

Go out of the door and turn left. 
Get on Frankfurter Allee until you
get to the Proskauer Straße. 
Go left at the park.
Go to the end of the park. 
My house is #22.

View Slide

The imperative programming
paradigm uses statements  
that change a program's state.
“

View Slide

DECLARATIVE

View Slide

My address is Berlin,
Friedrichshain.

View Slide

“
The declarative programming
paradigm expresses the logic of a
computation without describing
its control ﬂow.

View Slide

Imperative
function double (arr) {
let results = [];
for (let i = 0; i < arr.length; i++){
results.push(arr[i] * 2);
}
return results;
}
Declarative
function double (arr) {
return arr.map((item) => item * 2);
}

View Slide

INTERFACES

View Slide

const $btn = document.getElementById('btn');
$btn.addEventListener('click', _ => {
$btn.classList.toggle('is-highlighted');
$btn.innerText = $btn.innerText === 'Highlight me!' ?
'Please stop!' :
'Highlight me!';
});
Imperative UI

View Slide

Declarative UI
type="button"
highlighted={highlighted}
onclick={this.toggleHighlight}>
{ highlighted ? 'Please stop!': 'Highlight me!' }

View Slide

type="button"

View Slide

export default class App extends Component {
...
render(props, { highlighted }) {
return (
type="button"

);
}
}
codesandbox.io/s/rwjol2n3op

View Slide

...
return (
type="button"

);
}
}
THAT'S NOT
JAVASCRIPT!?

View Slide

CODE
TRANSFORMS

View Slide

!
&
?
PARSE
!
~ ?
TRANSFORM
GENERATE

View Slide

./example/input.js
const year = (new Date()).getFullYear();
const msg = `:tada: Frontend Con ${year}! :tada:`;
console.log(msg);

View Slide

View Slide

babeljs.io

View Slide

PARSE
with
Babylon

View Slide

const {parse} = require('babylon');
const code = `
const year = (new Date()).getFullYear();
const msg = ':tada: Frontend Con ${year}! :tada:';
console.log(msg);
`;
const ast = parse(code);
./my-own-code-transform/index.js

View Slide

AST
( Abstract Syntax Tree )

View Slide

“In computer science,
an abstract syntax tree (AST), [...],
is a tree representation of the
abstract syntactic structure
of source code written in a
programming language.

View Slide

View Slide

{
"type": "Program",
"start": 0,
"end": 105,
"loc": {
"start": {
"line": 1,
"column": 0
},
"end": {
"line": 3,
"column": 17
}
}
}

View Slide

{
"type": "VariableDeclaration",
"start": 0,
"end": 40,
"loc": {
"start": {
"line": 1,
"column": 0
},
"end": {
"line": 1,
"column": 40
}
},
"declarations": [...],
"kind": "const"
}

View Slide

{
"type": "ExpressionStatement",
"start": 88,
"end": 105,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 3,
"column": 17
}
},
"expression": {...}
}

View Slide

./example/input.js

View Slide

./example/input.js
VariableDeclaration

View Slide

./example/input.js
VariableDeclarator
VariableDeclaration

View Slide

./example/input.js
VariableDeclarator
VariableDeclaration
Identifier

View Slide

./example/input.js
VariableDeclarator
VariableDeclaration
Identifier TemplateLiteral

View Slide

./example/input.js
VariableDeclarator
VariableDeclaration
TemplateElement

View Slide

./example/input.js
VariableDeclarator
VariableDeclaration
TemplateElement
Identifier

View Slide

./example/input.js
VariableDeclarator
VariableDeclaration
TemplateElement TemplateElement
Identifier

View Slide

astexplorer.net

View Slide

ASTs are
everywhere

View Slide

astexplorer.net

View Slide

ctfl.io/asts-in-graphql

View Slide

TRANSFORM
with
@babel/traverse

View Slide

VISITOR PATTERN
( design pattern described by the "Gang of Four" )

View Slide

const code = `...`;

View Slide

const {default: traverse} = require('@babel/traverse');
const code = `...`;
traverse(ast, {
enter ({node}) {
if (node.type === 'TemplateElement') {
node.value.raw = node.value.raw.replace(/:tada:/g, '\u{1F389}');
}
}
});

View Slide

GENERATE
with
@babel/generator

View Slide

const code = `...`;
traverse(ast, {
enter (path) { /* ... */ }
});

View Slide

const {default: generate} = require('@babel/generator');
const code = `...`;
traverse(ast, {
enter (path) { /* ... */ }
});
console.log(generate(ast).code);

View Slide

View Slide

BABEL
PLUGIN

View Slide

./lib/index.js
export default function () {
return {
visitor: {
TemplateElement({node}) {
node.value.raw = node.value.raw.replace(
/:tada:/g, '\u{1F389}'
);
}
}
};
}

View Slide

export default function () {
return {
visitor: {
TemplateElement({node}) {
node.value.raw = node.value.raw.replace(
/:tada:/g, '\u{1F389}'
);
}
}
};
}
./lib/index.js

View Slide

github.com/jamiebuilds/babel-handbook

View Slide

JSX
( just another transform )

View Slide

babel-plugin-transform-react-jsx
const App = () => {
return :tada: Frontend Con 2018! :tada:;
};

View Slide

const App = () => {
};
ReturnStatement

View Slide

const App = () => {
};
ReturnStatement
JSXElement

View Slide

const App = () => {
};
ReturnStatement
JSXElement
JSXOpeningElement

View Slide

const App = () => {
};
ReturnStatement
JSXElement
JSXOpeningElement JSXText

View Slide

const App = () => {
};
ReturnStatement
JSXElement
JSXOpeningElement JSXText JSXClosingElement

View Slide

const App = () => {
return React.createElement(
"h1",
null,
"! Frontend Con 2018! !"
);
};
const App = () => {
};

View Slide

const App = () => {
};
const App = () => {
"h1",
null,
);
};

View Slide

const App = () => {
};
const App = () => {
"h1",
null,
);
};
REACT?

View Slide

/* @jsx heroify */
const App = () => {
};

View Slide

/* @jsx heroify */
const App = () => {
return heroify(
"h1",
null,
);
};
/* @jsx heroify */
const App = () => {
};

View Slide

/* @jsx h */
const App = () => {
};
/* @jsx h */
const App = () => {
return h(
"h1",
null,
);
};

View Slide

/* @jsx h */
import {h} from 'preact';
const App = () => {
};
/* @jsx h */
const App = () => {
return h(
"h1",
null,
);
};

View Slide

/* @jsx h */
const App = () => {
};
/* @jsx h */
const App = () => {
return h(
"h1",
null,
);
};
JSX is only
one option

View Slide

View Slide

vue-template-explorer.now.sh

View Slide

vue-template-explorer.now.sh
You don't need
a complex
build setup

View Slide

You don't need JSX

View Slide

You don't need JSX

 /* Preact 8.2.9 */ !function () { "use strict"; function e() { } function ... 

View Slide

You don't need JSX


 const { h, render } = window.preact; 

View Slide

You don't need JSX


 const { h, render } = window.preact; render( h('h1', {class: 'headline-1'}, '! Frontend Con 2018! !'), document.body ); 

View Slide

reactjs.org/docs/react-without-jsx.html

View Slide

github.com/developit/htm

View Slide

h()?

View Slide

github.com/hyperhype/hyperscript

View Slide

const h = (nodeName, attributes, ...children) => {};
./our-hyperscript.js

View Slide

const h = (nodeName, attributes, ...children) => {
const el = document.createElement(nodeName);
return el;
};

View Slide

for (let key in attributes) {
el.setAttribute(key, attributes[key]);
}
return el;
};

View Slide

}

View Slide

for (const key of Object.keys(attributes)) {
}

View Slide

for (const [key, value] of Object.entries(attributes)) {
el.setAttribute(key, value);
}

View Slide

ctfl.io/fun-with-enumeration

View Slide

}
return el;
};

View Slide

}
children.forEach(child => {
if (typeof child === 'string') {
el.appendChild(document.createTextNode(child));
} else {
el.appendChild(child);
}
});
return el;
};

View Slide

import h from './our-hyperscript.js';
const App = () => {
return h(
"h1",
null,
);
};
console.log('App()', App());
./app.js

View Slide

const App = () => {
return h(
"h1",
null,
);
};
./app.js

View Slide

./app.js
return (
,
! Frontend Con 2018! !

{...list.map(item => {item})}

);
};

View Slide

h('ul', null,
);
);
};
./app.js

View Slide

const App = (props) => {...};
./app.js

View Slide

let currentApp;
const render = (state) => {
const newApp = App(state);
if (currentApp) {
document.body.replaceChild(newApp, currentApp);
} else {
document.body.appendChild(newApp);
}
currentApp = newApp;
};
./app.js

View Slide

let currentApp;
const render = (state) => {...};
./app.js

View Slide

let currentApp;
const state = {
list: [
'"', '#', '$', '%', '&',
''', '(', ')', '*', '+'
]
};
./app.js

View Slide

let currentApp;
const state = {
list: [
'"', '#', '$', '%', '&',
''', '(', ')', '*', '+'
]
};
render(state);
./app.js

View Slide

View Slide

NICELY
DECLARATIVE

View Slide

let currentApp;
const state = {...};
render(state);
./app.js

View Slide

let currentApp;
const state = {...};
render(state);
setInterval(_ => {
state.list = [
...state.list,
getRandomItemFromArray(state.list)
];
render(state);
}, 1000);
./app.js

View Slide

View Slide

A LOT OF
WORK TO DO

View Slide

“We want to render components
and have them updated
only when data changes
- that's where the power of
vDOM difﬁng shines.

View Slide

vWHAT?

View Slide

Virtual DOM on GitHub

View Slide

Features Community
Performance
Which one should I use?
DX
Documentation
Ecosystem
Stability

View Slide

Features Community
Performance
Which one should I use?
DX
Documentation
Ecosystem
Stability
There are always
trade-offs...

View Slide

h()

View Slide

}
children.forEach(child => {
if (typeof child === 'string') {
el.appendChild(document.createTextNode(child));
} else {
el.appendChild(child);
}
})
return el;
}
./our-vdom.js

View Slide

./our-vdom.js
return {nodeName, attributes, children};
}
h(...) → virtual DOM nodes

View Slide

h('ul', null,
)
);
};
./app.js

View Slide

./app.js
{
"nodeName": "div",
"attributes": { "class": "app" },
"children": [
{
"nodeName": "h1",
"attributes": null,
"children": ["! Frontend Con 2018! !"]
},
{
"nodeName": "ul",
"attributes": null,
"children": [
{
"nodeName": "li",
"attributes": null,
"children": ["""]
},

View Slide

const renderNode = (vnode) => {
}
./our-vdom.js

View Slide

let el;
const {nodeName, attributes, children} = vnode;
}
./our-vdom.js

View Slide

let el;
if (vnode.split) return document.createTextNode(vnode);
}
./our-vdom.js

View Slide

let el;
el = document.createElement(nodeName);
}
./our-vdom.js

View Slide

let el;
}
}
./our-vdom.js

View Slide

let el;
}
(children || []).forEach(c => el.appendChild(renderNode(c)));
return el;
}
./our-vdom.js

View Slide

let currentApp;
const newApp = App(state);
if (currentApp) {
} else {
}
};
./app.js

View Slide

let currentApp;
const newApp = renderNode(App(state));
if (currentApp) {
} else {
}
};
./app.js

View Slide

MORE CONTROL

View Slide

COMPONENT
RENDERING

View Slide

./app.js
const App = ({list}) => {
h('ul', null,
);
);
};

View Slide

./app.js
class App {
constructor () {
this.state = { list: ['"', '#', '$', ...] };
}
render (props, state) {
const {list} = state;
h('ul', null,
)
);
}
}

View Slide

./app.js
class App {
constructor () {
this.state = { list: ['"', '#', '$', ...] };
}
render (props, {list}) {
h('ul', null,
)
);
}
}

View Slide

let el;
}
return el;
}
./our-vdom.js

View Slide

let el;
if (typeof nodeName === 'string') {
}
}
return el;
}
./our-vdom.js

View Slide

let el;
// ...
}
return el;
}
./our-vdom.js

View Slide

let el;
// ...
} else if (typeof nodeName === 'function') {
// ...
}
return el;
}
./our-vdom.js

View Slide

let el;
// ...
// ...
}
return el;
}
./our-vdom.js
overreacted.io/how-does-react-tell-a-class-from-a-function/

View Slide

let el;
// ...
// ...
}
return el;
}
./our-vdom.js

View Slide

let el;
// ...
const component = new nodeName(attributes);
el = renderNode(component.render(component.props, component.state));
component.base = el;
}
return el;
}
./our-vdom.js

View Slide

let el;
// ...
const component = new nodeName(attributes);
el = renderNode(component.render(component.props, component.state));
component.base = el;
}
return el;
}
./our-vdom.js
A COMPONENT
HOLDS A DOM
REFERENCE

View Slide

setState()

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
}
render (props, {list}) {
h('ul', null,
)
);
}
}

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
}
render (props, {list}) {...}
}

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
this.timer = setInterval(_ => {
this.setState({
list: [...this.state.list, getRandomItemFromArray(state.list)]
});
}, 1000);
}
}

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
this.setState({
});
}, 1000);
}
setState(state) {
this.state = Object.assign(this.state, state);
renderComponent(this);
}
}

View Slide

renderComponent()
,
,
,
,
, !
!
-
. .
/
/

View Slide

const renderComponent = (component) => {
};
./our-vdom.js

View Slide

const oldBase = component.base;
};
./our-vdom.js

View Slide

component.base = renderNode(
component.render(component.props, component.state)
);
};
./our-vdom.js

View Slide

);
oldBase.parentNode.replaceChild(component.base, oldBase);
};
./our-vdom.js

View Slide

);
}
COMPONENTS  
RENDER  
AUTONOMOUSLY
./our-vdom.js

View Slide

render()
render()
setState({...})
renderComponent(this)
render()
render()
document.body
APP
SIDEBAR
WIDGET
MAIN
SLIDER
TABS
SIDEBAR
WIDGET
SLIDER
TABS

View Slide

render()
LIST
document.body
APP
LIST
setInterval(...)
setState({...})

View Slide

View Slide

document.body
APP
... ... ...

View Slide

DIFFING

View Slide

);
};
./our-vdom.js

View Slide

);
};
DOM
./our-vdom.js

View Slide

);
};
virtual DOM
./our-vdom.js

View Slide

{
nodeName: 'div',
attributes: {
key: 'value'
},
children: [
'text node'
]
}
Element(
nodeName: 'div',
attributes: {
getItem('key'),
setItem('key', 'value')
},
childNodes: [
TextNode('text node')
]
)
DOM virtual DOM
./our-vdom.js

View Slide

);
};
./our-vdom.js

View Slide

};
./our-vdom.js

View Slide

const rendered = component.render(
component.props, component.state
);
};
./our-vdom.js

View Slide

);
diff(component.base, rendered);
};
./our-vdom.js

View Slide

);
component.base = diff(component.base, rendered);
};
./our-vdom.js

View Slide

const diff = (dom, vnode) => {
};
./our-vdom.js

View Slide

const newDom = renderNode(vnode);
dom.parentNode.replaceChild(newDom, dom);
return newDom;
};
./our-vdom.js

View Slide

const hasNewKids = dom.childNodes.length !== vnode.children.length;
if (hasNewKids) {
} else {
return newDom;
}
};
./our-vdom.js

View Slide

if (hasNewKids) {
dom.appendChild(
renderNode(vnode.children[vnode.children.length - 1])
);
return dom;
} else {
return newDom;
}
};
./our-vdom.js

View Slide

View Slide

ONLY TOUCH
WHAT CHANGED

View Slide

DOM
{
nodeName: 'div',
attributes: {
key: 'value'
},
children: [
'text node'
]
}
Element(
nodeName: 'div',
attributes: {
getItem('key'),
setItem('key', 'value')
},
childNodes: [
TextNode('text node')
]
)
virtual DOM

View Slide

./app.js
if (hasNewKids) {
dom.appendChild(
renderNode(vnode.children[vnode.children.length - 1])
);
return dom;
} else {
return newDom;
}
};

View Slide

./app.js
};

View Slide

./app.js
// compare type
};

View Slide

./app.js
// compare type
// compare attributes
};

View Slide

./app.js
// compare type
// compare children
};

View Slide

./app.js
// compare type
// compare children
// optimise as much as you can!
};

View Slide

www.youtube.com/watch?v=LY6y3HbDVmg

View Slide

REDUCE DOM
DIFFING

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
this.setState({
});
}, 1000);
}
setState(state) {
}
}

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
this.setState({
});
}, 1000);
}
setState(state) {
this.prevState = Object.assign({}, this.state);
}
}

View Slide

);
};
./our-vdom.js

View Slide

const {state, props} = component;
component.state = component.prevState;
component.props = component.prevProps;
);
};
./our-vdom.js

View Slide

const {state, props} = component;
component.state = component.prevState;
component.props = component.prevProps;
if (component.shouldComponentUpdate(props, state)) {
component.props = props;
component.state = state;
);
}
};
./our-vdom.js

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
this.setState({
});
}, 1000);
}
setState(state) {
this.prevState = Object.assign({}, state);
}
}

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
this.setState({
});
}, 1000);
}
setState(state) {...}
}

View Slide

./app.js
class App {
constructor () {
this.state = { list: [ '"', '#', '$', ... ] };
this.setState({
});
}, 1000);
}
shouldComponentUpdate(nextProps, nextState) {
return this.state.list.length !== nextState.list.length;
}
setState(state) {...}
}

View Slide

SAVE EVEN
MORE WORK

View Slide

parcelRequire=function(e,r,n){var t="function"==typeof parcelRequire&&parcelRequire,i="function"==typeof require&&require;function u(n,o){if(!r[n]){if(!e[n])
{var f="function"==typeof parcelRequire&&parcelRequire;if(!o&&f)return f(n,!0);if(t)return t(n,!0);if(i&&"string"==typeof n)return i(n);var c=new Error("Cannot
find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}a.resolve=function(r){return e[n][1][r]||r};var l=r[n]=new u.Module(n);e[n]
[0].call(l.exports,a,l,l.exports)}return r[n].exports;function a(e){return u(a.resolve(e))}}u.isParcelRequire=!0,u.Module=function(e)
{this.id=e,this.bundle=u,this.exports={}},u.modules=e,u.cache=r,u.parent=t;for(var o=0;o{ var e=function(){function e(e,t){for(var n=0;n0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}();function t(e){if(Array.isArray(e)){for(var
t=0,n=Array(e.length);tsuper() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new
TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!
1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function o(e,t){if(!(e instanceof t))throw new
T y p e E r r o r ( " C a n n o t c a l l a c l a s s a s a f u n c t i o n " ) } v a r i = f u n c t i o n ( e , t ) { f o r ( v a r n = a r g u m e n t s . l e n g t h , r = A r r a y ( n > 2 ? n - 2 : 0 ) , o = 2 ; o < n ; o +
+)r[o-2]=arguments[o];return{nodeName:e,attributes:t,children:r}},a=function(e){var t=e.base,n=e.render(e.props,e.state),r=u(t,n);e.base=r},u=function e(t,n,r)
{if(t){if("string"==typeof n)return t.nodeValue=n,t;if("function"==typeof n.nodeName){var o=new n.nodeName(n.attributes);return
e(t,o.render(o.props,o.state)),t}t.childNodes.length!==n.children.length&&t.appendChild(f(n.children[n.children.length-1]));for(var i=0;i+)e(t.childNodes[i],n.children[i]);return t}var a=f(n);return r.appendChild(a),a},s=function(){function t(e){o(this,t),this.props=e,this.state={}}return e(t,
[{key:"setState",value:function(e){this.state=Object.assign(this.state,e),a(this)}}]),t}(),l=function(a){function u(e){o(this,u);var r=n(this,(u.__proto__||
Object.getPrototypeOf(u)).call(this,e));return r.state.list=["" ","# ","$ ","% ","& ","' ","( ",") ","* ","+ "],r.timer=setInterval(function()
{r.setState({list:[].concat(t(r.state.list),[r.state.list[Math.floor(Math.random()*r.state.list.length)]])})},1e3),r}return r(u,s),e(u,
[{key:"render",value:function(e,t){var n=t.list;return i("div",{class:"app"},i("h1",null,"! JSHeroes 2018! ! "),i(c,{list:n}))}}]),u}(),c=function(a){function
u(){return o(this,u),n(this,(u.__proto__||Object.getPrototypeOf(u)).apply(this,arguments))}return r(u,s),e(u,[{key:"render",value:function(e,n){return
i . a p p l y ( v o i d 0 , [ " u l " , n u l l ] . c o n c a t ( t ( e . l i s t . m a p ( f u n c t i o n ( e ) { r e t u r n i ( " l i " , n u l l , e ) } ) ) ) ) } } ] ) , u } ( ) , f = f u n c t i o n e ( t ) { v a r n = v o i d
0 , r = t . n o d e N a m e , o = t . a t t r i b u t e s , i = t . c h i l d r e n ; i f ( t . s p l i t ) r e t u r n d o c u m e n t . c r e a t e T e x t N o d e ( t ) ; i f ( " s t r i n g " = = t y p e o f r ) f o r ( k e y i n
n = d o c u m e n t . c r e a t e E l e m e n t ( r ) , o ) " o " = = k e y [ 0 ] & & " n " = = k e y [ 1 ] ? n . a d d E v e n t L i s t e n e r ( k e y . t o L o w e r C a s e ( ) . s u b s t r i n g ( 2 ) , o [ k e y ] ) : " c l a s s " = = = k e y ?
n.className=o[key]:n.setAttribute(key,o[key]);else if("function"==typeof r){var a=new r(o);n=e(a.render(a.props,a.state)),a.base=n}return(i||
[]).forEach(function(t){return n.appendChild(e(t))}),n},p=function(e,t){u(void 0,e,t)};p(i(l),document.body);
},{}]},{},[4])
app.min.js
vDOM example on Codepen

View Slide

preact.min.js

View Slide

BENEFITS

View Slide

DECLARATIVE UI

View Slide

...
return (
type="button"

);
}
}

View Slide

...
'button',
{
type: 'button',
highlighted: highlighted,
onclick: this.toggleHighlight
},
highlighted ? 'Please stop!' : 'Highlight me!'
);
}
}

View Slide

...
'button',
{
type: 'button',
highlighted: highlighted,
onclick: this.toggleHighlight
},
highlighted ? 'Please stop!' : 'Highlight me!'
);
}
}
It's "just"
function calls

View Slide

SMART AND
SELECTIVE 
RENDERING

View Slide

render()
render()
setState({...})
render()
render()
document.body
APP
SIDEBAR
WIDGET
MAIN
SLIDER
TABS
SIDEBAR
WIDGET
SLIDER
TABS

View Slide

LIMITED DOM
OPERATIONS

View Slide

./app.js
// compare type
// compare children
}

View Slide

function enqueueRender(component) {
// ...
}

View Slide

BUT IS THE
vDOM THE 
SILVER BULLET?

View Slide

github.com/Polymer/lit-html github.com/WebReflection/hyperHTML

View Slide

import { html, render } from 'lit-html';
const data = { list: ['"', ..., '+'] };

View Slide

const data = { list: ['"', ..., '+'] };
return html`


${ list.map(item => html`${ item }`) }

`
};

View Slide

const data = { list: ['"', ..., '+'] };
return html`


${ list.map(item => html`${ item }`) }

`
};
render(App(data), document.body);

View Slide

html`${ item }`

View Slide

html`${ '"' }`
function html(...args) {
console.log(args);
}
[['', ''], '"']

View Slide

html`${ '"' } ${ Math.random() }`
function html(...args) {
console.log(args);
}
[['', ' ', '' ], '"', 0.62...]

View Slide

html`${ '"' } ${ Math.random() }`
function html(chunks, ...interpolations) {
// diff only things that can change
}
[['', ' ', '' ], '"', 0.62...]

View Slide

What the v...DOM?

What the v...DOM?

stefan judis

More Decks by stefan judis

Other Decks in Technology

Featured

Transcript