Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Preact

September 09, 2017

Introduction to Preact

A brief intro about Preact and its internals


September 09, 2017

Other Decks in Technology


  1. First Meaningful Paint How can we show some content? •

    Server Side Rendering • Pre-rendering • Reducing JavaScript Size
  2. 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
  3. What is Preact? • Tiny alternative to React • Same

    ES-2015 API • 3 kb of JavaScript • Optional compatibility Layer • High performance rendering
  4. 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
  5. 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
  6. 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