What the v...DOM?

WHAT THE v...DOM? @stefanjudis

STEFAN JUDIS @stefanjudis www.stefanjudis.com stefan.judis@contentful.com

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

THERE IS NO MAGIC IN CODE!

SOMETIMES  IT FEELS   LIKE MAGIC

TAKE A BREAK!

Matthias

IMPERATIVE

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.

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

DECLARATIVE

My address is Berlin, Friedrichshain.

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

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); }

INTERFACES

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

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

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

export default class App extends Component { ... render(props, {
highlighted }) { return ( <button type="button" highlighted={highlighted} onclick={this.toggleHighlight}> { highlighted ? 'Please stop!': 'Highlight me!' } </button> ); } } codesandbox.io/s/rwjol2n3op

highlighted }) { return ( <button type="button" highlighted={highlighted} onclick={this.toggleHighlight}> { highlighted ? 'Please stop!': 'Highlight me!' } </button> ); } } codesandbox.io/s/rwjol2n3op THAT'S NOT JAVASCRIPT!?

CODE TRANSFORMS

! & ? PARSE ! ~ ? TRANSFORM GENERATE

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

babeljs.io

PARSE with Babylon

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

AST ( Abstract Syntax Tree )

“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.

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

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

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

const msg = `:tada: Frontend Con ${year}! :tada:`; ./example/input.js

const msg = `:tada: Frontend Con ${year}! :tada:`; ./example/input.js VariableDeclaration

./example/input.js VariableDeclarator const msg = `:tada: Frontend Con ${year}! :tada:`;
VariableDeclaration

VariableDeclaration Identifier

VariableDeclaration Identifier TemplateLiteral

VariableDeclaration Identifier TemplateLiteral TemplateElement

VariableDeclaration Identifier TemplateLiteral TemplateElement Identifier

VariableDeclaration Identifier TemplateLiteral TemplateElement TemplateElement Identifier

astexplorer.net

ASTs are everywhere

astexplorer.net

ctfl.io/asts-in-graphql

TRANSFORM with @babel/traverse

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

const {parse} = require('babylon'); const code = `...`; const ast
= parse(code); ./my-own-code-transform/index.js

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

GENERATE with @babel/generator

const {parse} = require('babylon'); const {default: traverse} = require('@babel/traverse'); const
code = `...`; const ast = parse(code); traverse(ast, { enter (path) { /* ... */ } }); ./my-own-code-transform/index.js

./my-own-code-transform/index.js const {parse} = require('babylon'); const {default: traverse} = require('@babel/traverse');
const {default: generate} = require('@babel/generator'); const code = `...`; const ast = parse(code); traverse(ast, { enter (path) { /* ... */ } }); console.log(generate(ast).code);

BABEL PLUGIN

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

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

github.com/jamiebuilds/babel-handbook

JSX ( just another transform )

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

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

2018! :tada:</h1>; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement

2018! :tada:</h1>; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement JSXOpeningElement

2018! :tada:</h1>; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement JSXOpeningElement JSXText

2018! :tada:</h1>; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement JSXOpeningElement JSXText JSXClosingElement

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

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

2018! :tada:</h1>; }; const App = () => { return React.createElement( "h1", null, "! Frontend Con 2018! !" ); }; REACT?

/* @jsx heroify */ const App = () => {
return <h1>:tada: Frontend Con 2018! :tada:</h1>; }; babel-plugin-transform-react-jsx

/* @jsx heroify */ const App = () => {
return heroify( "h1", null, "! Frontend Con 2018! !" ); }; /* @jsx heroify */ const App = () => { return <h1>:tada: Frontend Con 2018! :tada:</h1>; };

/* @jsx h */ const App = () => {
return <h1>:tada: Frontend Con 2018! :tada:</h1>; }; /* @jsx h */ const App = () => { return h( "h1", null, "! Frontend Con 2018! !" ); };

/* @jsx h */ import {h} from 'preact'; const App
= () => { return <h1>:tada: Frontend Con 2018! :tada:</h1>; }; /* @jsx h */ import {h} from 'preact'; const App = () => { return h( "h1", null, "! Frontend Con 2018! !" ); };

