How to use JavaScript 2015 (ES6) now in your Ionic app

ECMAScript 2015 has finally been approved a few days ago. The new JavaScript standard – also known as ES6 – introduces a wealth of new features, from arrow functions and classes to block-scoped variables and modules, and many more.

JavaScript 2015 is a much richer, more modern language that tackles many of the shortcomings of earlier versions and is a lot more fun to work with. Shame that we now need to wait some time before all the major browsers will support the new standard… Or do we?

Well, thankfully we don’t. We can use ES6 right now. There are a few transpilers that can take ES6 code and translate it into ES5 code that happily runs on existing browsers. In this post, I’ll show you how to configure an Ionic project to use the Babel compiler.

You can create a new project and run it in development mode using the Ionic CLI with these commands:

ionic start myapp blank
cd myapp
ionic setup sass
ionic serve

This way your JavaScript files are in the www/js folder – e.g. www/js/app.js – and any changes you make are immediately visible in the running app thanks to livereload.

What we want to do is write our JavaScript source files in ES6 somewhere else – say in a src/es6 folder – and have them automatically compiled into ES5 files in the www/js folder. This is similar to what the default project setup does with Sass files: they’re in the scss folder but are automatically converted into CSS files into www/css.

Ionic uses the Gulp build tool for this, and we can customise the gulpfile.js with our own tasks. So we can start by adding the gulp-babel and babel-preset-es2015 modules to our project. I also recommend adding gulp-plumber that helps with error handling.

npm install --save-dev gulp-babel babel-preset-es2015 gulp-plumber

Then we can add a new babel task to the gulpfile.js:

//...
var babel = require("gulp-babel");
var plumber = require("gulp-plumber");

var paths = {
  es6: ['./src/es6/*.js'],
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['babel', 'sass']);

gulp.task("babel", function () {
  return gulp.src(paths.es6)
    .pipe(plumber())
    .pipe(babel({presets: ['es2015']}))
    .pipe(gulp.dest("www/js"));
});

//...

gulp.task('watch', function() {
  gulp.watch(paths.es6, ['babel']);
  gulp.watch(paths.sass, ['sass']);
});
//...

We also modify the watch task above so that any changes in the source files will automatically trigger a compilation into the destination folder. The plumber() line is needed otherwise whenever there’s an error in a source ES6 file this will break the watch pipeline and your changes will no longer be automatically applied.

To test that this works you can copy the www/js/app.js file generated by the ionic start command to src/es6/app.js, and then run

gulp babel

and you should see that it generates a new www/js/app.js file.

However for the ionic serve command to use the new task we need to edit the ionic.project file and add it in there, along with the existing sass and watch tasks:

"gulpStartupTasks": [
  "babel",
  "sass",
  "watch"
],

At this point you can use all the new syntactic features like arrow functions and the like in src/es6 and they will automatically be translated into ES5-compatible code in www/js, with any change immediately applied when running in ionic serve.

However you will still miss other ES6 features like new methods – e.g. Array.find – and similar. For that you can add the babel-polyfill module to the project with either:

ionic add babel-polyfill

or

bower install babel-polyfill --save

(they’re basically the same thing since ionic add calls bower) and then import it into your index.html:

<script src="lib/babel-polyfill/browser-polyfill.js"></script>

And that’s it! You’re all set up to develop mobile apps in JavaScript 2015.


Self-plug: want to learn more about Ionic? Check out my Ionic by Example course!

15 thoughts on “How to use JavaScript 2015 (ES6) now in your Ionic app

  1. fuzzilein says:

    Very nice 🙂
    It would be great if you could upload an example ionic project written in ecma script 6 to show how to create and structure controllers etc.

    Like

  2. peterbengtsson says:

    Note: babel doesn’t convert ES6 to ES5 code by default. You need a preset. I *think* older versions of babel (and babel-cli) used to do that.

    When I follow the steps above my www/js/controller.js still has es6 code in it.

    Can you add a note about that? In particular you can follow the first steps of: http://macr.ae/article/gulp-and-babel.html

    Like

    • mirkonasato says:

      Thanks for reporting this. It definitely used to convert es6 to es5 by default when I wrote this post. (In fact, Babel was even called 6to5 initially.)

      Edit: added the es2015 preset.

      Like

    • mirkonasato says:

      Did this

      npm install –save-dev gulp-babel babel-preset-es2015 gulp-plumber

      not install the es2015 preset for you? I don’t think you need the react preset unless you’re using React.

      Like

      • Orby says:

        I’m sure you’re right.

        I found that using Ionic V2 beta already does all this for you, and I’ve migrated to that. Angular 2 is much nicer to work with also. I’d recommend people check out ionic V2 instead.

        Like

  3. Santhosh Kumar says:

    But what is ‘ionic.project’ file. I didn’t find anywhere. Do we need to add that code in gulpfile.js itself?

    Like

    • mirkonasato says:

      If you create the project with “ionic start my-app” then the project folder should contain a file named “ionic.project”.

      Like

  4. Santhosh Kumar says:

    For the latest releases of ionic, we have to create “ionic.config.json”.Then we have to place gulpstarttask inside that.. I got error like “WARN: ionic.project has been renamed to ionic.config.json, please rename it.” . Once I renamed it, it started working for me.

    Like

  5. S KRISHNAN says:

    I started with a ionic (1) blank starter project followed the steps. I’m trying to use Redux.

    When I do ionic serve, I get,

    “ReferenceError: Can’t find variable: require”

    from generated .js file which has,

    var _redux = require(‘redux’);

    Not sure how to resolve this. Any help would be greatly appreciated.

    Thank you.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s