An Overview

Chad Jewsbury

@chadjewsbury

(but I don't tweet much)

Who Am I ? 

• Front End Engineer @Groupon
• Booking Platform Team
• New(ish) Father

www.chadjewsbury.com

PReact
PReact
Why / When?

Demo

• Consumer Facing Web & Touch Experience
• Preact + Redux

BeautyNow

*(Still in testing/ramp up, so it's not available everywhere, yet)

What is it?

• UI Rendering Library
• Like React (but not exactly)
• Faster than React (... sometimes)
• < 4kB

vs React+React-dom at ~34kB

RenderINg

import { h, render } from 'preact';

render((
  <div>
    <h1>Hello, world!</h1>
  </div>
), document.body);

h() --- HYPERSCRIPT-ISH

let foo = <div id="foo">Hello!</div>;  

// After Babel JSX transpilation... 
var foo = React.createElement('div', {id:"foo"}, 'Hello!')

// in Preact... 
var foo = Preact.h('div', {id:"foo"}, 'Hello!');

// Tell Babel to use Preact.h() in .babelrc
{
  "plugins": [
    ["transform-react-jsx", { "pragma":"h" }]
  ]
}

Functional Components

import { h, render } from 'preact';

const MyComponent = () => (
  <div>This looks just like React...</div>
);

render(<MyComponent />, document.body);

Class Components

import { h, render, Component } from 'preact';

class MyComponent extends Component {
  render() {
    return <div>This looks just like React...</div>;
  }
}

render(<MyComponent />, document.body);

Lifecycle events

So, What's Different?

+ State and Props passed to Render() 

+ class OR className 

 - No PropTypes

 - No React.Children  - Children are just an Array

 - No Synthetic Events

Link State

preact-compat

// webpack.config.js

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

2kB compatibility layer for React

Should I Use PREACT?

• Depends on the goals of the App
• Depends on complexity of App
  
• Depends on the typical user's device and connection

... it depends ...

• 5s "time to interactive"
• ... even on low-power mobile devices on 3G connections. 
• < 150KB gzipped budget for initial load.

Google's (idealistic) recommendations....

• Widgets
• Server Side Rendering
• Time to interactive critical apps
• Progressive Web Apps (PWA)
  • Uber, Lift, Housing.com

Use Cases

Preact-CLI

      Like create-react-app, but more focused on PWA's:

• 100/100 Lighthouse score
• Automatic code splitting for routes
• Auto-generated Service Workers for offline caching
• PRPL pattern support for efficient loading
  • Push, Render, Pre-cache, Lazy-load
• Pre-rendering / server-side rendering
• Only 4.5kb including preact and preact-router
  • 1.5kb of conditionally-loaded polyfills for fetch & Promise

https://github.com/developit/preact-cli

• Inferno (Newer, 9kB)
• React-lite (Generally slower)
• React

Alternatives

Demo

Who needs a drink?

and now... 

a super basic, contrived

Thanks!

https://slides.com/chadjewsbury/preact/