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
