Choo Choo (week 46, ‘17)
Another week, another train… or so we planned. It’s been two weeks since our last edition, but we’re back (and with about 85% less flu!) Here’s what’s new on planet Choo for this week.
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.
What’s new?
new-new-new Website (coming soon™)
We’ve started working on a new website with Folder Studio & Jon-Kyle. Thanks to the nearForm grant we were able to hire these fine folk, and collaborate to kick Choo’s design up a notch.
The idea is to create a website for everything Choo. Starting out with thorough documentation (aka our cryptonite), and then adding features on-demand. The goal is to have it the site up and up around January. Exciting!
Components
Jongacnik (from Folder), Tornqvist and Bret Comnes have been leading the conversation on Components in Choo. The problem space seems to have been established, and people are now working towards finding a good solution. Check out this reply from Tornqvist on what constraints we’re dealing with.
Choo Workshopper 🎓
Olivia started work on a brand new workshopper for Nodeschool! Soon you’ll be able to learn about Choo, Bankai and all the other tooling from the command line. In multiple languages. The first two exercises are live already. Woosh! (Repo on GitHub).
Robotopia 🤖
Robotopia is a project to teach kids how to code, built with Choo 🚂. Paul, Per, Tim, and Johannes built a block editor where you program robots to navigate their environment. Check out their story below!
Millennial JS 🎷
Nodeconf EU went down last week, and Irina Shestak & Yoshua Wuyts (yours truly) did a workshop! It’s available online, and anyone can follow along at home at https://avocado.choo.io.
Choo 💕 Babel
Combining transforms in Browserify can sometimes be a little tricky. Because everything is modular, sometimes order of inclusion matters. Probably the trickiest one for Choo was to combine yo-yoify (pre-compile Choo templates) with babelify (use modern JS in all browsers).
But that’s been solved. Thanks to the work of Renée Kooi, yo-yoify is now aware of the output from Babel (and Buble, a similar project) and will happily keep optimizing Choo templates. Woosh! (PR on GitHub).
Choo-scaffold 🏗
There’s a new module in town: choo-scaffold . We noticed that when building out applications, it can be a little repetitive to create new models and views. So we created a tool that will help make all that a bit easier. Especially when thinking about the upcoming Choo components, this will hopefully make developing Choo apps more streamlined.
$ choo-scaffold model <my-modelThere’s also a Pull Request on create-choo-app to include choo-scaffold by default. We’re committed to streamline application development as much as possible.
$ npm run create model <my-modelWhat are we working on?
Docs
New sites, new words. We’re going to be working a whole bunch on docs this week. And while we’re at it, try out https://crowdin.com to see if we can get some translations going. Because Choo is for everyone, and not everyone speaks English.
Bankai
Bankai v9 is very close to done! — we think we’ve got all major kinks sorted; we might put out a final RC (number 11), and then rev up for a final release at the end of this week. If it all goes well.
Babel support will probably land as a minor patch shortly after. It’s been probably the most requested feature we’ve had, and we care about making lives easier for people.
Performance Crawling
We’ve been meaning to try out GoogleChrome/puppeteer, and what better than to experiment with writing a crawler. We need some coding between writing docs & release notes, so having a fun side project for the week is neat!
The goal is to try writing a dynamic version of the (unfortunately unmaintained) github/lightcrawler. Instead of only interpreting static HTML, using a headless browser allows us to work with a real DOM and reliably analyze pages that rely on JavaScript — and in the process we can perhaps add in functionality to bypass forms. Swoosh, experimentation time!
What’s cool to work on?
Array-based Meyers diffing implementation
nanomorph is the diffing algorithm that powers Choo. It performs quite well for projects, but can be a bit slow in certain cases. It’s most notable when creating updating long lists of sibling nodes. This problem is formally known as “diffing” (which is different from “DOM diffing”).
The goal in diffing is to find the fewest amount of mutations necessary to move from one state to another. There’s a good amount of literature available on the problem. Probably the most well-known solution to the problem is the Meyers diffing algorithm.
In order for nanomorph to speed up, we need a Meyers diffing implementation that operates on Arrays (as opposed to strings). The API would look something like this.
var src = [ a, b, c ]
var res = [ a, b, c, d ]
var diff = []meyersDiff(src, res, diff)console.log(diff)
// => [ 3, 3 ]
The diffing algorithm should take 3 arrays: the initial state, the desired state, and the resulting diff. Because DOM mutations can happen very often (up to 60 times a second), it’s important to minimize garbage collection. Reducing memory allocation & Garbage Collection by reusing Arrays is a good strategy.
The resulting diff would be a list of x,y coordinates (we can’t nest arrays because of the memory cost). The x is the index in the target (res). The y is the index in the source (src) array.
The output of the diff would be something like this:
[ 2, 0] // Insert element from index 2 at the start of the array
[ 4, 3] // Insert element from index 4 before index 3
[ -1, 2 ] // Delete element at position 2// Replace element at index 3 with element from index 4
[ 4, 3, -1, 4 ]
Anyway; it’d be really neat if someone would take a stab at this. We’d be happy to mentor anyone that wants to pick this up, as it’s a crucial part of our systems that needs improving. Swooosh!
Wrapping up
Annnnd… scene! Thanks for making it this far. If you’re working on something cool using Choo, let us know through Twitter (@4kilobytes) or IRC (Freenode#choo).
Oh by the way, we hope you had a great weekend! Hope you have a great week! Catch you next time! 🚂
