Also happy Valentines Day! — we hope you had a good date with whatever you love most. In our case we really like food, and had a bunch — so that was pretty excellent.

Anyway, frontend. Let’s dive into our shortest Choo Weekly so far!

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.

nanocomponent-cache v1.1.0

Bret Comnes released v1.1.0 of nanocomponent-cache. This is a great module to keep track of component instances between runs. This is currently one of the solutions we’re considering for Choo’s component system going forward.

Bret Comnes on Twitter

🎉 Released class-cache and nanocomponent cache 1.1.0 🎉 🏃‍♂️ Added automatic (optional) LRU cache ejection 📚 More examples! https://t.co/H5pQMU38QK 🚂🚃🚃🚃🚃 #choo

bcomnes/nanocomponent-cache

Showrunner.io beta is live!

The wonderful folks over at Scripto have released the beta for the new Showrunner: an application to help write TV shows. We’re really excited about this, as it’s probably one of the most complex Choo apps in production at the time of writing.

If you’re looking to work with Choo, and live in the US: they’re currently looking for a new engineer on their team!

Showrunner

sheetify-cssnext v2.0.0

One of the oldest modules Sheetify ecosystem was recently updated to be compatible with the latest Sheetify. If you’re looking to try out the latest CSS syntax, today — give sheetify-cssnext a spin!

choo on Twitter

sheetify-cssnext v2.0.0 has been released. Updated to the latest cssnext https://t.co/GwC0ESiCrW

Wrapping Up

And that’s it for this week! We’re currently working on (experimental) async rendering in Bankai, so pretty stoked about that. Also there’s some more general quality-of-life improvements coming through in Bankai, and we’re really excited for them!

Anyway, this is goobye. Catch y’all again next week!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly #7 2018: nanocomponent-cache, showrunner.io & cssnext was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

5000 stars on GitHub!

On Tuesday May 10th we made the first commit to Choo. Now 1 year and 9 months later we’ve passed 5000 stars on GitHub! We’re grateful for everyone that’s come along on this journey; it means the world to us.

We also recently found out we crossed the 100.000 downloads mark on npm. That means we’ve had about 150–200 downloads a day on average for as long as we’ve existed! Thank you!

Reference → Docs

The response to our docs release last week has been great! We’re real happy that people are responding so well; it’s been a long way coming.

However, a piece of feedback we received was that choo.io/reference wasn’t the most intuitive url for docs. So our docs are now available on https://choo.io/docs! We feel this makes more sense, and are happy to have made the change!

Speaking of docs tho: we’re excited to finish the work we’ve been doing on our guides. Stay tuned for more on that!

Faster HTML parsing with hstream

As part of our effort to speed up Bankai, we noticed that in particular our HTML parsing wasn’t performing well. In particular the hyperstream package was starting to show its age.

So to improve that, Renée Kooi has created hstream, a library to efficiently stream HTML templates. It’s already live in Bankai today. Check it out on github.com/stackhtml.

stackhtml/hstream

create-choo-app v1.11.0

Improvements sometimes take a bit of time to come through. So too did our work on create-choo-app. But last week we’ve revisited it with the help of Yerko Palma, and applied a much-needed layer of polish!

create-choo-app now has service workers enabled by default for all new apps. This is cool, because it means that by default all your apps should be passing as 100/100/100/100/100 on Google’s Lighthouse audit!

Also check out the new default Choo app we create for you. We’ve included a screenshot below, but there’s also a live website if you want to see it in action yourself! https://welcome.choo.io

Nanostate v1.2.0

Nanostate now has support for hierarchical state machines. Adding hierarchy to state machines is a form of composition that allows matching states if a particular state doesn’t match.

In nanostate it looks like this:

var nanostate = require('nanostate')

var machine = nanostate('green', {
  green: { timer: 'yellow' },
  yellow: { timer: 'red' },
  red: { timer: 'green' }
})

machine.event('powerOutage', nanostate('flashingRed', {
  flashingRed: { powerRestored: 'green' }
}))

machine.emit('timer')
console.log(machine.state)
// => 'yellow'

machine.emit('powerOutage')
console.log(machine.state)
// => 'flashingRed'

machine.emit('powerRestored')
console.log(machine.state)
// => 'green'

Shout out to Jonathan Dupré for all the hard work put into making this happen!

choojs/nanostate

choo-notification

If you’ve ever interacted with the Web notification API, you might have noticed that it requires a good amount of boilerplate to set up permissions right. And once it works, you’ll probably need to wrap it for logging and other things.

