Choo Weekly 48/17: Bankai v9, Rustify, Component Preview & Nanostate
It’s Monday, and oh boy have we been busy. This week’s update includes the brand new version of Bankai, writing inline Rust (!), state machines, and more. Swooosh!
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.
Bankai v9
After 3 months of work, we finally released Bankai 9 last week! The positive feedback has been overwhelming!
At the time of writing, our release post has over 11000 views, and 5000 reads. That’s a lot for us! Read the Bankai 9 release post if you haven’t already:
HTTPS Docs in create-choo-app
Sometimes doing the right thing, isn’t the easiest. For example, enabling HTTPS for local development isn’t easy, especially if you’re new to development. To help people get started, we’ve added docs on how enable HTTPS locally to create-choo-app and Bankai. Yay for docs! 🎉
yo-yoify v4.2.0
Choo uses ES6 template literals to create HTML elements. This is great, because it allows you to write inline HTML directly from JavaScript.
But parsing HTML takes time. So in order to speed it up, it’s great if we can statically generate the output inside a transform. That’s what yo-yoify does.
And with yo-yoify v4.2.0, we’ve improved our template output even further. We now include our helper libraries only when they’re used, which should help make small apps even smaller!
Choo component preview
Ever since we started work on Nanocomponent, we’ve been thinking of how to make it part of Choo. Because Choo is modular, standards based, and explicit, this turned out to be slightly tricky.
Through the discussion in choojs/choo#593, we’ve come up with a way to integrate components. We’ve released a Choo plugin that enables a preview of this integration. If this turns out to work well, we’ll patch it into a future release of Choo.
This is what using the new component API in Choo views is going to look like:
var Article = require('./components/article')
var Header = require('./components/header')
var Footer = require('./components/footer')
module.exports = function (state, emit, render) {
return html`
<body
${render(Header)}
${state.articles.map(article => render(Article, article))}
${render(Footer)}
</body
`
}Nanostate
Last week we talked a bit about Finite State Machines. We’ve been tinkering a bit since then, and came up with a friendly state machine library.
Nanostate allows you to create state machines with just a few lines of code. This should help with writing maintainable code, and preventing bugs from being written in the first place.
var nanostate = require('nanostate')
var machine = nanostate('green', {
green: { timer: 'yellow' },
yellow: { timer: 'red' },
red: { timer: 'green' }
})
machine.emit('timer')
console.log(machine.state)
// => 'yellow'
machine.emit('timer')
console.log(machine.state)
// => 'red'
machine.emit('timer')
console.log(machine.state)
// => 'green'Rustify
Rust recently stabilized their WebAssembly compiler target. This means it’s possible to write Rust code that runs natively in Browsers.
Rust is great because it provides strong guarantees about the code. If you want to write critical software (crypto, video transmuxers, arithmatic), it’s worth using a language that helps get it right, faster.
In order to make the Rust WASM target easy to use for Choo projects, we’ve created Rustify: a Browserify transform that work with Bankai.
To use it, all you need to do is include Rustify in your package.json :
{
"name": "my-project",
"browserify": {
"transform": "rustify"
},
"dependencies": {
"rustify": "~1.0.0"
}
}
}And you can then start writing Rust code, either inline or as separate files:
var rust = require('rustify')
var wasm = rust`
#[no_mangle]
pub fn add_one(x: i32) -> i32 {
x + 1
}
`
WebAssembly.instantiate(wasm, {})
.then(function (res) {
var addOne = res.instance.exports.add_one
console.log(addOne(41))
console.log(addOne(68))
}).catch(function (e) {
console.error('Creating WASM module failed', e)
})Wrapping up
And that’s it for this week! We’ll probably be off next week, and possibly the week after (yay, vacation!), but should be back the week after that! Until then we’re going to be writing more docs, working on Bankai & using components.
Thanks for catching up with us. Happy hacking!
If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.
