Creating Monaca Applications With ES6

As many of you have probably already noticed, ECMAScript5 certainly lacks some pretty basic language features required during the development process. As a result, JavaScript alternative languages like CoffeeScript or TypeScript are being preferred by many developers as they both provide syntactic sugar on top of ES5.

To solve this problem, ECMAScript6 (ES6) brings a huge improvement over ES5, tackling many of the other core languages. As you may remember, we have already discussed how we can use ES6 using Babel in this blog post, today we will go deeper by creating a Monaca application with ES6.

Creating A Project

As always, we will first create a Monaca project. In this tutorial, we will simply use Hello World App. Once the project has been created, your folder directory should look like this.

Installing Gulp

Gulp is a JavaScript task runner designed to automate tasks, that’s why we are going to use it in order to automate our transpiling work. When working with Babel, Gulp is a great tool to include in your workflow: we suggest you to give it a try!

Let’s install Gulp and some other libraries. To start, run the following command:

npm init

Next, we will install some required libraries:

npm install --save-dev gulp gulp-babel \ 
babel-preset-es2015 gulp-sourcemaps \ 
gulp-concat

This is the list of plugins we are installing:

• gulp : JavaScript task runner for Node.js
• gulp-babel : Gulp plugin for Babel
• babel-preset-es2015 : Babel preset for all es2015 plugins
• gulp-sourcemaps : ECMAScript6 Source map support for Gulp.js
• gulp-concat : Concatenates transpiled JavaScript files

Creating a Gulp tasks

Since we are focusing on ECMAScript6 in this tutorial, we will also be writing a Gulpfile in ES6. In order to that, we first need to include the following content in package.json to enable es2015 preset.

"babel": { 
    "presets": ["es2015"] 
}

Then, we need to instruct Gulp to use Babel by renaming the gulpfile.js to gulpfile.babel.js. We are now able to use ES6 in our gulpfile!

As you can notice, we have used ES6 import and arrow functions.

Creating JavaScript files

Let’s play around with the new ES6 syntax. Here is our code snippet with arrow functions, classes, and template strings in www/src folder:

In our gulpfile, we will instruct Gulp to concatenate and output all our ES6 JavaScript files into a single file. To make this happen, we need to execute our Gulp task and all.js will be generated under www/js/ directory.

The file is now ready to be loaded into our application:

<script src="js/all.js"></script>

Conclusion

We have learned how to setup our first Monaca hybrid mobile app with ES6 and used Gulp to automate our tasks. Taking a look at the application, you’ll notice that our transpiled JavaScript is successfully displayed in the Console.

We’ve also included Source Maps into our project in order to have the possibility to add breakpoints for debugging.

The newest version of ECMAScript delivers a simpler and friendlier syntax while Babel allows us to write ES6+ features ready to work across different browsers on the client side. It is certainly a great tool and will for sure help you to speed up your development while working with Monaca applications with local tools like Monaca Localkit and CLI.