To make the Notification API easier to use with Choo, we’ve released choo-notification! It’s a thin wrapper around the Notification API, exposing it entirely through Choo’s emitter API.

choojs/choo-notification

As an added bonus: we recorded authoring this plugin entirely on stream. Check out the recording below!

New Sites this week

There’ve been a few new sites created with Choo this week. Check it out!

• eleven.yoshuawuyts.com (GitHub)
• yoshuawuyts.com (GitHub)
• bankai.choo.io (GitHub)
• lesspass.alhur.se

Wrapping up

And that’s it for this week! Thanks for reading it all, and see you again next week. Happy hacking y’all!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly #6 2018: thank you! was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

This week we’ve got some fun things for y’all! Our docs are finally live, we’ve added a (small) armada of GitHub robots to our repos — and we shrinkified Bankai. Let’s dig 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.

Documentation is Live!

For the past few months we’ve been hard at work to bring Choo’s documentation online, and last Thursday it went live! Jon-Kyle’s doc designs are now available for everyone to enjoy. Check it out now on choo.io/reference.

We have another 4 guides currently being worked on, so expect updates to come down soon!

We’d be keen to hear which guides you’d like to see; let us know and we’ll make it happen!

Robots on our GitHub org

Managing GitHub repositories is tricky. On an average day about 20 new issues pop up, varying between questions, support, issues and features. While we try and reply to everything, we can’t always get around to replying to everyone.

Luckily automation can help us with managing issues! By employing robots, we can check notify people of changes that happened, and ask them if issues are still relevant.

So we’re happy to share that starting this week, we’ll be employing release-notifier full-time, and will be starting a trial with stale-bot.

We hope you’ll enjoy these new bots! — We definitely want to hear from you how you’re finding the experience. We’re always looking to improve, and feedback is invaluable!

Smaller Bankai Installations

Renée Kooi released a new version of browser-flat-pack , which brings the total size of Bankai on-disk to under 100MB! This should speed up installation times, and make Bankai even more pleasant to work with!

Renéeeee on Twitter

browser-pack-flat@3.0.7 removes 10MB worth of unused files from the published package, finally bringing a full bankai install down to <100MB! https://t.co/aFp0NghEFp

Wrapping up

And that’s it again for this week. We’re super excited Choo docs are now live! — this was about two years overdue; but better late than never haha.

In other news: we’ve been experimenting with http/2 push while in Singapore, and it’s looking quite promising. We have nothing to show yet, but there’s a good chance this might turn out to be a big deal. Haha, well it’s all hypotheticals for now tho.

Anyway, sometimes the time to say goodbye is now. So, err, goodbye. Catch you next week!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly #5 2018: documentation is live, GitHub robots & smaller Bankai builds! was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

This week we have lots of work from people in the community. Maps, videos, sketches, and apps — it’s all here!

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.

nearForm is sponsoring Browserify & Bankai development

nearForm has been sponsoring Choo for a couple of months now. One of the largest projects we’ve published since has been Bankai v9: an optimizing web compiler. Many of its features, such as code splitting and bundle flattening were implemented by Renée Kooi.

We’re thrilled to announce nearForm has agreed to sponsor Renée part-time to continue their work on Bankai & Browserify! We’re excited for the future is going to hold, and thankful to nearForm for their continued support!

Let’s read some code! Choo Stores

Josh Johnston started a walkthrough of how Choo’s internals work! Check out how Choo’s store abstraction is implemented!

State Machines drawing

Irina Shestak drew a pretty great visualization of how State Machines work. Check it out on her Twitter:

ira. on Twitter

a quick little drawing on FSMs 💻 ✨

3D Maps

substack has been creating 3D map sculptures using Regl and Choo. Check out Hawaii & Seamount.

Hypercast

Louis Center has been working on p2p video using Dat and Choo! Pretty cool if you want to share (live) video without relying on a central provider.

LOUIS on Twitter

a new WIP, now ready to play with: hypercast, p2p livestreaming for @BeakerBrowser → https://t.co/CxX0VjCPei https://t.co/jDCxK875Zd

Electron Feed Reader

Wrapping up

Thanks for making it this far! We’re excited by the work folks have been making with Choo!

We hope y’all have a great week!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly #4 2018: Bankai Sponsorship, Community Highlights was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 Routing Changes

