ID200-3
Responsive UI Design
tl;dr?
"Fast 3kB alternative to React
with the same modern API."
- https://preactjs.com
Yet another framework?
How?
"Preact's implementation is about as different as it could be from React's. It uses the DOM to figure out how to do things like set properties VS attributes, has a simpler stack-based diffing algorithm, and reuses the class components API internally for function components."
- Jason Miller
(Web Dev Relations at Google & Preact Creator)
How?
"Preact itself is not intended to be a reimplementation of React. [...] Preact does not attempt to include every single feature of React is in order to remain small and focused - otherwise it would make more sense to simply submit optimizations to the React project, which is already a very complex and well-architected codebase."
Why?
"As Uber expands to new markets, we want to enable all users to quickly request a ride, regardless of location, network speed, and device. With this in mind, we rebuilt our web client from the ground up as a viable alternative to the native mobile app. [...] In the interest of size, we chose Preact over React."
- Engineering a High-Performance
Web App for the Global Market
Why?
"Recent PWA launches like Lyft, Uber and Housing.com all use Preact in production. [...] Preact tends to be a strong choice for the 95% of cases you would use React."
- A React And Preact Progressive Web App Performance Case Study,
Lakshya Ranganath & Addy Osmani
Who?
How fast?
"The previous total JavaScript bundle size was: 36.2K. The new JavaScript bundle size was: 5.9K. I.e. 6 times smaller. [...] the size difference uncompressed was 129K vs. 18K. I.e. 7 times smaller.
I can only speculate but I do suspect you need less CPU/battery to process 18K instead of 129K if CPU/batter matters more (or closer to) than network I/O."
- A React vs. Preact case study for a widget,
Peter Bengtsson (Senior Web Developer at Mozilla)
How fast?
How fast?
"Truth be told, I'm not sure how predictable or reproducible is. I ran that WebPageTest visual comparison more than once and the results can vary significantly. I'm not even sure which run I'm referring to here (in the screenshot) but the React widget version was never faster."
- A React vs. Preact case study for a widget,
Peter Bengtsson (Senior Web Developer at Mozilla)
How fast?
"At the time of writing, preact-cli uses Preact 8.2
and I'm eager to see how Preact X feels.
Apparently, since April 2019, it's in beta."
- A React vs. Preact case study for a widget,
Peter Bengtsson (Senior Web Developer at Mozilla)
Preact as Framework
Approach 1
📦 Libraries
- React
- Vue
- AngularJS
🏭 Frameworks
- Angular 2+
- Gatsby
- Nuxt
Ontological Prep
Preact CLI
"The purpose of official Preact project templates are to provide opinionated development tooling setups so that users can get started with actual app code as fast as possible."
Preact CLI
-
JSX support
-
Module resolution (via Webpack)
-
ES6+ transpilation (via Babel)
-
PRPL pattern support
-
A Service Worker for offline caching
-
Automatic routing, code splitting and HMR
-
CSS Modules, LESS, Sass and Autoprefixer support
-
Supports IE9+
Demo time
- Linus Torvalds
(Creator of Linux kernel)
"Talk is cheap. Show me the code."
Diminishing Returns
"Preact aims to deliver the value of VDOM in as few bytes as possible. If you have an app that is already 1MB or where usage is specifically not resource constrained (eg: Electron), the values Preact tries to deliver on may not line up with what's most important to your project."
- Jason Miller
(Web Dev Relations at Google & Preact Creator)
Preact as Widget Machine
Approach 2
Shooting for the Stars
"For me, the most surprising part of reading Preact’s source was finding how much of it was small, understandable files."
- Preact Internals #1: The Easy Parts
Adam Solove (Engineering Manager at Stripe)
HTM
"Hyperscript Tagged Markup is JSX-like syntax in plain JavaScript - no transpiler necessary. [...] The original goal for htm was to create a wrapper around Preact that felt natural for use untranspiled in the browser. I wanted to use Virtual DOM, but I wanted to eschew build tooling and use ES Modules directly. [...] Since htm is designed to meet the same need as JSX, you can use it anywhere you'd use JSX."
- http://npm.im/htm
Looking at the Numbers
Shoutouts!
Jason Miller
@developit
FEDSA Team
https://fedsa.org
✌ Get in touch
- Website: https://schalkventer.me
- Github: https://github.com/schalkventer
- Codepen: https://codepen.io/schalkventer
- NPM: https://www.npmjs.com/~schalkventer
- Slack (ZA Tech, Code for Africa): @schalkventer
Links
- Slides:
https://slides.com/schalkventer/preactjs
- Codepen Example:
https://codepen.io/schalkventer/pen/JjYxeLy
- Millimetr Preact Starter:
https://github.com/millimetr/millimetr-preact