/* @jsx h */ import {h} from 'preact'; const App
= () => { return <h1>:tada: Frontend Con 2018! :tada:</h1>; }; /* @jsx h */ import {h} from 'preact'; const App = () => { return h( "h1", null, "! Frontend Con 2018! !" ); }; JSX is only one option

vue-template-explorer.now.sh

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

<!DOCTYPE html> <html> <head> <title>You don't need JSX</title> <link rel="stylesheet"
href="https: //contentful.github.io/ .../cf-extension.css"> <script src="https: //unpkg.com/contentful-ui-extensions-sdk@3"> </script> </head> <body> </body> </html>

href="https: //contentful.github.io/ .../cf-extension.css"> <script src="https: //unpkg.com/contentful-ui-extensions-sdk@3"> </script> <script> /* Preact 8.2.9 */ !function () { "use strict"; function e() { } function ... </script> </head> <body> </body> </html>

href="https: //contentful.github.io/ .../cf-extension.css"> <script src="https: //unpkg.com/contentful-ui-extensions-sdk@3"> </script> <script> /* Preact 8.2.9 */ !function () { "use strict"; function e() { } function ... </script> </head> <body> <script> const { h, render } = window.preact; </script> </body> </html>

href="https: //contentful.github.io/ .../cf-extension.css"> <script src="https: //unpkg.com/contentful-ui-extensions-sdk@3"> </script> <script> /* Preact 8.2.9 */ !function () { "use strict"; function e() { } function ... </script> </head> <body> <script> const { h, render } = window.preact; render( h('h1', {class: 'headline-1'}, '! Frontend Con 2018! !'), document.body ); </script> </body> </html>

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

github.com/developit/htm

github.com/hyperhype/hyperscript

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

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

= document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } return el; }; ./our-hyperscript.js

for (let key in attributes) { el.setAttribute(key, attributes[key]); } ./our-hyperscript.js

for (const key of Object.keys(attributes)) { el.setAttribute(key, attributes[key]); } ./our-hyperscript.js

for (const [key, value] of Object.entries(attributes)) { el.setAttribute(key, value); }
./our-hyperscript.js

ctfl.io/fun-with-enumeration

= document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } return el; }; ./our-hyperscript.js

= document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } children.forEach(child => { if (typeof child === 'string') { el.appendChild(document.createTextNode(child)); } else { el.appendChild(child); } }); return el; }; ./our-hyperscript.js

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

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

const App = (props) => { const {list} = props;
return h('div', {class: 'app'}, h('h1', null, '! Frontend Con 2018! !'), h('ul', null, ...list.map(item => h('li', null, item)) ) ); }; ./app.js

./app.js const App = (props) => { const {list} =
props; return ( <div class="app">, <h1>! Frontend Con 2018! !</h1> <ul> {...list.map(item => <li>{item}</li>)} </ul> </div> ); };

return h('div', {class: 'app'}, h('h1', null, '! Frontend Con 2018! !'), h('ul', null, ...list.map(item => h('li', null, item)) ); ); }; ./app.js

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

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

= (state) => {...}; ./app.js

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

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

NICELY DECLARATIVE

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

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

A LOT OF WORK TO DO

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

vWHAT?

Virtual DOM on GitHub

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

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

= document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } children.forEach(child => { if (typeof child === 'string') { el.appendChild(document.createTextNode(child)); } else { el.appendChild(child); } }) return el; } ./our-vdom.js

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

return h('div', {class: 'app'}, h('h1', null, '! Frontend Con 2018! !'), h('ul', null, ...list.map(item => h('li', null, item)) ) ); }; ./app.js

const App = (props) => {...}; ./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": ["""] },

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

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

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); el = document.createElement(nodeName); } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); el = document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); el = document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } (children || []).forEach(c => el.appendChild(renderNode(c))); return el; } ./our-vdom.js

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

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

MORE CONTROL

COMPONENT RENDERING

./app.js const App = ({list}) => { return h('div', {class:
'app'}, h('h1', null, '! Frontend Con 2018! !'), h('ul', null, ...list.map(item => h('li', null, item)) ); ); };

