Bankai, the friendly web compiler

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.

bankai start shows a neat little interface

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.

bankai build writes your site to disk

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

bankai inspect lets you peek inside your modules

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