Creating Monaca Applications With ES6

Image for post
Image for post

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.

Image for post
Image for post

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:

Next, we will install some required libraries:

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.

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:

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.

Image for post
Image for post

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

Image for post
Image for post

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.

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store