./app.js class App { constructor () { this.state = {
list: ['"', '#', '$', ...] }; } render (props, state) { const {list} = state; return h('div', {class: 'app'}, h('h1', null, '! Frontend Con 2018! !'), h('ul', null, ...list.map(item => h('li', null, item)) ) ); } }

list: ['"', '#', '$', ...] }; } render (props, {list}) { return h('div', {class: 'app'}, h('h1', null, '! Frontend Con 2018! !'), h('ul', null, ...list.map(item => h('li', null, item)) ) ); } }

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); el = document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } (children || []).forEach(c => el.appendChild(renderNode(c))); return el; } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); if (typeof nodeName === 'string') { el = document.createElement(nodeName); for (let key in attributes) { el.setAttribute(key, attributes[key]); } (children || []).forEach(c => el.appendChild(renderNode(c))); } return el; } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); if (typeof nodeName === 'string') { // ... } return el; } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); if (typeof nodeName === 'string') { // ... } else if (typeof nodeName === 'function') { // ... } return el; } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); if (typeof nodeName === 'string') { // ... } else if (typeof nodeName === 'function') { // ... } return el; } ./our-vdom.js overreacted.io/how-does-react-tell-a-class-from-a-function/

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); if (typeof nodeName === 'string') { // ... } else if (typeof nodeName === 'function') { // ... } return el; } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); if (typeof nodeName === 'string') { // ... } else if (typeof nodeName === 'function') { const component = new nodeName(attributes); el = renderNode(component.render(component.props, component.state)); component.base = el; } return el; } ./our-vdom.js

attributes, children} = vnode; if (vnode.split) return document.createTextNode(vnode); if (typeof nodeName === 'string') { // ... } else if (typeof nodeName === 'function') { 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

setState()

list: [ '"', '#', '$', ... ] }; } render (props, {list}) { return h('div', {class: 'app'}, h('h1', null, '! Frontend Con 2018! !'), h('ul', null, ...list.map(item => h('li', null, item)) ) ); } }

list: [ '"', '#', '$', ... ] }; } render (props, {list}) {...} }

list: [ '"', '#', '$', ... ] }; this.timer = setInterval(_ => { this.setState({ list: [...this.state.list, getRandomItemFromArray(state.list)] }); }, 1000); } render (props, {list}) {...} }

list: [ '"', '#', '$', ... ] }; this.timer = setInterval(_ => { this.setState({ list: [...this.state.list, getRandomItemFromArray(state.list)] }); }, 1000); } setState(state) { this.state = Object.assign(this.state, state); renderComponent(this); } render (props, {list}) {...} }

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

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

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

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

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

component.base = renderNode( component.render(component.props, component.state) ); oldBase.parentNode.replaceChild(component.base, oldBase); } COMPONENTS   RENDER   AUTONOMOUSLY ./our-vdom.js

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

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

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

DIFFING

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

component.base = renderNode( component.render(component.props, component.state) ); oldBase.parentNode.replaceChild(component.base, oldBase); }; virtual DOM ./our-vdom.js

{ 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

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

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

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

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

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

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

ONLY TOUCH WHAT CHANGED

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

./app.js const diff = (dom, vnode) => { const hasNewKids
= dom.childNodes.length !== vnode.children.length; if (hasNewKids) { dom.appendChild( renderNode(vnode.children[vnode.children.length - 1]) ); return dom; } else { const newDom = renderNode(vnode); dom.parentNode.replaceChild(newDom, dom); return newDom; } };

./app.js const diff = (dom, vnode) => { };

./app.js const diff = (dom, vnode) => { // compare
type };

type // compare attributes };

type // compare attributes // compare children };

type // compare attributes // compare children // optimise as much as you can! };

www.youtube.com/watch?v=LY6y3HbDVmg

REDUCE DOM DIFFING

list: [ '"', '#', '$', ... ] }; this.timer = setInterval(_ => { this.setState({ list: [...this.state.list, getRandomItemFromArray(state.list)] }); }, 1000); } setState(state) { this.state = Object.assign(this.state, state); renderComponent(this); } render (props, {list}) {...} }

