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 beingeasy 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

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 yourpackage.json scripts as:

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

Starting a dev server

Bankai’s first command isbankai 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 onhttps://localhost:8080 usingHTTP/2.

Optimizations

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

• Remove unused code from both CommonJS and ES6 modules using atree shaking algorithm.
• Flattens bundles, which reduces the size and makes them faster to parse.
• Exposes amodule system for WebGL shaders, removing the need to copy/paste code.
• AllowsCSS to be imported from npm, and declared inside JavaScript; with zero runtime overhead.
• Removes unused CSS, inlines critical CSS and preloads the rest.
• Server rendersChoo applications(with more frameworks to follow).
• Sets up a live reload environment with no dependencies.
• Appliessubresource 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 asnetlify, it becomes trivial to redeploy your site on eachgit push. And because we’re writing content to unique directories, it should play nice withCDNs too.

But that’s not all, because we’re write compressed versions to disk, reverse proxies such asNginx will be able to serve smaller files with little effort based onAccept 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 combinebankai 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 thatHTTP/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

Dan Flettre,

and everyone else in theFreenode#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 outcreate-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