Introduction to Preact

D279821c96bb49eeaef68b5456f42074?s=47 Anup
September 09, 2017

Introduction to Preact

A brief intro about Preact and its internals

D279821c96bb49eeaef68b5456f42074?s=128

Anup

September 09, 2017
Tweet

Transcript

  1. 1.
  2. 4.

    First Meaningful Paint How can we show some content? •

    Server Side Rendering • Pre-rendering • Reducing JavaScript Size
  3. 6.

    Time-To-Interactive How fast can we make things actually work? •

    Uninteractive Paint - Static Picture • Can look “broken” • Uncanny Valley: looks real but isn’t Always bet wait on JavaScript
  4. 9.

    What is Preact? • Tiny alternative to React • Same

    ES-2015 API • 3 kb of JavaScript • Optional compatibility Layer • High performance rendering
  5. 10.
  6. 11.

    Preact: What’s different? • No legacy or avoidable APIs •

    Diffs Virtual DOM against DOM • Uses standard browser events • Events are real DOM events Trade-Offs VDOM DOM diff • Supports fully async rendering • Single-pass, top-down algorithm
  7. 12.
  8. 14.
  9. 15.
  10. 16.

    Swapping a project from React w/ Preact preact-compat is a

    2kb layer on top of preact which makes preact a drop-in replacement for react npm install --save preact preact-compat Then add an alias like
  11. 18.

    Features of Preact CLI • 100/100 lighthouse scores right out

    of the box • Fully automated code splitting for routes • Transparently code-split any component using async! Prefix • Auto-generated Service Workers for offline caching • PRPL pattern support for efficient loading • Support for CSS Modules, LESS, SASS, Stylus; with Autoprefixer • Automated app mounting, debug helpers & HMR
  12. 20.