Bankai, the friendly web compiler

Yoshua Wuyts
Nov 22, 2017 · 5 min read

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.

Getting started

$ 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 start shows a neat little interface

Optimizations

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

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

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

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

bankai inspect lets you peek inside your modules

What’s next?

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

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

choo

Choo choo, here comes the medium train

Yoshua Wuyts

Written by

@yoshuawuyts

choo

choo

Choo choo, here comes the medium train

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade