Supporting ES2015
We've already mentioned ES2015 (or EcmaScript 2015) in this chapter. Now is the moment to start using it. First, though, we need to modify our copy-code task to transpile from ES2015 to ES5, or our code will not run on any browser that doesn't support the new syntax (which is still quite a few mobile platforms).
There are several transpilers available. I prefer Babel (https://babeljs.io).
Tip
We used Babel 5.x. Although Babel 6 has recently been released, as of this writing, the demonstration app and corresponding Gulp configurations have not been updated to Babel 6.x.
There is a Gulp plugin that we can use, which makes this transpilation transform extremely simple. To do this, we need to add the following to the top of gulp/tasks/copy-code.js:
var …,
babel = require("gulp-babel"),
sourcemaps = require("gulp-sourcemaps"),
gutil = require("gulp-utils");Tip
Source maps are an important piece of the debugging puzzle. As our code will be transformed by the time it runs on our device, debugging could become a little more difficult, since the line numbers and the like don't match. Sourcemaps provide the browser with a map between your ES2015 code and the final result so that debugging is a lot easier.
Next, let's modify our projectTasks.copyCode method:
function copyCode() {
var isRelease = (settings.BUILD_MODE === "release");
return gulp.src([paths.makeFullPath(config.assets.code.src,
paths.SRC)])
.pipe(cordovaTasks.performSubstitutions())
.pipe(settings.BUILD_MODE === "debug" ?
sourcemaps.init() : gutil.noop())
.pipe(babel())
.pipe(concat("app.js"))
.pipe(settings.BUILD_MODE === "debug" ?
sourcemaps.write() : gutil.noop())
.pipe(gulp.dest(paths.makeFullPath(
config.assets.code.dest, paths.DEST)));
}Our task is now a little more complex; but this is only because we want to control when source maps are generated. When babel() is called, it will convert the ES2015 code to ES5 and also generate a sourcemap of the changes. This makes debugging easier, but it also increases the file size (sometimes by quite a bit). As such, when we're building in release mode, we don't want to include the sourcemaps. So, we will call gutil.noop instead, which will just do nothing.
The sourcemap functionality requires us to call sourcemaps.init prior to any Gulp plugin that might generate sourcemaps. After the plugin that creates the sourcemaps is executed, we also have to call sourcemaps.write to save the sourcemap back in the stream. We could also write the sourcemap to a separate .map file by calling sourcemaps.write("."). But you would need to be careful about cleaning up that file while creating a release build.
babel does the actual hard work of converting ES2015 code into ES5. But it does need a little help in the form of a small support library. We'll add this library to src/www/js/lib/ by copying it from the gulp-babel module:
$ cp node_modules/babel-core/browser-polyfill.js src/www/js/lib
Note
If you don't have the src/www/js/lib/directory yet, you'll need to create it before you execute the previous command.
Next, we need to edit src/www/index.html to include this script. While we're at it, let's make a few other changes:
<!DOCTYPE html>
<html>
<head>
<script src="cordova.js" type="text/javascript"></script>
<script src="./js/lib/browser-polyfill.js"
type="text/javascript"></script>
<script src="./js/app/app.js"
type="text/javascript"></script>
</head>
<body>
<p>This is static content...,
but below is dynamic content.</p>
<div id="demo"></div>
</body>
</html>Finally, let's write some ES2015 code in src/www/js/app/index.js:
function h(elType, ...children) {
let el = document.createElement(elType);
for (let child of children) {
if (typeof child !== "object") {
el.textContent = child;
} else if (child instanceof Array) {
child.forEach(el.appendChild.bind(el));
} else {
el.appendChild(child);
}
}
return el;
}
function startApp() {
document.querySelector("#demo").appendChild(
h("div",
h("ul", h("li", "Some information about this app..."),
h("li", "App name: {{{NAME}}}"),
h("li", "App version: {{{VERSION}}}")
)
)
);
}
document.addEventListener("deviceready", startApp, false);This chapter isn't about how to write the ES2015 code, so I won't bore you with all the details. We'll cover that in the next chapter. Suffice it to say, the earlier code generates a few list items when the app is run using a very simple form of DOM templating. But it does so using the … (spread) syntax for variable parameters: the for … of loop and let instead of var. Although it looks a lot like JavaScript, ES2015 is different enough that it will take some time to learn how best to use the new features.