One of the main appeals of Choo is that you understand how it works, you can implement it yourself from scratch in a couple of hours. After all: our main source is about 200 lines.

One of the hardest parts at the moment is the way our router interacts with the rest of the app. Luckily, thanks to the efforts of Marc Bachmann the last little bits of complexity will soon be ironed out.

A minor release with these changes should be landing this week!

Separate route matching from rendering by marcbachmann · Pull Request #613 · choojs/choo

Sheetify 7.0.0

Sheetify has been the way we figured people might want to use CSS. Being able to import stylesheets from npm, defining them inline, but also in local .css files: Sheetify does it all!

Our latest release is 7.0.0 which brings the configuration in line with browserify and documentify. Instead of --use, you can now do --transform. A small breaking change that warranted a major bump, but an important one at that!

Sheetify 7.0.0 should be landing in Bankai soon too. So keep an eye out for updates!

stackcss/sheetify

Bankai 9.2.0

Speaking of Bankai: we mentioned last week we’d be releasing a new Bankai version, and we did! Bankai 9.2.0 comes with all sorts of goodies!

We’ve improved our source map logic, making source maps more reliable. And we’ve improved our installation times using rust-brotli — so no more compilation times when installing!

Go ahead and install Bankai 9.2.0 today!

$ npm install bankai@9.2.0

If you’re never heard about Bankai: it’s the easiest way to compile your frontend projects. With two commands it takes care of all tooling for both production & development. Check out https://github.com/choojs/bankai to learn more.

Parallel Nanostate

Thanks to the work of konrad.min.js, Nanostate now has parallel support! You can now hook up multiple state machines into a single interface, making it easier to interact with.

var nanostate = require('nanostate')

var machine = nanostate.parallel({
  bold: nanostate('off', {
    on: { 'toggle': 'off' },
    off: { 'toggle': 'on' },
  }),
  underline: nanostate('off', {
    on: { 'toggle': 'off' },
    off: { 'toggle': 'on' },
  }),
  italics: nanostate('off', {
    on: { 'toggle': 'off' },
    off: { 'toggle': 'on' },
  }),
  list: nanostate('none', {
    none: { bullets: 'bullets', numbers: 'numbers' },
    bullets: { none: 'none', numbers: 'numbers' },
    numbers: { bullets: 'bullets', none: 'none' }
  })
})

machine.emit('bold:toggle')
console.log(machine.state)
// => {
//   bold: 'on',
//   italics: 'off',
//   underline: 'off',
//   list: 'none'
// }

Install nanostate@1.1.0 to get started today!

choojs/nanostate

Composable Views Documentation

We’re trying our best to write documentation for Choo. This not only means covering the basics, we also want to provide people with patterns & modules to use. After all: this is how people work on a day-to-day basis, and we want to make this available for everyone.

One of the patterns people have been wondering about in Choo, is how to reuse large parts of a view when you have a lot of similar views. We made a PR exactly to address this!

composable views by yoshuawuyts · Pull Request #43 · choojs/website

We’re thrilled that we’re able to put out more docs. We’d love to hear from you if you had trouble doing something, because there should be docs for that!

United Nations Website

code and conspire made a website for the United Nations using Choo. They’ve also committed to sponsoring Choo on OpenCollective! We couldn’t be more grateful.

Check out the website for the United Nation’s 2030 sustainability goals!

Overcoming the World's Challenges - The Global Goals

Scripto in the New Yorker

Last week Scripto got a feature in the New Yorker about how they’re transforming the way late night shows are made in the US. We’re really excited for them!

Scripto have been using Choo since the beginning. Their challenges have helped shape Choo into what it is today — shout out to a pile of moss, Scripto’s CTO!

How Scripto, the App That Stephen Colbert Helped Build, Became a Fixture of Late-Night Comedy News

Components Progress

Seth Thompson made a nanolru, a small module to keep track of component instances with garbage-collection built-in. This should help us progress components nicely.

More updates to follow soon!

Wrapping Up

Thanks a lot for making it this far. Hope you’re catching enough sleep and are staying hydrated. We hope you have a great rest of the week! Catch you next time!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly #3 2018: Routing Changes, Sheetify 7.0.0 & Parallel Nanostate was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

Rust in Bankai

Now that Bankai 9 has been released, one of our goals is to make it even easier to use. Node modules are convenient, but when installing native code (C++), installation can take a while.