list: [ '"', '#', '$', ... ] }; this.timer = setInterval(_ => { this.setState({ list: [...this.state.list, getRandomItemFromArray(state.list)] }); }, 1000); } setState(state) { this.prevState = Object.assign({}, this.state); this.state = Object.assign(this.state, state); renderComponent(this); } render (props, {list}) {...} }

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

const renderComponent = (component) => { const {state, props} =
component; component.state = component.prevState; component.props = component.prevProps; const rendered = component.render( component.props, component.state ); component.base = diff(component.base, rendered); }; ./our-vdom.js

list: [ '"', '#', '$', ... ] }; this.timer = setInterval(_ => { this.setState({ list: [...this.state.list, getRandomItemFromArray(state.list)] }); }, 1000); } setState(state) { this.prevState = Object.assign({}, state); this.state = Object.assign(this.state, state); renderComponent(this); } render (props, {list}) {...} }

list: [ '"', '#', '$', ... ] }; this.timer = setInterval(_ => { this.setState({ list: [...this.state.list, getRandomItemFromArray(state.list)] }); }, 1000); } setState(state) {...} render (props, {list}) {...} }

list: [ '"', '#', '$', ... ] }; this.timer = setInterval(_ => { this.setState({ list: [...this.state.list, getRandomItemFromArray(state.list)] }); }, 1000); } shouldComponentUpdate(nextProps, nextState) { return this.state.list.length !== nextState.list.length; } setState(state) {...} render (props, {list}) {...} }

SAVE EVEN MORE WORK

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<n.length;o++)u(n[o]);return u}({4:[function(require,module,exports) { var e=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=! 0),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);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() 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<n.children.length;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

preact.min.js

BENEFITS

DECLARATIVE UI

highlighted }) { return ( <button type="button" highlighted={highlighted} onclick={this.toggleHighlight}> { highlighted ? 'Please stop!': 'Highlight me!' } </button> ); } } codesandbox.io/s/rwjol2n3op

codesandbox.io/s/rwjol2n3op export default class App extends Component { ... render(props,
{ highlighted }) { return React.createElement( 'button', { type: 'button', highlighted: highlighted, onclick: this.toggleHighlight }, highlighted ? 'Please stop!' : 'Highlight me!' ); } }

codesandbox.io/s/rwjol2n3op export default class App extends Component { ... render(props,
{ highlighted }) { return React.createElement( 'button', { type: 'button', highlighted: highlighted, onclick: this.toggleHighlight }, highlighted ? 'Please stop!' : 'Highlight me!' ); } } It's "just" function calls

SMART AND SELECTIVE  RENDERING

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

LIMITED DOM OPERATIONS

type // compare attributes // compare children }

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

BUT IS THE vDOM THE  SILVER BULLET?

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

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

{ list: ['"', ..., '+'] }; const App = ({list}) => { return html` <div class="app"> <h1>! Frontend Con 2018! !</h1> <ul> ${ list.map(item => html`<li>${ item }</li>`) } </ul> </div> ` };

{ list: ['"', ..., '+'] }; const App = ({list}) => { return html` <div class="app"> <h1>! Frontend Con 2018! !</h1> <ul> ${ list.map(item => html`<li>${ item }</li>`) } </ul> </div> ` }; render(App(data), document.body);

html`<li>${ item }</li>`

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

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

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

Only certain nodes can change!

A DIFFERENT APPROACH

NEW POSSIBILITIES

codepen.io/WebReflection/pen/JObreJ?editors=0010

I READ A LOT OF PREACT CODE

YOU'LL NEVER GET IT!

SLEEPLESS NIGHTS

A LOT OF BREAKS

AND THEN  IT MADE SENSE

THERE IS NO MAGIC IN CODE!

THANKS FOR LISTENING SLIDES: ctﬂ.io/what-the-vdom  @stefanjudis

What the v...DOM?

What the v...DOM?

More Decks by stefan judis

Other Decks in Technology

Featured

Transcript