ECMAScript 6 today with BabelJS

FrontEnd Reading Time: 5 min.

  • views1319
  • 0comments
Share

In recent years, we can observe important changes in the process how the web applications are created.  About six years ago, most of the web applications were based on the robust backend, where most of the operations were focused, and the front end consisted only with simple HTML, CSS, and eventually few JS scripts. Today that is no longer true. Together with the increased needs of applications that deliver a better user experience, large parts of applications have been moved from the back end to the front end, where JavaScript plays the key role.

Why JavaScript?

Because JS is the most important client-side language. Currently, there does not exist any other programming language that can better manipulate documents and browser windows. This trend has caused JavaScript to relive its glory days. Almost each day, we can find new plugins, libraries, or frameworks like AngularJS, ReactJS, or MeteorJS, of which the primary purpose is facilitating and accelerating the process of writing user-side code in JavaScript. This and more things significantly increase the speed of development of the ECMAscript standard, of which JavaScript is the most popular implementation. In June 2015, the latest version of this standard was published, officially called ES2015, which introduced a lot new changes in comparison to the previous release (ES5.1). Major changes are e.g. addition of new syntax for writing complex applications, including classes and modules, but defining them semantically in the same terms as ECMAScript 5 strict mode. Unfortunately, at this moment most of the users still use web browsers which do not support ES2015, and thus we natively do not have the possibility to use new features from JavaScript. BabelJS fixes this problem.

What is BabelJS?

BabelJS is a transpiler (transform + compile) tool. Thanks to such tools we can use functionality available in ES2015 in our application even if the client side currently does not support them. They convert our scripts to code which is understood by all web browsers currently used by users. To better understand the purpose of BabelJS and how it works, the best way is to show in practice.

Installation

The fastest and easiest way to install BabelJS is doing this by npm. The current version, BabelJS 6, consists of two primary packages: babel-cli and babel-core – each of them we can install independently. Babel-core contains Node API and requires hook while babel-cli includes all sets of tools which are needed to compile code from the command line. Additionally, when compared to the previous version, all functionalities are split to external modules. This results in that, in the default setting, Babel doesn’t do any transform. For that reason, we must install a suitable transformer like babel-preset-es2015, which converts code from ES2015 to ES5. We can install babel-cli in two locations, global or local inside in project. The recommended option is the local installation. Thanks to that, we can simultaneously work on many projects and use different versions of Babel in each of them.

We can install Babel by performing the following commands:

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

Configuration

Next, to work with a local installation of Babel, we must modify the file npm config. To do so, we must edit package.json and add to the script section an appropriate entry. This results in that each time we run the command npm run build, the source code located in the src directory is compiled and the output is stored in the lib directory.

{
  "name": "babel-cli-project",
  "version": "1.0.0",
  "scripts": {
     "build": "babel src --out-dir lib"
  },
  "devDependencies": {
    "babel-cli": "^6.7.7",
    "babel-preset-es2015": "^6.6.0"
  }
}

The last step is to enable the plugin in Babel. To do this, we must edit the file .babelrc and add a module name in the present position. In our case, it is es2015.

{
  "presets": ["es2015"]
}

Let’s test!

After basic configuration, we can finally check how Babel is working in practice. What we need is a sample JavaScript code which is compatible with ES2015. The code should be saved in src directory inside the project and have a *js extension.

let variable_a = 'Hello World';
let variable_b = `Variable A has value: ${variable_b}!`;

Next, we run npm run build command and… voila! If we haven’t made any mistake, we should find in lib directory the same file but containing code converted into ES5 standard.

'use strict';

var variable_a = 'Hello World';
var variable_b = 'Variable A has value: ' + variable_b + '!';

The converting process itself is very complicated and describing how it works is beyond the scope of this article. However, what is important is that before Babel starts to compile, one first has to check the syntax of the code. Thanks to that we can detect any syntax bugs in our code on compiler level instead of in the web browser. We can also integrate BabelJS with more sophisticated tools for static code analysis, for example Flow.

Summary

BabelJS is a great tool which slowly becomes a standard in the development workflow of JavaScript world. If you think that you can wait until new JS functionality becomes natively supported in all the most popular web browsers, you will be left behind. It takes a lot of time before all browsers will fully support the new standard. We will need transpilers like Babel – new versions of ECMAScriptu will be published every year. This means that new standards will be released more often than a single Browser platform.

 

Tagged with:

Tags: , ,