Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
SLOW FAST
Slide 3
Slide 3 text
D
O
W
N
LO
A
D
RENDER
PARSE
Slide 4
Slide 4 text
Lightweight
๏ Downloads fast.
๏ Parses fast.
๏ Renders fast.
Responsive
๏ Tap or click → updates
fast.
๏ Sophisticated animations.
๏ 60fps scrolling.
Slide 5
Slide 5 text
Lightweight
๏ Downloads fast.
๏ Parses fast.
๏ Renders fast.
Responsive
๏ Tap or click → updates
fast.
๏ Sophisticated animations.
๏ 60fps scrolling.
TENSION
Slide 6
Slide 6 text
Virtual DOM
Slide 7
Slide 7 text
VIRTUAL DOM
Slide 8
Slide 8 text
Virtual DOM
๏ Compiles JSX to JavaScript
๏ Renders recursively, synchronously
๏ Pushes optimization responsibility to application
code
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
1
3
2
Instant Templates
60fps Incremental Rendering
Optimized Updates
Slide 12
Slide 12 text
1 Instant Templates
Slide 13
Slide 13 text
https://medium.com/@samccone/performance-futures-bundling-281543d9a0d5
DOWNLOAD PARSE COMPILE EXECUTE
130MS 200MS
Slide 14
Slide 14 text
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
Slide 15
Slide 15 text
function Weather(weather) {
return [
Current Weather
, New York, NY ,
78°
];
}
function Weather(weather) {
return [React.createElement(
"h2",
null,
"Current Weather"
), React.createElement(
"address",
null,
"New York, NY"
), React.createElement(
"div",
null,
React.createElement(
"strong",
null,
"78\xB0"
)
)];
}
Slide 16
Slide 16 text
https://medium.com/reloading/javascript-start-up-performance-69200f43b201
Slide 17
Slide 17 text
Current Weather
New York, NY
{{weather.temperature}}°
Slide 18
Slide 18 text
COMPILER
Slide 19
Slide 19 text
COMPILER
Current Weather
New York, NY
{{weather.temperature}}°
{{@title}}
Slide 20
Slide 20 text
COMPILER
Slide 21
Slide 21 text
COMPILER
Slide 22
Slide 22 text
COMPILER
?
Slide 23
Slide 23 text
COMPILER
101010
010101
101010
Slide 24
Slide 24 text
BYTECODE
Slide 25
Slide 25 text
0x19 0x00 0x1f 0x16 0x01 0x20
0x16 0x02 0x19 0x03 0x1f 0x16
0x04 0x20 0x16 0x02 0x19 0x05
0x1f 0x16 0x06 0x19 0x07 0x1f
0x16 0x08 0x30 0x15 0x48 0x04
0x00 0x05 0x09 0x05 0x0a 0x0d
0x03 0x00 0x39 0x32 0x02 0x2f
0x36 0x3c 0x00 0x13 0x04 0x0d
0x03 0x01 0x0f 0x04 0x30 0x0b
0x13 0x28 0x0b 0x13 0x0b 0x13
0x28 0x0b 0x13 0x0b 0x13 0x28
0x0b 0x13 0x3d 0x00 0x07 0x3f
0x3f 0x04 0x47 0x25 0x40 0x00
0x04 0x41 0x04 0x4a 0x04 0x45
0x04 0x46 0x4a 0x04 0x31 0x13
0x26 0x48 0x0f 0x04 0x33 0x14
0x18 0x00 0x33 0x14 0x31 0x16
0x0b 0x20 0x16 0x0c 0x20 0x14
Current Weather
New York, NY
{{weather.temperature}}°
Slide 26
Slide 26 text
0x28 PushBlockScope
0x0b Primitive
primitive: 0x13 19
0x0b Primitive
primitive: 0x13 19
0x28 PushBlockScope
0x0b Primitive
primitive: 0x13 19
0x0b Primitive
primitive: 0x13 19
0x28 PushBlockScope
0x0b Primitive
primitive: 0x13 19
0x3d PushArgs
names: 0x00 0
positionals: 0x07 7
synthetic: 0x3f 319
0x3f PrepareArgs
state: 0x04 4
0x47 BeginComponentTransaction
0x25 PushDynamicScope
0x40 CreateComponent
flags: 0x00 0
state: 0x04 4
0x41 RegisterComponentDestructor
state: 0x04 4
0x43 GetComponentSelf
state: 0x04 4
0x45 GetComponentLayout
state: 0x04 4
0x46 InvokeComponentLayout
0x4a DidRenderLayout
state: 0x04 4
0x31 PopFrame
0x13 PopScope
0x26 PopDynamicScope
0x48 CommitComponentTransaction
0x0f Load
register: 0x04 4
0x33 Exit
0x14 Return
0x18 DynamicContent
trusting: 0x00 0
0x33 Exit
0x14 Return
0x31 PopFrame
0x16 Text
text: 0x0b "°\n "
0x20 CloseElement
0x16 Text
text: 0x0c "\n"
0x20 CloseElement
0x14 Return
0x19 OpenElement
tag: 0x00 "h2"
0x1f FlushElement
0x16 Text
text: 0x01 "Current Weather"
0x20 CloseElement
0x16 Text
text: 0x02 "\n\n"
0x19 OpenElement
tag: 0x03 "address"
0x1f FlushElement
0x16 Text
text: 0x04 "\n New York, NY\n"
0x20 CloseElement
0x16 Text
text: 0x02 "\n\n"
0x19 OpenElement
tag: 0x05 "div"
0x1f FlushElement
0x16 Text
text: 0x06 "\n "
0x19 OpenElement
tag: 0x07 "strong"
0x1f FlushElement
0x16 Text
text: 0x08 "\n "
0x30 PushFrame
0x15 ReturnTo
offset: 0x48 72
0x04 GetVariable
symbol: 0x00 0
0x05 GetProperty
key: 0x09 "weather"
0x05 GetProperty
key: 0x0a "temperature"
0x0d Dup
register: 0x03 3
offset: 0x00 0
0x39 IsComponent
0x32 Enter
args: 0x02 2
0x2f JumpUnless
to: 0x36 54
0x3c PushDynamicComponentManager
meta: 0x00 0
0x10 Fetch
register: 0x04 4
0x0d Dup
register: 0x03 3
offset: 0x01 1
0x0f Load
register: 0x04 4
0x30 PushFrame
0x0b Primitive
primitive: 0x13 19
Slide 27
Slide 27 text
0x28 PushBlockScope
0x0b Primitive
primitive: 0x13 19
0x0b Primitive
primitive: 0x13 19
0x28 PushBlockScope
0x0b Primitive
primitive: 0x13 19
0x0b Primitive
primitive: 0x13 19
0x28 PushBlockScope
0x0b Primitive
primitive: 0x13 19
0x3d PushArgs
names: 0x00 0
positionals: 0x07 7
synthetic: 0x3f 319
0x3f PrepareArgs
state: 0x04 4
0x47 BeginComponentTransaction
0x25 PushDynamicScope
0x40 CreateComponent
flags: 0x00 0
state: 0x04 4
0x41 RegisterComponentDestructor
state: 0x04 4
0x43 GetComponentSelf
state: 0x04 4
0x45 GetComponentLayout
state: 0x04 4
0x46 InvokeComponentLayout
0x4a DidRenderLayout
state: 0x04 4
0x31 PopFrame
0x13 PopScope
0x26 PopDynamicScope
0x48 CommitComponentTransaction
0x0f Load
register: 0x04 4
0x33 Exit
0x14 Return
0x18 DynamicContent
trusting: 0x00 0
0x33 Exit
0x14 Return
0x31 PopFrame
0x16 Text
text: 0x0b "°\n "
0x20 CloseElement
0x16 Text
text: 0x0c "\n"
0x20 CloseElement
0x14 Return
0x19 OpenElement
tag: 0x00 "h2"
0x1f FlushElement
0x16 Text
text: 0x01 "Current Weather"
0x20 CloseElement
0x16 Text
text: 0x02 "\n\n"
0x19 OpenElement
tag: 0x03 "address"
0x1f FlushElement
0x16 Text
text: 0x04 "\n New York, NY\n"
0x20 CloseElement
0x16 Text
text: 0x02 "\n\n"
0x19 OpenElement
tag: 0x05 "div"
0x1f FlushElement
0x16 Text
text: 0x06 "\n "
0x19 OpenElement
Slide 28
Slide 28 text
COMPILER VM
101010
010101
101010
BUILD TIME BROWSER
Slide 29
Slide 29 text
COMPILER VM
101010
010101
101010
BUILD TIME BROWSER
Slide 30
Slide 30 text
Current Weather
New York, NY
78°
{strings:["h2","Current
Weather","\n\n","address","\n New York,
NY\n","div","\n ","strong","\n 78°\n
","\n"]}
19 01 00 00 1F 00 16 01 01 00 20 00 16 01
02 00 19 01 03 00 1F 00 16 01 04 00 20 00
16 01 02 00 19 01 05 00 1F 00 16 01 06 00
19 01 07 00 1F 00 16 01 08 00 20 00 16 01
09 00 20 00 14 00
Slide 31
Slide 31 text
https://medium.com/@samccone/performance-futures-bundling-281543d9a0d5
DOWNLOAD PARSE COMPILE EXECUTE
130MS 200MS
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
DOWNLOAD EXECUTE
130MS
PARSE COMPILE
200MS
Slide 34
Slide 34 text
DOWNLOAD EXECUTE
130MS
Slide 35
Slide 35 text
DOWNLOAD EXECUTE
130MS
Slide 36
Slide 36 text
export class Heap {
private heap: Uint16Array | Array;
private table: number[];
private offset = 0;
private handle = 0;
constructor(serializedHeap?: { buffer: ArrayBuffer, table: number[], handle: number }) {
if (serializedHeap) {
let { buffer, table, handle } = serializedHeap;
this.heap = new Uint16Array(buffer);
this.table = table;
this.offset = this.heap.length;
this.handle = handle;
} else {
this.heap = new Uint16Array(0x100000);
this.table = [];
}
}
push(item: number): void {
this.heap[this.offset++] = item;
}
getbyaddr(address: number): number {
return this.heap[address];
Glimmer VM uses
ArrayBuffer directly, no
parse or intermediate data
structure.
Slide 37
Slide 37 text
Demo
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
๏ Tiny runtime
๏ Compact bytecode
๏ No parse is faster than no parse
1 Instant Templates
Slide 41
Slide 41 text
1
3
2
Instant Templates
60fps Incremental Rendering
Optimized Updates
Slide 42
Slide 42 text
2 Optimized Updates
Slide 43
Slide 43 text
Lightweight
๏ Downloads fast.
๏ Parses fast.
๏ Renders fast.
Responsive
๏ Tap or click → updates
fast.
๏ Sophisticated animations.
๏ 60fps scrolling.
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
“What makes a React app slow is, most of the
time, useless rerenders of many components. You
may have read that the React VirtualDom is super fast.
That's true, but in a medium size app, a full redraw can
easily render hundreds of components. Even the fastest
VirtualDom templating engine can't make that in less
than 16ms.”
Slide 46
Slide 46 text
“The React documentation is very clear about the way
to avoid useless rerenders: shouldComponentUpdate(). …
it's your job as a developer to check that the props
of a component didn't change and skip rendering
altogether in that case.”
Slide 47
Slide 47 text
GLIMMER VM
Slide 48
Slide 48 text
APPENDING VM UPDATING VM
Slide 49
Slide 49 text
{{firstName}}
Slide 50
Slide 50 text
{{firstName}}
STATIC
DYNAMIC
Slide 51
Slide 51 text
0x0019 OpenElement
tag: 0x0000 "div"
0x001c StaticAttr
name: 0x0001 "class"
value: 0x0002 "active"
namespace: 0x0000 0
0x001f FlushElement
0x0004 GetVariable
symbol: 0x0000 0
0x0005 GetProperty
key: 0x0003 "firstName"
0x0018 DynamicContent
trusting: 0x0000 0
0x0020 CloseElement
0x0014 Return
{{firstName}}
Slide 52
Slide 52 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
DOM
Slide 53
Slide 53 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
DOM
Slide 54
Slide 54 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
Slide 55
Slide 55 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
Slide 56
Slide 56 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
DOM
Slide 57
Slide 57 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
DOM
Slide 58
Slide 58 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
DOM
Slide 59
Slide 59 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
DOM
Slide 60
Slide 60 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM
Sean
DOM
Slide 61
Slide 61 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
Sean
DOM
Slide 62
Slide 62 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
Sean
DOM
Slide 63
Slide 63 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
Sean
DOM
Slide 64
Slide 64 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
Sean
DOM
Slide 65
Slide 65 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
Sean
DOM
Slide 66
Slide 66 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
Sean
DOM
Slide 67
Slide 67 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
DOM
Brendan
Slide 68
Slide 68 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
Slide 69
Slide 69 text
StaticAttr
OpenElement
GetVariable
GetProperty
DynamicContent
CloseElement
APPEND PROGRAM UPDATE PROGRAM
UpdateDynamicContent
6×
LESS WORK
Slide 70
Slide 70 text
Demo
Slide 71
Slide 71 text
import RudyRufer from './RudyRufer';
import TheSunHasGotHisHatOn from './
TheSunHasGotHisHatOn';
import Roenno from './Roenno';
import LisaSchulte from './LisaSchulte';
import ChasinWildTrains from './ChasinWildTrains';
import TommyWinship from './TommyWinship';
import Parepepeotes from './Parepepeotes';
export default class extends React.Component {
componentDidMount() {
let counter = 0;
setInterval(() => {
this.setState({ counter: ++counter });
}, 0);
}
render() {
let { state } = this;
let { counter } = state || {};
return
{ counter }
import RudyRufer from './RudyRufer'; import TheSunHasGotHisHatOn from './ TheSunHasGotHisHatOn'; import Roenno from './Roenno'; import LisaSchulte from './LisaSchulte'; import ChasinWildTrains from './ChasinWildTrains'; import TommyWinship from './TommyWinship'; import Parepepeotes from './Parepepeotes'; export default class extends Component { @tracked counter = 0; didInsertElement() { setInterval(() => { this.counter++; }, 0); } static template = `{{counter}}
REACT GLIMMERSlide 72
Slide 72 text
import RudyRufer from './RudyRufer';
import TheSunHasGotHisHatOn from './
TheSunHasGotHisHatOn';
import Roenno from './Roenno';
import LisaSchulte from './LisaSchulte';
import ChasinWildTrains from './ChasinWildTrains';
import TommyWinship from './TommyWinship';
import Parepepeotes from './Parepepeotes';
export default class extends React.Component {
componentDidMount() {
let counter = 0;
setInterval(() => {
this.setState({ counter: ++counter });
}, 0);
}
render() {
let { state } = this;
let { counter } = state || {};
return
{ counter }
import RudyRufer from './RudyRufer'; import TheSunHasGotHisHatOn from './ TheSunHasGotHisHatOn'; import Roenno from './Roenno'; import LisaSchulte from './LisaSchulte'; import ChasinWildTrains from './ChasinWildTrains'; import TommyWinship from './TommyWinship'; import Parepepeotes from './Parepepeotes'; export default class extends Component { @tracked counter = 0; didInsertElement() { setInterval(() => { this.counter++; }, 0); } static template = `{{counter}}
REACT GLIMMERSlide 73
Slide 73 text
import RudyRufer from './RudyRufer';
import TheSunHasGotHisHatOn from './
TheSunHasGotHisHatOn';
import Roenno from './Roenno';
import LisaSchulte from './LisaSchulte';
import ChasinWildTrains from './ChasinWildTrains';
import TommyWinship from './TommyWinship';
import Parepepeotes from './Parepepeotes';
export default class extends React.Component {
componentDidMount() {
let counter = 0;
setInterval(() => {
this.setState({ counter: ++counter });
}, 0);
}
render() {
let { state } = this;
let { counter } = state || {};
return
{ counter }
import RudyRufer from './RudyRufer'; import TheSunHasGotHisHatOn from './ TheSunHasGotHisHatOn'; import Roenno from './Roenno'; import LisaSchulte from './LisaSchulte'; import ChasinWildTrains from './ChasinWildTrains'; import TommyWinship from './TommyWinship'; import Parepepeotes from './Parepepeotes'; export default class extends Component { @tracked counter = 0; didInsertElement() { setInterval(() => { this.counter++; }, 0); } static template = `{{counter}}
REACT GLIMMERSlide 74
Slide 74 text
import RudyRufer from './RudyRufer';
import TheSunHasGotHisHatOn from './
TheSunHasGotHisHatOn';
import Roenno from './Roenno';
import LisaSchulte from './LisaSchulte';
import ChasinWildTrains from './ChasinWildTrains';
import TommyWinship from './TommyWinship';
import Parepepeotes from './Parepepeotes';
export default class extends React.Component {
componentDidMount() {
let counter = 0;
setInterval(() => {
this.setState({ counter: ++counter });
}, 0);
}
render() {
let { state } = this;
let { counter } = state || {};
return
{ counter }
import RudyRufer from './RudyRufer'; import TheSunHasGotHisHatOn from './ TheSunHasGotHisHatOn'; import Roenno from './Roenno'; import LisaSchulte from './LisaSchulte'; import ChasinWildTrains from './ChasinWildTrains'; import TommyWinship from './TommyWinship'; import Parepepeotes from './Parepepeotes'; export default class extends Component { @tracked counter = 0; didInsertElement() { setInterval(() => { this.counter++; }, 0); } static template = `{{counter}}
REACT GLIMMERSlide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
2 Optimized Updates
• With Virtual DOM, sluggish update performance can
sneak up on you
• Generating optimized bytecode during initial render
keeps updates fast
Slide 78
Slide 78 text
1
3
2
Instant Templates
60fps Incremental Rendering
Optimized Updates
Slide 79
Slide 79 text
3 60fps Incremental Rendering
Slide 80
Slide 80 text
e Frame Frame Frame Frame F
Slide 81
Slide 81 text
s 16ms 16ms 16ms 16ms 1
Slide 82
Slide 82 text
s 16ms 16ms 16ms 16ms 1
1000ms ÷ 60 = 16.6
̅ms
Slide 83
Slide 83 text
s 70ms 1
Slide 84
Slide 84 text
s 70ms 1
Slide 85
Slide 85 text
1000ms+
Slide 86
Slide 86 text
1000ms+
WHITE
RECTANGLE
OF DOOM
Slide 87
Slide 87 text
OpenElement
FlushElement
Text
CloseElement
GetVariable
GetProperty
DynamicContent
SYNCHRONOUS
Slide 88
Slide 88 text
OpenElement
FlushElement
requestIdleCallback
16ms
Text
CloseElement
GetVariable
requestIdleCallback
16ms
GetProperty
DynamicContent
requestIdleCallback
16ms
Slide 89
Slide 89 text
OpenElement
FlushElement
requestIdleCallback
16ms
Text
CloseElement
GetVariable
requestIdleCallback
16ms
GetProperty
DynamicContent
requestIdleCallback
16ms
Slide 90
Slide 90 text
Demo
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
render(iterator: TemplateIterator): void {
// Iterate the template iterator, executing the compiled template program
// until there are no more instructions left to execute.
let result;
do {
result = iterator.next();
} while (!result.done);
this.result = result.value;
}
Slide 94
Slide 94 text
render(iterator: TemplateIterator): Promise {
return new Promise((resolve) => {
let timeout = this.timeout;
let tick = (deadline: Deadline) => {
let iteratorResult: IteratorResult;
do {
iteratorResult = iterator.next();
} while (!iteratorResult.done && deadline.timeRemaining() > 1);
if (iteratorResult.done) {
this.result = iteratorResult.value;
return resolve();
}
requestIdleCallback(tick, { timeout });
};
requestIdleCallback(tick, { timeout });
});
}
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
• Initial render can take multiple seconds on low-end phones
• Raw optimization has reached diminishing returns—we
need to break up the work.
• VM architecture make this almost too easy.
• Works with rehydration, too!
2 60fps Incremental Rendering
Slide 98
Slide 98 text
1
3
2
Instant Templates
60fps Incremental Rendering
Optimized Updates
Slide 99
Slide 99 text
Future
๏ Implement VM in Web Assembly
๏ Execute programs in Web Worker
Slide 100
Slide 100 text
https://try.glimmerjs.com
Slide 101
Slide 101 text
https://try.glimmerjs.com
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Thank you!
@tomdale