What is a

Component?

What is a Component?

• A building block
• Lego for your DOM
• Unit of Composition
• Instantiated with data
• Renders something

Why build like this...

<div class="toc">
  <ul>
    <li>
      <a href="#1">One</a>
    </li>
    <li>
      <a href="#2">Two</a>
    </li>
    <li>
      <a href="#3">Three</a>
    </li>
  </ul>
</div>

Building blocks

Markup in Code

You can't hate it yet

From the Authors

• XML-like syntax extension to ECMAScript without any defined semantics.
• Defines a concise and familiar syntax for defining tree structures with attributes
• facebook.github.io/jsx

JSX Explained

• A new type of JS Expression
• Transpilers convert to a function call
  • Any name, but use h()
• It's optional: can write this by hand

JSX Explained

• Inside braces: any JavaScript expression
• Capitalized node name = reference

let world = 'World!';

<div one={ 1 }>
  Hello, { world }
</div>

let Link = 'a';
<Link>Test</Link>

var world = 'World!';

h('div', { one: 1 },
  'Hello, ', world
);

var Link = 'a';
h(Link, 'Test');

Proof

Lets Build a JSX Renderer

The Reviver Function

• Gets inserted in place of every <tag>
• Called at runtime by transpiled JSX

Rough Implementation

We write this:

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

... which transpiles to this:

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

... which returns this:

{
  nodeName:'div',
  attributes: { id:'foo' },
  children: [
    'Hello!',
    { nodeName:'br' }
  ]
}

Rendering JSX to DOM

• The output of h() describes a DOM node
• .children[] is an Array of child nodes
• We can use this to build a DOM tree

Does it work?

Components are:

Encapsulation

• One API

  • props => vdom

• Internals can vary
  • Pure function
  • ES Class
  • Object
  • Module
  • State
• Props Down, Events Up

Composition

High-Order Components:   "I am a ____"

 const Parent = props => (
   <Child />
 )

Nested Components:      "I contain a ____"

 const Ancestor = props => (
   <div>
     <Descendant />
     <Descendant />
   </div>
 )

A components can render another component as its root

A components can render other components as nested children

Re-use

Generic "Dumb" Components

• Encapsulate rendering of common UI
• Pure: props in, vdom out
• Highly re-usable, libraries

Specific "Smart" Components

• Connect to data sources, persistence
• Maintain (or delegate) state
• Less re-usable, business logic

Re: use

• Isomorphic / universal rendering:
  • client: renders to DOM
  • server: renders static HTML
  • no parser: just plain objects

• Only requirement: JavaScript

Consistency

• Every component works the same way
• Rendering always works the same way
• Lifecycle always invoked the same way

Testability

• Mocking the DOM is hard / horrible
• Abstracting the DOM is hard
• VDOM (JSX) is a DOM abstraction
• Mocking VDOM is free

Testing VDOM is... beautiful:

expect(
  <List items={['one','two']} />
).to.deep.equal(
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
)

const List = ({ items }) => (
  <ul>
    { items.map( item => (
      <li>{ item }</li>
    )) }
  </ul>
)

Minimalism

• Tiny API, no magic
• Just functions calling other functions
• Mutations automatically re-render
• Nearly 100% opt-in (JSX, classes, ...)

Components can also be classes

• Slightly larger API
• Lifecycle methods
• Stateful

Ways to Be Classy

class Foo extends Component {
  state = {
    text: 'initial text'
  };

  componentDidMount() {
    // Now attached to the DOM
  }

  componentWillUnmount() {
    // About to be removed
  }

  render(props, state) {
    // analogous to a functional component
    return <button class="foo">Foo!</button>
  }
}

Component State

Why setState?

• setState() re-renders the component
• Avoids observers, microtasks, etc
• Promotes immutability
• Allows batching

State Example

class Foo extends Component {
  @bind
  updateText(e) {
    // update component state from input value:
    this.setState({ text: e.target.value });
  }

  render(props, state) {
    return (
      <input value={state.text}
        onInput={this.updateText} />
    );
  }
}

State management

Linked State Example

linkState(key)

• ​Creates an updater for key in state
• Cached: essentially no performance penalty
• Supports dot-notated deep key paths
• Optional source path for custom linkage

Re-rendering everything

• How can this be fast?
• Makes no sense

WHAT IF...

Virtual DOM

Real DOM

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

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

Parallels

Now we're talkin'

• As few DOM operations as possible?
• That sounds fast.
• Turns out it is fast.

Why?

• Predictable
  • Return desired DOM from render()
  • Differences handled automatically
• Repeatable
  • render() for initial DOM creation
  • render() for later DOM updates
• Composable
  • Natural component nesting
  • Full control over child updates

(rendering)

1. Get passed a VNode
2. If nodeName is function
   • Call the function, returns VNode
   • Pass VNode to #1
3. Create a DOM node for the type
4. Copy VNode attributes to node
5. Loop over VNode children
   • For each, pass child to #1

Process​

(Updating)

Process​

Prior Art

Functional Programming

import { render, h } from 'preact-cycle';

const ADD = v => v + 1;

const App = ({ value, mutation }) => (
  <div>
    <p>Value: { value }</p>
    <button onClick={ mutation('value', ADD) }>
      Increment
    </button>
  </div>
);

render(App, { value: 0 });

Not Complicated

function cycle(fn, data, into) {
  let root;

  // apply mutate() to a key and re-render
  data.mutation = (key, mutate) => () => {
    data[key] = mutate(data[key]);
    update();
  };

  // render to DOM
  let update = () => {
    root = render(h(fn, data), into, root);
  };

  // initial render
  update();
}

There are 1000 libraries for this

• Preact's is called preact-cycle
• Basically what we just wrote
• git.io/preact-cycle

That's it!

Resources

• Preact
  • 3.5kb implementation of this stuff
  • Docs & Demos:  git.io/preact
• Get started with a Boilerplate:
  • Clone: git.io/preact-boilerplate
  • Demo: preact-boilerplate.surge.sh