Use modern JavaScript in your Tabris.js App

The latest version of JavaScript (ES2015, or commonly called ES6) is packed with modern features, including classes, lambda expressions (“arrow functions”), block scoping, template strings, and much more. Using a transpiler like Babel, you can use these features in your Tabris.js app today.

Quick Start

The fastest way to a working ES6 project setup is to generate it. Just install Yeoman, a popular project generator for JavaScript, and the generator for Tabris.js once on your machine …

npm install -g yo generator-tabris-js

… and then, in a new project directory, type:

yo tabris-js

After asking for a project name and version, the generator offers to create either a plain Tabris.js app or one that uses ES6. Choose ES6 and you’ll have a working app up and running in less than a minute.

Benefits of ES6

Now let’s look into some examples how modern JavaScript helps to improve Tabris.js apps. I particularly like how module imports allow us to get rid of all the tabris prefixes in our code. By explicitly importing the widgets being used, we can refer to them without the namespace prefix:

import {TextView} from 'tabris'

new TextView()

Classes can help to improve our data models, but they also allow us to extend Tabris widgets:

class AboutPage extends Page {
   ...
}

The beauty of arrow functions is that they maintain the context of the surrounding function. Hence the this keyword in a callback still points to the same object as it does outside. No “.bind(this)” or “that = this” kind of hacks are required anymore to preserve the surrounding context:

this._closeButton.on('tap', () => {
  this.close();
});

Manual Setup

Now let’s look into the setup in some more detail. First we need a transpiler that translates our ES6 code to ES5.1 code. That’s because the JS engines used by the Tabris.js platforms don’t support all of these features yet. Babel is a popular choice. It uses plugins that translate different language features, so we can pick only those we actually need. We install babel and a preset that contains all modules for ES2015 as devDependencies in our project:

npm install --save-dev babel-cli babel-preset-es2015

Babel looks for a configuation file named .babelrc with a list of plugins or presets. We can start with a preset that includes the full set of plugins for ES2015:

{ "presets": ["es2015"] }

On Android, where Tabris.js 1.7 uses a recent version of V8 that supports almost all ES6 features, we’d only need a single plugin to transpile the ES6 module import syntax:

{
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

Please note that Babel translates only language features. If you make use of new library features, such as String or Object methods that are new in ES6, you need to include a polyfill.

Usually, you’d tell babel to translate everything in your source directory and write the output to a different place like build/ or dist/. Remember to let the main attribute in your package.json point to the transpiled code. Check out Babel’s CLI options here. It’s a good idea to keep the command in an npm script in your package.json:

"scripts": {
  "build": "rm -rf dist/ && babel --out-dir dist/ src/"
}

You can then run the script on the command line by calling

npm run build

Tabris.js Build service

If your script is called build, it will also be executed by the build service on tabrisjs.com. For platform-specific tasks, you can also add a platform suffix like build:ios or build:android. The build service will then only execute the script for the respective platform. Remember to include all required tools in your devDependencies.

Of course, you can use these scripts for other tasks as well. For example, if you like to write your App in TypeScript, run the typescript compiler, or if you like to obfuscate your JS code, run uglify.

ES6 logo by flickr.com/photos/appleboy/16407404782 (CC BY 2.0)