[005.2] An Introduction to Bankai

Uncomplicated HTML, JS, and CSS compilation with Bankai

Subscribe now

An Introduction to Bankai [12.20.2017]

Introduction

Bankai is a web compiler created by people from the Choo Framework. If you don't know what Choo is, take a look at the website. We will cover some Choo episodes here later.

However, our focus today will be on Bankai.

Bankai has extremely interesting tools. We can bootstrap and deploy a JavaScript application in seconds. Let's take a look!

Getting Started

Let's start by creatin g a JavaScript app. The name will be using-bankai.

npm init

Then, we will install bankai. Installing. Once it's installed, we can add bankai scripts in our package.json.

vim package.json

Bankai comes with three important scripts. Start the app, running a development server. Build the app and inspect. This allows you to peek inside your bundle, and see what it looks like in terms of size and files.

  "scripts": {
    "start": "bankai start",
    "build": "bankai build",
    "inspect": "bankai inspect"
  },

We will use the Choo framework just to show a counter in our screen. In this case, I will copy the example from the Choo project. It's a straightforward counter, similar to what people do in redux.

Then, I need to install choo and choo-devtools.

npm install choo
npm install choo-devtools

Starting our server. We can see it has already used server-side rendering, and the total size of our bundle is very small.

Deploying

We can deploy our build project easily. After using a build command, our files are placed in /dist. We can use a tool like netlify or now and deploy it. I will use now.

Simply using now in our dist folder deploys our app. It already has HTTPS and it's completely deployed. In seconds. Sweet!

Inspecting

We can use the last command, inspect, to see what is inside our bundle. How are node modules being used? Is theres a heavy package? This gives us a general overview of our project. Very interesting, especially if you take care of how heavy your project is loaded.

What it has included

Bankai supports Babel. It also comes with some tools and optimizations for HTML/CSS. It’s all built on three technologies: browserify, sheetify, and documentify. All of this is configured in our package.json.

Summary

Today we saw Bankai, a friendly web compiler.

Resources