Introduction

In 2015 we had a major announcement from the Ecma International. It has approved the ECMA-262 6th edition language standard. Making a long story short it is the Language Specification of ECMAScript 6 (ES6), which is also known as ECMAScript 2015. In this article we will stick with the ECMAScript 6 naming convention.

Also we will present you the main features of the new language specification and give you insights how to use it with Tizen together with the Babel compiler. We have also attached a sample application written in ECMAScript 6 (babelDemo.zip) and compiled to plain JavaScript. Arrows have the same lexical this together with their surrounding code. This makes working with them very comfortable.

New features

At last, all JavaScript programmers, including Tizen Web developers, got some exciting features with the new language standard. First and the most important is the introduction of classes. Now we can structure the code like in Java or other C#. It is easier to build scalable and maintainable code much easier with the usage of the new standard. Also arrows showed up which are a function shorthand known mostly from the C# language. We have also let and const, together with block-scoped binding constructs. New iterators like the for .. of loop, modules, generators, promises, Reflect API and many more.

As for now the Tizen webkit does not support ECMAScript 6. Also many browsers do not fully support it either. You can see who supports the standard and in what extent here. But as you see, there are tons of new things in the latest JavaScript standard and it is gaining in popularity very fast (fig. 1). The new standard and its features will make your coding faster and easier. The scope of this article does not cover the learning of the new standard itself, so we recommend you to familiarize yourself with the latest standard in depth here.

But we will show you how to use the new language standard, to create Tizen Web applications and provide an example of code before and after compilation. For this purpose we will need to install the Babel compiler.

Figure 1 – ECMAScript 6 popularity is rapidly increasing in 2015. (Google Trends)

Babel setup

First of all you need to have npm on your computer. If you do not have it, please install it. The second step is to install Babel. You can either install it with a –g parameter as a global used node module or with the –save-dev parameter which will install it as a local project, developer dependency. We presume that before installing Babel you have created a node project in your project directory using npm init or with any other tool. If you haven’t done that yet, please do it now. Below we show you how to install Babel as a global node module on Ubuntu.

npm install –g babel-core

The next step requires from you to install transformations. The best preset for handling ECMAScript 2015 compilation is the ES2015 Preset. You can install it by typing the following code in Ubuntu.

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

You also need a Babel configuration file in the root of your project directory. This file is called .babelrc. And you can create it in the console executing the code below in your projects root directory. The code adds the ECMAScript 6 (es2015) preset to the configuration.

echo '{ "presets": ["es2015"] }' > .babelrc

Having done that, you are ready to go with using Babel to create projects written with ECMAScript 6.

Using Babel

Babel is very easy to use. You can compile your ECMAScript 6 code to JavaScript in no time using it together with node.js. You have a variety of options. You can use a one-time compile command or you can set up a watcher. Finally you can write standard JavaScript and inside of it write ECMAScript 6 code. And then by utilizing some Babel commands compile it. So as you see, there are many options how to use your Babel compiler in your workflow.

But before showing how to compile with Babel, you can see below how we want our project structure to look like after the compilation. 

/home/babelquick/
├── node_modules
├── out.js
├── package.json
└── test.js

Our input file with ECMAScript 6 code is called test.js. The output file is called out.js and will be automatically generated by Babel. The node_modules directory and the package.json file are created while initializing a new project with npm init and installing the dependencies.

So, if you want to compile your code one time using Babel and see the result in your console just type in the following line of code.

babel test.js

Of course, this way of using Babel can be utilized just to quickly check the output of our compilation process. We would like our compilation product to be saved to a file. You can achieve that by using the –o flag and afterwards adding the file name you would like the compiled code to be saved to. In our case the filename is out.js.

babel test.js –o out.js

But in real life, big projects you don’t want to every time compile by hand the code you write. This takes time and you can make mistakes. The best way to handle this is to set a watcher to a file or a list of files. Then, every time we save a file or files which are watched, the compiler will automatically detect the changes and recompile them. So how can we achieve such behavior in Babel? The answer is below.

This will set a watcher to a single test.js file and output the compiled code to the out.js file every time the source file is changed.

babel –w test.js –o out.js

And this one for example will set a watcher to all the files and output the compiled files to the output folder, whenever changes in the files inside will occur.

babel –w test.js test2.js test3.js –d output

As said earlier in the article you can also compile parts of code written in ECMAScript 6 inside JavaScript files.

Just copy the code below to a new JavaScript file named for example test.js.

var babel = require("babel-core"); // we need to require Babel

var result = babel.transformFile("mycode.js", function (err, result) {
    if (result.code !== null){
        console.log(result.code); // <-- let's print out the code we got after compilation of the mycode.js file
    } else {
        console.log(err);
    } 

});

Now you should create a mycode.js file and put some ECMAScript 6 code inside, like the one below with a for .. of loop.

var myObject = {"name":"Kamil", "age":33, "city":"Warsaw", "country":"PL", "isAdeveloper":true };

    for (var key of Object.keys(myObject)) {
      console.log("object key is " + key + " and value = " + myObject[key]);
    }

After that you can run the test.js file on a babel-node with the es2015 preset by typing in the command line the following command.

babel-node test.js --presets es2015

Or you can just preview and type babel mycode.js to see the output in the console immediately. It should be similar to the code below.

"use strict";

var myObject = {"name":"Kamil", "age":33, "city":"Warsaw", "country":"PL", "isAdeveloper":true };

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
  for (var _iterator = Object.keys(myObject)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
    var key = _step.value;

    console.log("object key is " + key + " and value = " + myObject[key]);
  }
} catch (err) {
  _didIteratorError = true;
  _iteratorError = err;
} finally {
  try {
    if (!_iteratorNormalCompletion && _iterator.return) {
      _iterator.return();
    }
  } finally {
    if (_didIteratorError) {
      throw _iteratorError;
    }
  }
}

As you see the for .. of loop which in ECMAScript 6 takes only 3 lines, after compilation is a big chunk of code. That directly shows how we can save time and effort while writing ECMAScript 6 code in our applications. Of course not all of ECMAScript 6 code compiles to such big amount lines of code. But all in all the ES6 syntax in many cases is shorter than its predecessors’.  

Summary

We hope that this article helped you understand the basics of using ECMAScript 6, together with Babel in Tizen Web Development. You can create new Tizen Web applications easier and faster using the Babel compiler and the new JavaScript standard.

For further information regarding ECMAScript 6 we encourage you to visit a website showing in depth the new features of ES6 here. Also if you want to read more about configuration of Babel and ways you can handle your ES6 code then please visit the official Babel website here.

Also please remember that after unpacking babelDemo.zip the first thing you need to do is to go to the babelDemo directory and run the npm install command in order to install the developer dependencies for the project. Then you can play around with the provided example code.