Constraints

• Carbyn
• "HTML5 OS"
• custom DOM atop the real DOM​

• Inside braces:  JS expression
• Capitalized name:  reference

• AKA createElement()
• Calls inserted in place of every <tag>

So... hyperscript?

Hyperscript

Transpiled JSX

Virtual DOM

JSX

hyperscript

syntax

function calls

We write this:

 <div id="foo">
   Hello!
   <br />
 </div>

... which transpiles to this:

 h('div', { id:'foo' },
   'Hello!',
   h('br')
 )

  function h(nodeName, attributes, ...children) {

    return { nodeName, attributes, children };

  }

 function render(vnode) {  
   if (typeof vnode==='string')
     return document.createTextNode(vnode)

   let node = document.createElement(vnode.nodeName)

   for (let name in Object(vnode.attributes))
     node.setAttribute(name, vnode.attributes[name])

   for (let i=0; i<vnode.children.length; i++)
     node.appendChild(render(vnode.children[i]))

   return node
 }

 function diffAttributes(node, vnode) {
   for (let name in Object(vnode.attributes))
     node.setAttribute(name, vnode.attributes[name])
 }

Does it work?

Diffing

without magic

WHAT IF...

Virtual

Actual

 {
   nodeName: 'div',
   attributes: {
     key: 'value'
   },
   children: [
     'text node'
   ]
 }

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

DOM

DOM

1

2

3

is node component?

diff()

for each child node

1

find child Element with same key

if VNode has a key:

find next unused child of same type

otherwise:

no match?  create a new element.

Component / Text / nodeName

keys attribute meaningful order to a set of uniform elements.

for each
old attribute

not in new attributes?

set to undefined

1

Performance

Benchmark everying

"The DOM is slow"

almost 50% faster

Measure

Always be profiling

• Chrome Dev Tools Timeline, so good

• IRHydra2
• @mraleph
• see how/why
• shows deopts

Don't accidentally ToBoolean

Functions can be too generic.

 function hook(obj, name, a, b) {
   return obj[name] && obj[name](a, b);
 }

 hook(obj, 'foo', 1, 2);
 hook(obj, 'foo', 'a', {b:'c'});


 obj.foo(1, 2);

• Don't render faster than you can paint
• Don't render and immediately re-render
• Best technique varies

SCRAP

     // like 0ms
     let child = parent.lastChild
     while (child) {
       let prev = child.previousSibling
       child.remove()
       child = prev
     }

has key?

for each child node

1. Build ordered & keyed lists
2. Loop over virtual children
3. Find match in ordered/keyed list
4. Invoke diff on match or null
5. Insert into parent if different from index

append to unkeyed

add to keyed map

has key?

for each virtual child

1. Build ordered & keyed lists
2. Loop over virtual children
3. Find match in ordered/keyed list
4. Invoke diff on match or null
5. Insert into parent if different from index

find match in unkeyed

find in keyed map

diff against virtual child

Today

• a growing community
• expanding focus to Developer Experience
• lots of discussion & contribution
• in use at many companies

• Self-contained web widgets / embeds
• Progressive Web Apps
• Pieces of an existing application
• Component-by-component migration
• Web Components

• React Native
• Alternative Renderers
• Certain 3rd-party libs
• Uncomfortable with the DOM

• Web Workers
• Hook renderers
• Fully async rendering
• ...XML?

Preact

In 30 seconds

• remembered: hyperscript

Remember hyperscript?

From blog post "WTF is JSX"

// a "partial" that does a filtered loop
function foo(items) {
  return items.map( p => <li>{p}</li> );
}

let vdom = (
  <div id="foo">
    <p>Look, a simple JSX DOM renderer!</p>
    <ul>{ foo(ITEMS) }</ul>
  </div>
)

document.body.appendChild( render(vdom) );

I created Preact
to teach myself
how React worked

• started out as a CodePen
• animating hundreds of elements
• obsessively profiled & tracked FPS
• rapidly tested out ideas

• recycling for memory usage?
• cache props on DOM elements?
• cache normalized nodeName?
• cost of attributes vs properties

"React + Performance = ?"

Turns out,

Preact works a lot like Paul's Vanilla JS baseline.

• a tiny, simplified React!
• added support for "transient" components
• started adding React-isms:

• stateful components (classes)
• lifecycle methods
• compositional components
• refs
• context

Paul Lewis

• Small modules / publish all the things
• Needed a catchy name
• All the good ones taken