Who is this guy

@_developit  on Twitter

@developit  on GitHub

Works at Synacor

Lives in Ontario Canada

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?

Fin

Preact Overview

By developit

Preact Overview

  • 2,093