Experimenting with EcmaScript 2015

Experimenting with EcmaScript 2015

JavaScript comes back from far away. Originally, it was only a source of incompatibilities and a nightmare for web designers. Having to code a version for IE and one for Netscape on the same web site was commonplace. Fortunately, the JavaScript language has evolved amazingly to become the ubiquitous companion of HTML5 on almost all internet sites on the planet. With the latest version of the language, adopted as a new standard this past Summer, new possibilities came into being. They deserve to be known and exploited.


Distinct versions


Invented in 1996 at Netscape's, JavaScript was reasonably standardized in 2000 only, since version 1.5, under the name of EcmaScript revision 3 (ES3). For the next 15 years, almost nothing new was really standardized and it's the browser editors which helped the language progress in their own way, fortunately in a manner a little less disorganized than before 2000.

The language variant called node.js appeared around 2010, enabling the use of JavaScript outside of browsers. The engine and the language constructs are the same, but the class library is different, which makes porting from one environment to another more complex.

The new EcmaScript revision 6 standard is officially called EcmaScript 2015 and it's the subject of today's post. It is not yet fully implemented in all the browsers, but there are tools enabling us to use it already.

What's new?


Let's see what can be of interest in this new version, in particular to use Yoctopuce modules.

Concurrency control


Each programming language must provide a solution to handle concurrency between different tasks running in parallel. JavaScript offers a rather peculiar model, consisting in using a single thread and giving control from one task to another through callbacks. The system is purely non-preemptive, i.e. a task can only gain control when no other task is running and when an asynchronous operation ends. It's a very efficient technique, but also highly inconvenient because it requires each task to give back control all the time to allow the other tasks to progress.

EcmaScript 2015 provides tools which allow tasks to give back control and to take it up later from the same location, which wasn't available previously. It's very interesting for us, because using blocking requests with our sensors could raise issues in some cases.

Classes and inheritance


EcmaScript 3 used a rather primitive object model based on structures containing functions and prototypes. The 2015 version adds a true syntax to declare classes, introduces inheritance, and corrects the issue with this, which didn't always behave as expected in functions defined within an object.

Library


Several classes introduced in the past few years by the browsers have been standardized. This is of particular interest for us to manage binary objects (byte arrays) for which there was no standard solution.


An example


We are currently preparing a new library for EcmaScript, which you'll be able to use with web browsers as well as with Node.JS. To illustrate its use, here is a classic example to list connected Yoctopuce modules. First version, under Node.JS:

import { YAPI, YFunction, YModule, YSensor, YErrorMsg } from 'lib/yocto_api';

async function startDemo()
{
    let errmsg = new YErrorMsg();
    await YAPI.DisableExceptions();
    // Setup the API to use the VirtualHub on local machine
    if(await YAPI.RegisterHub('http://127.0.0.1:4444/',errmsg) != YAPI.SUCCESS) {
        console.log('Cannot contact VirtualHub on 127.0.0.1');
    }
    refresh();
}

async function refresh()
{
    let errmsg = new YErrorMsg();
    await YAPI.UpdateDeviceList(errmsg);

    let module = YModule.FirstModule();
    while(module) {
        let line = await module.get_serialNumber();
        line += '(' + (await module.get_productName()) + ')';
        console.log(line);
        module = module.nextModule();
    }
    setTimeout(refresh, 500);
}

startDemo();



If you know our API, you notice that this looks like any "normal" language, the only difference being the keywords async and await, used to manage concurrency. It's much more readable than the cascade of callbacks that we should have used otherwise...

Note that async and await are not strictly part of the EcmaScript 2015 standard, they are part of the next version, in the making. But as all EcmaScript 2015 tools already allow their use, we take this opportunity given the interest they have for us.

Here is the same thing, for an HTML interface designed for a browser. Here is first the content of inventory.js:

import { YAPI, YFunction, YModule, YSensor, YErrorMsg } from 'lib/yocto_api';

