Tweet
Tweet

Slide 1

Slide 1 text

WHAT THE v...DOM? @stefanjudis

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

2013

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

THERE IS NO MAGIC IN CODE!

Slide 6

Slide 6 text

SOMETIMES
 IT FEELS 
 LIKE MAGIC

Slide 7

Slide 7 text

TAKE A BREAK!

Slide 8

Slide 8 text

Matthias

Slide 9

Slide 9 text

IMPERATIVE

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

DECLARATIVE

Slide 13

Slide 13 text

My address is Berlin, Friedrichshain.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

INTERFACES

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Declarative UI { highlighted ? 'Please stop!': 'Highlight me!' }

Slide 19

Slide 19 text

{ highlighted ? 'Please stop!': 'Highlight me!' }

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

export default class App extends Component { ... render(props, { highlighted }) { return ( { highlighted ? 'Please stop!': 'Highlight me!' } ); } } codesandbox.io/s/rwjol2n3op THAT'S NOT JAVASCRIPT!?

Slide 22

Slide 22 text

CODE TRANSFORMS

Slide 23

Slide 23 text

! & ? PARSE ! ~ ? TRANSFORM GENERATE

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

babeljs.io

Slide 27

Slide 27 text

PARSE with Babylon

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

AST ( Abstract Syntax Tree )

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

astexplorer.net

Slide 44

Slide 44 text

ASTs are everywhere

Slide 45

Slide 45 text

astexplorer.net

Slide 46

Slide 46 text

ctfl.io/asts-in-graphql

Slide 47

Slide 47 text

TRANSFORM with @babel/traverse

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

GENERATE with @babel/generator

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

./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);

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

BABEL PLUGIN

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

github.com/jamiebuilds/babel-handbook

Slide 62

Slide 62 text

JSX ( just another transform )

Slide 63

Slide 63 text

babel-plugin-transform-react-jsx const App = () => { return

:tada: Frontend Con 2018! :tada:

; };

Slide 64

Slide 64 text

const App = () => { return

:tada: Frontend Con 2018! :tada:

; }; babel-plugin-transform-react-jsx ReturnStatement

Slide 65

Slide 65 text

const App = () => { return

:tada: Frontend Con 2018! :tada:

; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement

Slide 66

Slide 66 text

const App = () => { return

:tada: Frontend Con 2018! :tada:

; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement JSXOpeningElement

Slide 67

Slide 67 text

const App = () => { return

:tada: Frontend Con 2018! :tada:

; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement JSXOpeningElement JSXText

Slide 68

Slide 68 text

const App = () => { return

:tada: Frontend Con 2018! :tada:

; }; babel-plugin-transform-react-jsx ReturnStatement JSXElement JSXOpeningElement JSXText JSXClosingElement

Slide 69

Slide 69 text

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

:tada: Frontend Con 2018! :tada:

; };

Slide 70

Slide 70 text

const App = () => { return

:tada: Frontend Con 2018! :tada:

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

Slide 71

Slide 71 text

const App = () => { return

:tada: Frontend Con 2018! :tada:

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

Slide 72

Slide 72 text

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

:tada: Frontend Con 2018! :tada:

; }; babel-plugin-transform-react-jsx

Slide 73

Slide 73 text

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

:tada: Frontend Con 2018! :tada:

; };

Slide 74

Slide 74 text

/* @jsx h */ const App = () => { return

:tada: Frontend Con 2018! :tada:

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

Slide 75

Slide 75 text

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

:tada: Frontend Con 2018! :tada:

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

Slide 76

Slide 76 text

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

:tada: Frontend Con 2018! :tada:

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

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

vue-template-explorer.now.sh

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

You don't need JSX

Slide 81

Slide 81 text

You don't need JSX /* Preact 8.2.9 */ !function () { "use strict"; function e() { } function ...

Slide 82

Slide 82 text

You don't need JSX /* Preact 8.2.9 */ !function () { "use strict"; function e() { } function ... const { h, render } = window.preact;

Slide 83

Slide 83 text

You don't need JSX /* Preact 8.2.9 */ !function () { "use strict"; function e() { } function ... const { h, render } = window.preact; render( h('h1', {class: 'headline-1'}, '! Frontend Con 2018! !'), document.body );

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

github.com/developit/htm

Slide 86

Slide 86 text

h()?

Slide 87

Slide 87 text

github.com/hyperhype/hyperscript

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

ctfl.io/fun-with-enumeration

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

const h = (nodeName, attributes, ...children) => { const el = 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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

! Frontend Con 2018! !

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 text

NICELY DECLARATIVE

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

A LOT OF WORK TO DO

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

vWHAT?

Slide 116

Slide 116 text

Virtual DOM on GitHub

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

h()

Slide 120

Slide 120 text

const h = (nodeName, attributes, ...children) => { const el = 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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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": ["""] },

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 129

Slide 129 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 130

Slide 130 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

MORE CONTROL

Slide 134

Slide 134 text

COMPONENT RENDERING

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

./app.js class App { constructor () { this.state = { 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)) ) ); } }

