3kb!

Preact Stuff

• import { h, render, component } from 'preact' => h refers to hypertext+javascript, and basically works like jsx
• render accepts props and state as arguments
• Component lifecycle methods work basically as expected

Preact Stuff

Component Types:

Classical Components: lifecycle methods and state

Stateless Functional Components: accept props and return JSX

class DatePicker extends Component {
    render(props, state) {
        return <a href={props.href}>{ props.label }></a>
    }
}

//note parentheses instead of braces for automatic return

const Link = ({props}) => (
    <a href={props.href}>{props.label}</a>
);

Preact Stuff

Linked State:

Manually Declaring Bound Methods

Linked State Component Class Method: returns a handler function that uses the value of an event to update the named property on state. Less typing & more performant!

class Foo extends Component {
    updateText = e => {
        this.setState({ text: e.target.value });
    };
    render({ }, { text }) {
        return <input value={text} onInput={this.updateText} />;
    }
}

class Foo extends Component {
    render({ }, { text }) {
        return <input value={text} onInput={this.linkState('text')} />;
    }
}

Preact Goals

• Performance
• Size
• Efficiency
• Understandability
• Compatibility

Can It Deliver?

Let's look to: Preact-Compat for a use case

Thoughts: Download an example react boilerplate project, convert webpack to preact.

1. See how difficult it is to convert.

2. Compare file sizes.

3. Profile for performance?

(May be too simple to yield good information, but worth a shot)

What We Gonna Do?

1. Download: React Wepback Babel Starter Kit by Ali Coding

2. Install dependencies, build, verify it runs

3. Install preact, preact-compat.

4. Update webpack production to alias preact

5. Install dependencies, build verify it runs, compare file sizes.

What We Find Out?

Good News First:

1. Converting to preact is very easy in this simple case.

2. Size Results:

•  react bundle is at 332kb on disk

• preact bundle is at 152kb on disk

~54% Code Size Reduction -- not ~95%:

but still:

Pretty, Pretty Good.

What We Find Out?

Bad News Last

React Performance Tools not available in preact-compat, making profiling rendering performance beyond the scope of this presentation.