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

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. None
  2. @reznord on Github @_reznord on Twitter Works at IBS Unified

    Who is this guy?
  3. Problem Shipping too much JS

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

    Server Side Rendering • Pre-rendering • Reducing JavaScript Size
  5. Awesome, but… What about interactions that require JavaScript?

  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
  7. A way to import less What we need ? but

    keep our approach.
  8. Preact a lightweight alternative to React

  9. What is Preact? • Tiny alternative to React • Same

    ES-2015 API • 3 kb of JavaScript • Optional compatibility Layer • High performance rendering
  10. None
  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
  12. None
  13. What makes Preact different from React? className vs class

  14. render()

  15. None
  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
  17. Preact-CLI Your next Preact PWA in 30 Seconds

  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
  19. Preact-CLI Demo

  20. None