ECMAScript 6

Support for ECMAScript 6 is new in Evothings Studio 2.1.0, currently available as an early release for testers and enthusiasts. Download Evothings Studio 2.1.0-alpha.

Next generation of JavaScript

ECMAScript 6, also called ECMAScript 2015 or simply ES6, is the next generation JavaScript.

To learn what is new in ES6, read more here:

• Overview of new features in ES6
• Overview and comparison between ES6 and ES5 (ES5 is the currently widely supported JavaScript standard).
• If you want to take a deep dive into the language, have a look at the ECMAScript 2015 language specification.

Support for ES6 in Evothings Studio

Currently, the Web View components used in hybrid apps (such as Cordova apps) do not support ES6 out of the box. The solution is to translate ES6 to ES5. In Evothings Studio, this is done when clicking the Run button (this is new in Evothings Studio 2.1.0).

When clicking Run in the Workbench, the app is built and ECMAScript 6 code is translated to regular JavaScript code (ECMAScript 5).

Supported language features

To compile ES6 to ES5 the Babel compiler is used. Visit the Babel documentation for supported language features.

Note that modules are not supported. Include files using the HTML script tag.

Application file structure

There are two main folders in apps that use ES6. The folder app contains the source code for your app (ES6). Folder www is the output folder that contains the generated code (ES5).

Here is an overview of the file layout for an app:

my-app
  app
    index.html
    app.js (ES6)
    libs (JS libraries)
    ui (CSS and images)
  www
    index.html
    app.js (ES5)
    libs
    ui
  evothings.json
  app-icon.png

Folders app and www are identical except that .js files are translated. Folders libs and ui, are just examples, you are free to use any file layout in the app folder.

Adding a project to Evothings Workbench

When you want to add an existing project to Evothings Workbench, just drag the folder containing the evothings.json file to the Workbench windows. Or drag the evothings.json file.

This is useful if have removed the app from the Workbench window, or if you get an app from e colleague or friend.

To share the source code of your app with someone else, zip the files and add an instruction to drag the unzipped folder into the Workbench window.

ES6 is not allowed in HTML files

Note that any JavaScript code embedded in index.html, or other HTML files, is not translated to ES6! Only external .js files are translated.

Error messages

Any runtime error messages shown in the Tools window in the Workbench will refer to line numbers in the generated code in folder www! It is easy to be confused by this when debugging apps.

Any build error messages are displayed in the Workbench, when clicking Run. These refer to the ES6 files in folder app.

Settings file

Settings for the build system are in file evothings.json.

Overview of settings:

• app-dir: Application directory.
• www-dir: Build output directory.
• index-file: Main HTML file in application directory. This file will be loaded in Evothings Viewer when clicking Run in the Workbench.
• dont-build: Array of subdirectories in the application directory that should not be processed, these directories are copied verbatim to the output directory. This setting is optional, but is very useful when using 3:rd party libraries that should not be translated.
• app-uuid: UUID for the app.
• app-icon: App icon file name.

Sample evothings.json file:

{
  "app-dir": "app",
  "www-dir": "www",
  "index-file": "index.html",
  "dont-build": ["libs", "ui"],
  "app-uuid" :"fe860e6e-d35e-4bd0-831a-7703cc2f8d01",
  "app-icon" :"app-icon.png"
}

Use ES6 with Cordova apps

When building a native app with Cordova, you can use ES6 while developing the app in Evothings Workbench and Evothings Viewer. When ready to deploy the app, build it with Cordova.

The file structure of a Cordova app matches the file structure of the Evothings project, so you can have the files for both Cordova and Evothings in one folder.

Here is sample layout for an Evothings/Cordova app:

my-app
  app (application source code)
  www (generated code, Cordova application folder)
  hooks (Cordova hooks)
  plugins (Cordova plugins)
  platform (Cordova native builds)
  config.xml (Cordova config file)
  evothings.json (Evothings config file)
  app-icon.png (Evothings application icon)

The compatible file layout makes it easy to develop Cordova apps using Evothings Studio.

Get started in 5 minutes

Download Evothings Studio 2.1.0-alpha and get started within minutes. It is fun and easy!

Ask questions and discuss IoT app development on Gitter: gitter.im/evothings/evothings