So in order to speed up Bankai installations, we’ve switched out the native Iltorb module, with Dropbox’s Rust Brotli package. We use this in Bankai by compiling it to WebAssembly, which can be published directly to npm, and loaded without any further compilation steps.

The upcoming bankai v9.2.0 will be including this. Yay!

If you’re never heard about Bankai: it’s the easiest way to compile your frontend projects. With two commands it takes care of all tooling for both production & development. Check out https://github.com/choojs/bankai to learn more.

WASM Brotli · Issue #358 · choojs/bankai

Docs

We’ve been hard at work on documentation over the past week. A few new PRs have landed with docs on Forms, and State Machines! All in addition to previous docs on routing, views and more. Check out the latest here:

• server rendering by yoshuawuyts · Pull Request #39 · choojs/website
• choojs/website
• State machines by yoshuawuyts · Pull Request #38 · choojs/website

Components Update

We’ve mentioned before that we’re working on bringing components to Choo. We had a call about this on Tuesday 09/01, and it went well! It’s looking like we’ll be able to figure out how to move this forward real soon. So stay tuned, more news to follow!

Development Stream on Twitch

We’ve started livestreaming Choo development & GitHub maintenance on Twitch. If you’re interested in seeing how Choo is made, come and hang out!

Wrapping up

And that’s all for this week! Expect work on docs to continue well into next week, also probably some changes regarding routing coming up. Oh and Bankai v9.2. That’s actually quite a lot, hah.

Thanks a lot for reading it so far. Hope everyone has a great week, and catch you again soon!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly #2 2018: Rust in Bankai, Docs and Development Live Streams! was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

Happy New Year! We’ve been on hiatus for the last two weeks — but back this week with lots of goodies!

New Website Preview

We have a new website! Jon-Kyle has been hard at work during December to get this running. It’s still in early preview; we’ll continue to release features during the coming weeks (*ahem* docs), so stay tuned!

https://choo.io

Choo now accepts multiple arguments in the emitter

We fixed a bug in Choo that prevented multiple events from being accepted. This means you can now send multiple events down in your event emitters. This should make it easier to work with multiple data entries.

emitter.emit('calc', 1)          // old
emitter.emit('calc', 1, 2, 3, 4) // new

https://github.com/choojs/choo/pull/615

Bankai 9.1

Bankai v9 was released. It includes a few small changes for performance, but also two neat changes:

• We now have a better story on how to handle the Babel configuration of dependencies (bankai#352).
• bankai build now checks if files already exist before writing them to disk. This should make asset-heavy builds a lot faster (bankai#355).

To get the latest bankai, run npm install bankai@9.1 .

Yo-yoify source map fixes

Source maps have been a bit of an issue in Bankai for a while now. But thanks to the efforts of Renée Kooi, we’re getting a few steps closer to fixing them!

https://github.com/shama/yo-yoify/pull/60

2018 Roadmap

New year, new plans. Well not really, but we wanted to share what we’ve been up to. We feel that Choo is a solid choice for building applications, but we want to step it up even further in 2018.

The goal of Choo is to make modern web applications easy to build. Using thin wrappers around new technologies, we want to make browsers accessible to everyone. The web evolves, and so do we.

• Choo component system. When building UIs, it’s often easier to start with stateful components, and work towards stores later. We recognize this, and want to introduce a component system for Choo. We’re almost done with this, and it should be landing in a few weeks!
• Async routing. We want people to be able to asynchronously load any part of their application, with no effort. We want to optimize applications out of the box, so it stays fast — no matter what stage of development you’re in.
• Better diffing performance. While Choo is quite fast right now, there’s plenty of room to improve the performance of our diffing algo. There are new web specs landing for DOM diffing too, so this is going to be interesting!
• First class i18n support. The web is international, and so should our copy be. We want to create a great story for internationalization — so it no longer becomes an afterthought, but something you can do as you build out your applications.
• Better docs. Building websites should be easy. The web platform offers so much functionality — so much that it can become easy to overlook things. We want to create concrete guides on how to do things. Forms, architecture, translations, mouse events — all of these should have concrete answers. We’re working on creating better documentation for Choo, it’s ecosystem, and everything in between!
• HTTP/2 & ES modules. As HTTP/2 and ES modules are landing in Node, we’re going to be digging deeper into this. There’s a lot of fun optimizations that can be done using HTTP/2 push, so this is one to look out for!

Annddd a lot more! We’re committed to improving Bankai, Create-choo-app and our other modules throughout the year. They’re probably going to be less of features, and more of gradual fixes. But hopefully at the end of 2018 we’ll be able to look back with a smile to how far we’ve come.

Wrapping up

Thanks all for reading this far. We’re super excited for 2018! We hope you have a great time building projects, taking naps & otherwise having fun. Oh and stay healthy. And stay warm. (Just kidding, we’re a framework — not your parents.)

Anyway, it was good catching up again. Happy hacking!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly 01/18: Bankai 9.1, Roadmap & New Website was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

Surprise! Another Choo weekly 🎉. This edition is brought to you from Tokyo, Japan.

This time around we’re highlighting some great modules created by Yerko Palma. We’ll be talking about browser networking, speech synthesis & audio playback. Oh, and more docs! Strap in, and let’s go!

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.

Documentation

The first few pieces of documentation have been written! We got:

• Views — Everything on how to render to the DOM.
• Stores — Dive deep into Choo’s data abstraction.
• Routing —Straight forward routing for projects of any size (wip).

Now that the basic guides are done, we can start work on some of the more in-depth ones. At the top of our list are Forms, with Data Management coming in as a close second. Components are a high priority too, but we have to land a patch before we can start expanding on how to use it properly. Stay tuned!

Networking

Most web apps talk to servers. And by doing to so they require to use the network.

• YerkoPalma/choo-sse
• YerkoPalma/choo-websocket

Sound in the browser

Not all websites make use of sound — and that’s probably a good thing. It can be hard to get things right at times. But when done carefully, adding sound can be a great way to enrich a site’s experience.

Some sites are entirely based around playing audio. For example soundcloud.com and audiograph.xyz.

Thanks to choo-audio, playing audio with Choo is not hard either:

var choo = require('choo')

var app = choo()
app.use(require('choo-audio')())

app.use((state, emitter) => {
  emitter.emit('audio:load', '/assets/music.wav')
  emitter.emit('audio:play')
  setTimeout(emitter.emit, 1000, 'audio:pause')
})

YerkoPalma/choo-audio

Speech Synthesis and Voice Recognition

designbetter.co recently created a rich series of articles recently, bundled together to form an online library. Not only is the site brimming with illustrations & animations — each chapter is available as an audiobook too.

However, not everyone is in a position to have professional voice actors read out their work. Luckily thanks to advances such as Google’s WaveNet paper speech, synthesis is becoming a lot better (check it out, the demos are seriously cool!).

And as audio synthesis technology advances, so will the implementations that power browser APIs. You can use the speech APIs with Choo, today:

var choo = require('choo')

var app = choo()
app.use(require('choo-tts')())
app.use(require('choo-stt')())

app.use((state, emitter) => {
  emit('stt:start')
  emit('tts:speak', 'I'm listening!')
  emitter.on('stt:result', (res) => {
    emit('tts:speak', res)
  })
})

• YerkoPalma/choo-stt
• YerkoPalma/choo-tts

Wrapping up

Thanks all for making it this far. There won’t be a Choo Weekly next week, but we’ll be back the week after. We hope you enjoyed reading up about some of the cool third party modules we have in our ecosystem. Perhaps even enough to take them for a spin? We definitely hope so!

It was good catching up again. Happy hacking!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.

Choo Weekly 49/17: Networking, Audio Playback & Speech Synthesis was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

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:

Bankai, the friendly web compiler

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! 🎉

choojs/create-choo-app

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!

shama/yo-yoify

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
  `
}

yoshuawuyts/choo-component-preview

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'

choojs/nanostate

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)
  })

browserify/rustify

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 ✌️.

Choo Weekly 48/17: Bankai v9, Rustify, Component Preview & Nanostate was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Web Platform is doing amazing! We have a multi-language, standardized Virtual Machine with a graphical layer running on virtually every device. If you want to share your things with an audience, there’s nothing with a wider reach!

However, building the Web is by no means simple. There’s a lot that’s possible, which means there’s a lot to learn. But that shouldn’t prevent it from being easy to build things.

And that’s where Bankai comes in. We wanted to have a tool that makes it easy to build things for the web. And as the Web evolves, it figures out how to apply the latest optimizations to your project. You shouldn’t need to be an expert to do the right thing.

The same goes for tooling though. A lot of tools come with options, flags and switches everywhere. It can take a while to learn. Bankai does away with all this, exposing 3 commands to perform 3 different tasks.

You shouldn’t need to be an expert to do the right thing.

choojs/bankai

Getting started

Every story needs a beginning. Installing Bankai can be done through npm.

$ npm install --save-dev bankai

And once it’s done installing, you can add it to your package.json scripts as:

{
  "name": "my-project",
  "scripts": {
    "start": "bankai start",
    "build": "bankai build",
    "inspect": "bankai inspect"
  }
}

Starting a dev server

Bankai’s first command is bankai start, which starts an application development server. It detects all of your application’s files (service workers included), compiles, and serves them up. Once it’s started you can visit your brand new site on https://localhost:8080 using HTTP/2.

Optimizations

bankai build doesn’t look like much, right? You’re right, that’s because it shouldn’t. It’s doing a lot of optimizations though. Here’s a small list of what our little command is doing.

• Remove unused code from both CommonJS and ES6 modules using a tree shaking algorithm .
• Flattens bundles, which reduces the size and makes them faster to parse.
• Exposes a module system for WebGL shaders, removing the need to copy/paste code.
• Allows CSS to be imported from npm, and declared inside JavaScript; with zero runtime overhead.
• Removes unused CSS, inlines critical CSS and preloads the rest.
• Server renders Choo applications (with more frameworks to follow).
• Sets up a live reload environment with no dependencies.
• Applies subresource integrity (sha512) checks for all scripts and styles.

And probably about 30 more optimizations we don’t want to bore you with. We help you optimize your application, so you don’t have to worry about it.

Writing to disk

Once you’re done building your project, you probably want to host it somewhere. If your site doesn’t require a server, all it now takes is 1 command: bankai build.

Using a content provider such as netlify, it becomes trivial to redeploy your site on each git push. And because we’re writing content to unique directories, it should play nice with CDNs too.

But that’s not all, because we’re write compressed versions to disk, reverse proxies such as Nginx will be able to serve smaller files with little effort based on Accept headers.

Usage as a library

But not all sites are static. Sometimes we need to render pages dynamically on the server. Because Bankai is a native Node program, it can be used with any server framework to render pages.

var bankai = require('bankai/http')
var http = require('http')
var path = require('path')

var compiler = bankai(path.join(__dirname, 'example'))
var server = http.createServer(function (req, res) {
  compiler(req, res, function () {
    res.statusCode = 404
    res.end('not found')
  })
})

server.listen(8080, function () {
  console.log('listening on port 8080')
})

You can combine bankai build with a CDN for the primary layer of content delivery. And if the first layer can’t handle the request, it can be redirect it to Bankai inside a Node service to render pages. This multi-layered system should perform rather well, and shouldn’t be overly complex to setup!

Babel

Not all browsers support all of the Web Platform’s features. So in order to use newer features on older browsers, we have to find a solution. The best solution out there at the moment is Babel.

Babel is a plugin-based JavaScript compiler. It takes JavaScript in, and outputs JavaScript based for the platforms you’ve decided to target. In Bankai we target the last 2 versions of FireFox, Chrome and Edge, and every other browser that’s used by more than 1% of people on earth. This includes IE11. And if you have different opinions on which browsers to use, Bankai respects .babelrc files.

Analyzing projects

While devtools are great, they don’t always provide all the information we need. bankai inspect allows you to peek inside your bundle to figure out what’s happening inside your bundle(s).

What’s next?

Version 9 was released today, but that doesn’t mean we aren’t looking to the future. We think that HTTP/2 push, and ES modules are going to be an important part of the web’s content delivery in the future. We’re quietly experimenting with cache digests, and it’s looking promising.

We’re also looking into WebAssembly, per-page CSS splitting, further optimizing assets (WebM, WebP!), and improving Bankai’s own performance. If any of this sounds interesting, we’d love for you to get involved!

Wrapping up

And that’s about everything we have to say for now. We could probably dive deep into the internal architecture & design decisions, but that probably deserves its own writeup.

Also special thanks to everyone that’s helped out. This release wouldn’t have been possible without Renée Kooi, Dan Flettre, and everyone else in the Freenode#choo channel. Also special thanks to nearForm for sponsoring the project, and Jon-Kyle for making that cool graphic at the start. 🎉

We hope you have fun using Bankai, Choo, & friends! If you haven’t tried any of it before and would like to start, check out create-choo-app. It creates a fresh Choo app for you, and uses Bankai out of the box.

Thanks for catching up & have a great week! ✌️ — Team Choo

Bankai, the friendly web compiler was originally published in choo on Medium, where people are continuing the conversation by highlighting and responding to this story.