Slide 138

Slide 138 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 139

Slide 139 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

const renderNode = (vnode) => { let el; const {nodeName, 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/

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 145

Slide 145 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 146

Slide 146 text

const renderNode = (vnode) => { let el; const {nodeName, 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

Slide 147

Slide 147 text

setState()

Slide 148

Slide 148 text

./app.js class App { constructor () { this.state = { 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)) ) ); } }

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

./app.js class App { constructor () { this.state = { 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}) {...} }

Slide 152

Slide 152 text

./app.js class App { constructor () { this.state = { 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}) {...} }

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

DIFFING

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

{ 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

Slide 168

Slide 168 text

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

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

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; } }; ./our-vdom.js

Slide 177

Slide 177 text

No content

Slide 178

Slide 178 text

ONLY TOUCH WHAT CHANGED

Slide 179

Slide 179 text

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

Slide 180

Slide 180 text

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

Slide 181

Slide 181 text

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

Slide 182

Slide 182 text

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

Slide 183

Slide 183 text

./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; } };

Slide 184

Slide 184 text

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

Slide 185

Slide 185 text

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

Slide 186

Slide 186 text

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

Slide 187

Slide 187 text

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

Slide 188

Slide 188 text

./app.js const diff = (dom, vnode) => { // compare type // compare attributes // compare children // optimise as much as you can! };

Slide 189

Slide 189 text

www.youtube.com/watch?v=LY6y3HbDVmg

Slide 190

Slide 190 text

REDUCE DOM DIFFING

Slide 191

Slide 191 text

./app.js class App { constructor () { this.state = { 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}) {...} }

Slide 192

Slide 192 text

./app.js class App { constructor () { this.state = { 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}) {...} }

Slide 193

Slide 193 text

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

Slide 194

Slide 194 text

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

Slide 195

Slide 195 text

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

Slide 196

Slide 196 text

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

Slide 197

Slide 197 text

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

Slide 198

Slide 198 text

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

Slide 199

Slide 199 text

./app.js class App { constructor () { this.state = { 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}) {...} }

Slide 200

Slide 200 text

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

Slide 201

Slide 201 text

./app.js class App { constructor () { this.state = { 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}) {...} }

Slide 202

Slide 202 text

SAVE EVEN MORE WORK

Slide 203

Slide 203 text

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

Slide 204

Slide 204 text

preact.min.js

Slide 205

Slide 205 text

BENEFITS

Slide 206

Slide 206 text

DECLARATIVE UI

Slide 207

Slide 207 text

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

Slide 208

Slide 208 text

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

Slide 209

Slide 209 text

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

Slide 210

Slide 210 text

SMART AND SELECTIVE
 RENDERING

Slide 211

Slide 211 text

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

Slide 212

Slide 212 text

LIMITED DOM OPERATIONS

Slide 213

Slide 213 text

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

Slide 214

Slide 214 text

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

Slide 215

Slide 215 text

BUT IS THE vDOM THE
 SILVER BULLET?

Slide 216

Slide 216 text

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

Slide 217

Slide 217 text

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

Slide 218

Slide 218 text

import { html, render } from 'lit-html'; const data = { list: ['"', ..., '+'] }; const App = ({list}) => { return html`

! Frontend Con 2018! !

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

Slide 219

Slide 219 text

import { html, render } from 'lit-html'; const data = { list: ['"', ..., '+'] }; const App = ({list}) => { return html`

! Frontend Con 2018! !

    ${ list.map(item => html`
  • ${ item }
    • `) }
` }; render(App(data), document.body);

Slide 220

Slide 220 text

html`
  • ${ item }
    • `

    Slide 221

    Slide 221 text

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

    Slide 222

    Slide 222 text

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

    Slide 223

    Slide 223 text

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

    Slide 224

    Slide 224 text

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

    Slide 225

    Slide 225 text

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

    Slide 226

    Slide 226 text

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

    Slide 227

    Slide 227 text

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

    Slide 228

    Slide 228 text

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

    Slide 229

    Slide 229 text

    Only certain nodes can change!

    Slide 230

    Slide 230 text

    A DIFFERENT APPROACH

    Slide 231

    Slide 231 text

    NEW POSSIBILITIES

    Slide 232

    Slide 232 text

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

    Slide 233

    Slide 233 text

    I READ A LOT OF PREACT CODE

    Slide 234

    Slide 234 text

    YOU'LL NEVER GET IT!

    Slide 235

    Slide 235 text

    SLEEPLESS NIGHTS

    Slide 236

    Slide 236 text

    A LOT OF BREAKS

    Slide 237

    Slide 237 text

    AND THEN
 IT MADE SENSE

    Slide 238

    Slide 238 text

    THERE IS NO MAGIC IN CODE!

    Slide 239

    Slide 239 text

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