Writing viewer extensions in ES6

By Philippe Leefsma

ECMAScript 6 (a.k.a. ECMAScript 2015) is the next standard for JavaScript as it has been recently approved by the ECMA organisation. While its features get more and more support in modern browsers and runtimes (see the Kangax compatibility table), to deploy your ES6 code you still need to compile - more accurately transpile - it to ES5.1, the current version of JavaScript.

As far as transpilers are concerned, there are two names that pop up on top the pile: Babel and Traceur from Google. However Babel seems to be the one getting the most focus from the web community. 

Basically you don't use a transpiler manually but you invoke it through your web development tools as you build your website from your source. Once configured, which is a pretty easy thing to do, you can start writing ES6 code and leverage its features without the need to worry about browser compatibility. Here is neat a blog post that takes you through the steps in order to use ES6 code in your workflow using Webpack: Writing client-side ES6 with webpack. And here is the github page of the babel-loader that the post refers to.

If you are using a modern web IDE, there are good chances that it also supports ES6 syntax and can integrate tools to transpile your code on the fly, this is the case of WebStorm and here are more details on how to set it up.

As far as I'm concerned, I'm using the babel-loader + webpack as part of the build process, but I also added a feature that allows my server logic to transpile script files or code on the fly using the babel API. Here is how my REST API looks like to give you an idea, pretty easy:

 1 /////////////////////////////////////////////////////////////////////
 2 // transpiles extensions script files
 3 //
 4 /////////////////////////////////////////////////////////////////////
 5 router.get('/transpile/:extensionId/:fileId',
 6   function (req, res) {
 7 
 8     var filepath = path.join(__dirname,
 9       '../../www/uploads/extensions/' +
10       req.params.extensionId + '/' +
11       req.params.fileId);
12 
13     var options = {};
14 
15     //result; // => { code, map, ast }
16     babel.transformFile(filepath,
17       options, function (err, result) {
18 
19         if (err) {
20           console.log(err);
21           res.status(404);
22         }
23         else {
24 
25           res.send(result.code);
26         }
27     });
28   });
29 
30 /////////////////////////////////////////////////////////////////////
31 // transpiles code on the fly
32 //
33 /////////////////////////////////////////////////////////////////////
34 router.post('/transpile',
35   function (req, res) {
36 
37     var payload = req.body;
38 
39     var options = payload.options || {};
40 
41     // => { code, map, ast }
42     var result = babel.transform(
43       payload.code,
44       options);
45 
46     var response = {
47       code: result.code
48     }
49 
50     res.send(response);
51   });

One of the nice feature of ES6 is the ability to use the class keyword with which object oriented programmers are familiar with and "extends" to derive your class from a base class. It's obviously interesting to take a look at how a viewer extension may look like when written using a class, so here is a basic extension that will show an alert message and change the background:

Finally, if you are curious, you can cut and paste that ES6 code into the babel online tool to see how this code gets transpiled...