Problem

Shipping too much JS

First Meaningful Paint

Server Side Rendering
Pre-rendering
Deferring blocking assets
Reducing JavaScript size

How fast can we show some content?

Awesome, but...

What about interactions that require JavaScript?

Always bet wait on JS

Uninteractive paint = picture
Can look "broken"
Uncanny valley: looks real but isn't

How fast can we make things actually work?

Time-To-Interactive

Example: Twitter

Solution

We can fix this

What do we want

Useful architecture patterns
Streamlined Developer Experience
Productivity-boosting tooling
Libraries to stand on top of

Nothing is Free

Productivity can cost
Often our users pay
Priorities seem backwards

What we need

A way to import less

but keep our approach.

Preact

What is Preact?

Tiny alternative to React
Same ES2015 API
3kb of JavaScript
Optional compatibility layer
High performance rendering

You have options.

Option 1: Alias

resolve: {
  alias: {
    'react': 'preact-compat',
    'react-dom': 'preact-compat'
  }
}

webpack.config.js

Then pretend nothing happened.

Option 2: Alias Lite®

resolve: {
  alias: {
    'react': 'preact',
    'react-dom': 'preact'
  }
}

webpack.config.js

import React, { Component } from 'react';

export class Title extends Component {
  render() {
    return <h1>{this.props.title}</h1>
  }
}

components/Title.js

Option 3: Real Deal

import { h, Component } from 'preact';
import { connect } from 'preact-redux';

@connect( state => ({
  title: state.title
}))
export class Title extends Component {
  render({ title }) {
    return <h1>{title}</h1>
  }
}

Looks like React?

That's the point.

Provide React's paradigm

in as few bytes as possible

Preact's Goal:

What's different?

Diffs Virtual DOM against the DOM
Allows props like class and for
props & state passed to render()
Events are real DOM events
Supports fully async rendering
Subtree invalidation by default

Ecosystem

intentionally matches most semantics
works with React's ecosystem
yes this means redux
adds a new small modules ecosystem
nice minimal options for routing, redux, etc

Use-Cases

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

Non-Use-Cases

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

The Future

What's in store

Today

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

Coming in 8.0

preact-specific features factored into modules
enhanced async rendering & bootup
dramatic size reduction - aiming for 2kb
more performance improvements of course
Experimental Functional Components w/ state

On the Radar

Deeper Web Components integration
Enhanced Webpack integrations
Zero-configuration command line tool
...1kb?

Who is this guy