async function startDemo()
{
    let errmsg = new YErrorMsg();
    await YAPI.DisableExceptions();
    // Setup the API to use the VirtualHub on local machine
    if(await YAPI.RegisterHub('http://127.0.0.1:4444/', errmsg) != YAPI.SUCCESS) {
        alert('Cannot contact VirtualHub on 127.0.0.1: '+errmsg.msg);
    }
    refresh();
}

async function refresh()
{
    let errmsg = new YErrorMsg();
    await YAPI.UpdateDeviceList(errmsg);

    let html = '';
    let module = YModule.FirstModule();
    while(module) {
        html += await module.get_serialNumber();
        html += '(' + (await module.get_productName()) + ')\n';
        module = module.nextModule();
    }
    document.getElementById('list').innerHTML = html;
    setTimeout(refresh, 500);
}

startDemo();


And the HTML code that goes with it:

<!DOCTYPE html>
<html>
<head>
  <title>Modules inventory</title>
  <script src='../../jspm_packages/system.js'></script>
  <script src='../../config.js'></script>
  <script>
    System.import('example_html/Doc-Inventory/inventory');
  </script>
</head>
<body>
  <h1>Device list</h1>
  <span id='list'></span>
</body>
</html>


Including system.js and config.js is used to load in the browser the ES6 module manager (called SystemJS). When you switch the code to production, you can automatically generate a unique JavaScript file replacing all the independent includes by a single call, like this:

<!DOCTYPE html>
<html>
<head>
  <title>Modules inventory</title>
  <script src='inventory-sfx.js'></script>
</head>
<body>
  <h1>Device list</h1>
  <span id='list'></span>
</body>
</html>



Using EcmaScript 2015 in... 2015


Browsers are not yet fully ready for this new version of EcmaScript. But given its great interest, tools have been developed to allow its use as of today. So we take:

  • a transpiler, transforming EcmaScript 2015 code into EcmaScript 3code
  • a few shims, which are the missing library chunks
  • a module manager to manage loading and dependencies


After a long study of the JavaScript tool jungle, we opted for Babel and jspm, which are perfectly integrated and very complete.

We use the WebStorm editor, able to perform a syntactic and semantic check on the fly for EcmaScript 2015. It's worth its price.

Here are step by step instructions to install these tools:

Installation

Start by installing Node.Js for your system, because you'll need it to install jspm. It's very easy, under Windows you only have to run the installer and that's it. Make sure to install it fully, including npm, and add it to the system path.

Now, you must install jspm on the machine. You can do this very easily with an npm command:

npm install jspm -g



Then, you can prepare npm and jspm to work with our EcmaScript Yoctopuce library. To do so, go to the library root directory and run:

npm install
jspm install



Running the library examples

To transpile and run with Node.JS one of the examples, you can simply use the jspm run command:

jspm run example_node/Doc-Inventory/inventory.js



For HTML examples, it's even simpler: you only have to open the HTML file with a browser, as it is the SystemJS module manager which loads and transpiles the code on the fly.

To avoid transpiling the library each time you run the code, because it takes a few seconds, you can ask jspm to pre-build a bundle with the translation of all the classes and all the shims needed to run these classes. Here is how to proceed:

jspm bundle lib/yocto_api bundles/yocto_api.js --inject



The module manager is then able to automatically intercept all the references to the yocto_api module and to use the pre-transpiled bundle instead.

Finally, to make a monolithic compressed file with all the dependencies of a project, as said above, you use the following command:

jspm bundle-sfx --minify example_html/Doc-Inventory/inventory inventory-sfx.js



Availability


We still need to test this new library, convert all of the examples, and adapt the documentation before we can publish it. So you'll need to wait a few more weeks to obtain an official version. But if you are interested by beta-testing, or simply to give us your opinion on the choices we made, don't hesitate to contact us by mail!

Add a comment No comment yet Back to blog












Yoctopuce, get your stuff connected.