Choo Weekly 47/17: Choo v6.6, Web Crawling, Small Bundles & Preact
Happy Monday everyone! Welcome to Choo weekly, your fave (and probably only) weekly update on all things Choo. This marks the first time we’re releasing an update two weeks in a row. Booyah!
We’ve got a good few things for you this week. Web crawling, a small Choo update, state machines (check out the video!) and the Choo Architecture for other frameworks. Good stuff; let’s dive in!
If this is your first time you’re hearing about Choo: we’re the tiny frontend framework you’ve always wanted to use. True story. Check out create-choo-app to have your first application working 5 minutes from now.
� Choo v6.6.0 was released
Thanks to the work of Moszeed, Choo’s app.mount() method now accepts regular DOM Nodes as arguments. So you can do the following:
var choo = require('choo')
var app = choo()app.mount('body') // We accept queries…
app.mount(document.body) // But now also accept DOM Nodes!
A minor change, but useful if you’re only ever handed the DOM node to operate on.
🕸 Crawling the web with Puppeteer
Chrome’s puppeteer library is rather neat. It allows starting and controlling a headless browser, directly from within Node. This means that we can start doing all sorts of fun, programmatic things with browsers, directly from Node.
A fun thing to do is crawling web pages. Crawling pages can be a great way to automate performance audits, accessibility, detect dead links, and many more things.
To make crawling easier, Irina Shestak wrote a library called puppeteer-walker 🏃. This makes it trivial to walk your whole site, and perform any sort of task. Not kidding; it takes about 10 lines of code to crawl a whole site:
var Walker = require('puppeteer-walker')
var walker = Walker()
walker.on('end', () => console.log('finished walking'))
walker.on('error', (err) => console.log('error', err))
walker.on('page', async (page) => {
var title = await page.title()
console.log(`title: ${title}`)
})
walker.walk('https://avocado.choo.io')Bankai v9 release this Wednesday! 🚉
After three months of work, we’ll be releasing Bankai v9 this Wednesday! Not only should it feel performant; Bankai v9 allows you to bring your applications to the future, today.
We’re the first Browserify-based project to include everything you’ve come to expect from a modern workflow. Bankai v9 includes bundle splitting, dead code removal, module flattening, inlining critical styles, asset preloading, server rendering and much, much more!
More about this on Wednesday! (22/11/17)
Choo Architecture for Preact ⚛️
Jon Gacnik opened a PR to upgrade Rooch to be API compatible with the latest version of Choo. Rooch is what Choo would look like, if it used Preact for rendering. It uses all the same routing, syntax, and abstractions — but on top it nicely layers Preact’s component system. Great if you like Choo’s architecture, but aren’t sure if switching is quite right for you. v3.0.0 should be landing soon.
🧙 Smaller bundles with Tinyify
Renée Kooi has been doing some great work to improve Browserify’s output size. Tinyify (pronounced “tiny-if-eye”), is a plugin that runs various optimizations, so you don’t have to install them all manually.
It removes require('assert') calls, replaces env vars, performs dead code elimination, minifies, flattens the bundle output and removes unused exports.
If you’re using Browserify for bundling, Tinyify is the plugin to use before deploying to production.
Finite State Machines
If you’ve been building interfaces for a while, you might be on the lookout for ways to make projects more maintainable, and easy to reason about. Finite State Machines (FSMs) might be the answer you were looking for.
In 25 minutes, Microsoft’s David Khourshid explains what FSMs are, why they’re useful, and which patterns to use when building applications. It’s worth a watch!
Wrapping up
And that’s about it for this week. We’re really stoked for Bankai v9 to be released this Wednesday. The website is also coming along nicely; we’ve started documenting Choo’s basics, and laid out an initial design direction. More on that next time.
Have a great week y’all!
If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.
