Some of the latest news from the Preact world: the mobile version of Uber website uses Preact as well as the new Transformers promo site, and the author of Preact gave a great talk called “Preact: Into the void 0” at JSConf EU 2017. I will also share my impressions of an egghead.io course and take a look at preact-cli, a tool for quick PWA app creation.
Meanwhile, an article published on the Uber blog tells the story of how a mobile version of their website m.uber.com was created, which is, in fact, a progressive web application powered by Preact and Redux. It’s a story of building a small and fast web application while keeping the entire functionality for getting an Uber ride. In the end, the whole app fit into 50 Kb after gzip.
I wonder if they are using preact-compat compatibility layer and standard react-redux bindings, or maybe, instead of a compatibility layer, they work with pure Preact and preact-redux bindings. Though I didn’t manage to find the word “compat” anywhere in the minified code on their site.
By the way, the promo site for the latest Transformers movie is also built on Preact.
This week I finally had time to watch a talk called “Preact: Into the void 0” that Jason Miller, the author of the library, gave at JSConf EU 2017.
Definitely a must-watch!
Inspired by this video, I found some time to watch the Preact course at egghead.io that I mentioned a few episodes ago. However, it turned out to be too basic. Essentially it’s an introduction to React with a couple of examples specific to Preact. It once again goes over what functional, stateless and stateful components are and how to query data in componentDidMount, with a few basic router and Redux examples. If you are a confident React user who wants to get to know Preact, a better choice would be to take 15 minutes and skim through the documentation on Preact website, instead of spending a whole hour on this video course. Or take it even further and watch the talk “Preact: Into the void 0”, it gets pretty hardcore.
Moving on, I’ve decided to try out Preact-cli, a console tool for launching a Preact project quickly, and not just any Preact project, but a full-fledged Progressive Web App:
- Lighthouse rates its performance at 100 points out of 100.
- Its features include: fully automatic code splitting for routes, service workers and offline caching, server-side rendering, CSS Modules, LESS, Sass, Stylus, and Autoprefixer (the only thing missing is PostCSS, although it is available via a plugin).
- There are also debug helpers and hot module replacement.
Judging by the description, Preact CLI looks way cooler than Create React App. It even comes with a plugin system!
The demo project is rather straightforward: three routes broken down into tidy components. I ran a production build with a preact build command and got a separate js file for each route, plus a 5 kilobytes polyfills.js containing polyfills for fetch and Promise, then a 19 kilobytes bundle.js and a 4 kilobytes sw.js (some service workers stuff I think). Here I’m referring to file size on the hard drive before gzip compression.
I haven’t yet built a proper project with Preact CLI, but I’m really looking forward to it. To me, the most intriguing part is TypeScript support. There is a plugin for TypeScript support, but I have not tried it yet. A milestone for version 2.0 has already been created on GitHub. There are plenty of commits and a lot of action every day.
Code with Preact CLI and prosper!