Introduction to ECMAScript 6 for Ionic & Angular Developers

This article was originally written quite a while ago, when the transition from AngularJS to Angular was just around the corner as well as Ionic 2. Quite some time has passed since then and the modern versions of both Angular and Ionic are used heavily today.

At that time "modern" JavaScript using ECMAScript 6 was not as commonly well known or as used as it is today. However, having an understanding of what ECMAScript 6 is and the new features it brings to JavaScript is still relevant today and will help you build applications.

I have updated and rewritten parts of this article to be more relevant to the current versions of Ionic and Angular.

When Angular 2 was originally released, it involved basically a complete rewrite of the previous iteration of the popular framework. AngularJS (or Angular 1.x) was the backbone of Ionic, so big changes to Angular meant big changes to Ionic. Ionic no longer strictly requires Angular (although it is still a popular combination), but you can imagine at the time this was a big transition for both Ionic and Angular developers - so what was the motivation for this change?

The core philosophy of the Angular redesign is summed up pretty well by the following quote:

We're designing AngularJS 2 for the way the world will look when we believe folks will use it. In particular, this means targeting modern browsers and using ECMAScript 6. - angularjs.blogspot.com

Angular was rewritten for ECMAScript 6, which isn't actually fully supported by browsers yet. Until then, we use TypeScript to compile ES6 code into ES5 code. This might seem a bit redundant (why write ES6 code when it's going to be compiled into ES5 anyway?) but it allows us to make use of all the fancy new ES6 features now and will future proof the framework.

All this talk of ES5, ES6, TypeScript and blah blah blah, brings me to the point of this post: what the heck is ECMAScript 6?.

What is ECMAScript?

Before we talk about ECMAScript 6, we should probably talk about what ECMAScript even is. There's quite a bit of history involved, but for the most part: ECMAScript is a standard, JavaScript is an implementation of that standard. ECMAScript defines the standard and browsers implement it. In a similar way, HTML specifications (most recently HTML5) are defined by the organising body and are implemented by the browser vendors. Different browsers implement specifications in different ways, and there's varying amounts of support for different features.

What is ECMAScript 6?

The HTML5 specification was a bit of a game changer, and in a similar way so is the ECMAScript 6 specification. It will bring about some pretty drastic changes to the way we code with JavaScript and in general will make JavaScript a much more mature language that is capable of more easily creating large and complex applications (which JavaScript was never really originally inteded to do).

Let's look at some of the major additions in ES6 and some examples from es6-features.org.

Classes

We can already implement object oriented code in JavaScript by using functions and prototypes, but now ES6 will provide support for class definitions and all the associated goodies like inheritance by default.

With ES6 we could define a class like this:

class Shape {
  constructor(id, x, y) {
    this.id = id;
    this.move(x, y);
  }

  move(x, y) {
    this.x = x;
    this.y = y;
  }
}

rather than the way we would do it currently:

var Shape = function (id, x, y) {
  this.id = id;
  this.move(x, y);
};

Shape.prototype.move = function (x, y) {
  this.x = x;
  this.y = y;
};

Modules

Modules allow you to modularise your code into packages that can be imported anywhere you need in your application, this is a concept that is heavily used in Ionic and Angular applications.

For example in ES6 we could do the following:

//  lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

//  someApp.js
import * as math from 'lib/math';
console.log('2π = ' + math.sum(math.pi, math.pi));

//  otherApp.js
import { sum, pi } from 'lib/math';
console.log('2π = ' + sum(pi, pi));

which would now be used in place of doing something like this:

//  lib/math.js
LibMath = {};
LibMath.sum = function (x, y) {
  return x + y;
};
LibMath.pi = 3.141593;

//  someApp.js
var math = LibMath;
console.log('2π = ' + math.sum(math.pi, math.pi));

//  otherApp.js
var sum = LibMath.sum,
  pi = LibMath.pi;
console.log('2π = ' + sum(pi, pi));

Promises

Even if some of the concepts we have covered so far are new to you, you might already be somewhat familiar with promises (a lot of JavaScript libraries implement promises) and why they are easier to use than using callback functions. Promises provide a much nicer format for grabbing asynchronous data (e.g. data you need to wait for when you fetch something from a server or device), the ES5 method of callbacks can lead to ugly nested code that can become a nightmare to maintain.

ES6 adds native support for promises, which look like this:

function someAsyncMethod(message) {
  return new Promise((resolve, reject) => {
    // Wait for a few seconds and then resolve
    setTimeout(() => {
      resolve(message);
    }, 3000);
  });
}

someAsyncMethod('My delayed message').then((message) => {
  console.log(message);
});

Block Scoping

If we define a standard variable in ES5 JavaScript it is available anywhere within the function that we defined it in. The new block scoping features in ES6 allows us to use the new let keyword to define a variable only within a single block of code like this:

for (let i = 0; i < a.length; i++) {
  let x = a[i];
  //etc.
}

The new const keyword can also be used for single assignments, and if you were to try to override that const value it would throw an error.

There are still a bunch of new stuff in ES6 that I haven't mentioned yet like arrow functions, iterators, generators and much more, so for a more complete summary you should take a look at this summary by Luke Hoban.

TypeScript

Another concept we should cover off on is TypeScript which is used in Angular. TypeScript's own website defines it as:

…a typed superset of JavaScript that compiles to plain JavaScript.

In short, TypeScript adds typing, classes and interfaces to JavaScript.

Using TypeScript allows you to program in the way you would for stricter, object oriented languages like Java or C#. As we discussed before, JavaScript wasn't originally intended to be used for designing complex applications so the language wasn't designed that way. It certainly is possible already to use JavaScript in an object oriented manner by using functions as classes as we also discussed before but it's not quite as clean as it could be.

But wait… I mentioned before that ES6 already adds the ability to create classes and what not, so why do we still need TypeScript? Aside from the fact that TypeScript helps us compile our code, the key feature of TypeScript is that it allows us to use types (hence the name).

TypeScript provides the ability to use static typing in JavaScript (which means it is evaluated at compile time, opposed to dynamic typing which is evaluated at run time). Using typing in TypeScript will look a little like this:

function add(x: number, y: number): number {
  return x + y;
}
add('a', 'b'); // compiler error

So in the example above the code won't compile because we're trying to supply characters to a function that expects only numbers.

Conclusion

If you are used to "traditional" ES5 style JavaScript, then using these modern concepts in Ionic and Angular will be somewhat of a transition. If you are new to JavaScript completely, then hopefully ES6 will actually just make things a bit simpler and easier.

Either way, the new ES6 features and TypeScript help a great deal in building modern mobile/web applications with JavaScript.