Introduction to Preact

A brief intro about Preact and its internals

Transcript

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
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
13. What makes Preact different from React? className vs class
14. render()
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