Use modern JavaScript in your Tabris.js App

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

4 Comments
  • Colin
    Posted at 05:22, 2016-04-23

    Hey there! Totally unrelated to this post, but I couldn’t find any other way to contact you.

    Just letting you know that I’ve ported your minimal-json project to UnrealScript for a game called Darkest Hour: Europe ’44-’45 (https://github.com/DarklightGames/DarkestHour/blob/squads/UCore/Classes/JSONParser.uc) Just thought you might get a kick of out it. 🙂

  • Cam
    Posted at 01:47, 2017-01-23

    Great article.

    I really like the Yeoman generator. So I did a minor PR to add validation to the App ID (some, like myself may get confused about what to answer when filling this out).

    All my JS coding in the last 6 months or more is ES6, So this was a great article to come across.

    But it would be great to have an ‘auto transplie/build’ so that as you work, you don’t need the extra step of running build before testing again.

    So I used npm-watch to do this.

    See: https://github.com/eclipsesource/generator-tabris-js/issues/10 for the solution

    I’m happy to add this via a PR, if people are happy with this as a solution

  • Ralf Sternberg
    Posted at 12:05, 2017-01-23

    Thanks Cam,

    I’m currently looking into how we can get Github PRs through our code review system. I’ll follow up with you on Github.

    As for npm-watch, I’m not sure how that scales for larger projects, where the build takes longer. A selective watch mode, that only re-compiles the parts that have changed, might be faster. Unfortunately, I found Babel’s watch mode to be buggy at times.
    However, your solution is simple and it’s a good start. Keep it coming!

    BTW, we also plan to integrate this generator in the CLI that will be published for Tabris.js 2.0.