Every year each new proposal to ECMAScript which reaches 

 will be added to the standard.
Stage 4 basically means, that the specification text is written down and has at least two major implementations (or browsers in this case).

In the new standard, two new features have been added.

, if you want to know if a certain value is in an 

> [ 1, 2, 3, 4].includes(3)
true
> [ 1, 2, 3, 4].includes(0)
false

This makes constructs like the following a bit more readable:

if (myArray.indexOf(5) > -1) {
  // has 5
}
// or
if (myArray.indexOf(5) !== -1) {
  // has 5
}

> [ NaN ].indexOf(NaN)
-1
> [ NaN ].includes(NaN)
true

Exponentiation is commonly used in mathematics and physics and can now be expressed with the operator 

 in ECMAScript 2016. Very similar to Pythons 

Additionally we can use the assignment form too, similar to 

> 2 * 2 ** 3
16
> 2 * (2 ** 3)
16
> (2 * 2) ** 3
64

Currently, negative number literals cannot be the base of the exponentiation and will throw a syntax error.

> -5 ** 2
Uncaught SyntaxError: Unexpected token **

With ECMAScript 2016 finalized, there has already been progress on ECMAScript 2017 and several futures have already been finalized:

 both will aid you in iterating over object properties.

 will give you own enumerable object values.
Example:

> Object.values({ keyA: 'a', keyB: 'b', keyC: 'c' })
[ 'a', 'b', 'c' ]

let obj = { keyA: 'a', keyB: 'b', keyC: 'c' }
for (let value of Object.values(obj)) {
  console.log(value)
}
// logs 'a', 'b' and 'c'

> Object.entries({ keyA: 'a', keyB: 'b', keyC: 'c' })
[ [ 'keyA', 'a' ], [ 'keyB', 'b' ], [ 'keyC', 'c' ] ]

This may look rather weird but makes it very easy to iterate over an object with key and value using destructuring like this:

let obj = { keyA: 'a', keyB: 'b', keyC: 'c' }
for (let [ key, value ] of Object.entries(obj)) {
  console.log(key, value)
}
// logs 'keyA a', 'keyB b' and 'keyC c'

A very common problem is string padding, especially in command line interfaces and number formating. ECMAScript 2017 will provide two new 

 because it will recognize left-to-right and right-to-left languages and pad the string accordingly.

> '1'.padStart(5)
"    1"
> '1'.padStart(5, '0')
"00005"
> '1'.padEnd(5)
"1    "
> '1'.padEnd(5, '0')
"50000"

 will get all property descriptors of an object, very similar to 

 which gets a single property descriptor. This means, we can get all property 

 of an object and can copy these over to another object (you wouldn't be able to "get" a getter or setter property using the dot or bracket notation).

Example of making a shallow copy of an object:

let objectCopy = Object.create(
  Object.getPrototypeOf(object),
  Object.getOwnPropertyDescriptors(object)
)

That's it for now, I hope you are as excited as me about all the new ECMAScript features which make the language better and more powerful every year! :)

ECMAScript 2016 Approved

 projects, I've began to use the new upcoming JavaScript async functions. While they are not yet officially included in the standard, they were recently moved to a "Stage 3" proposal on the 

, this means they are ready to be implemented by browser vendors and can be somewhat safely used with transpilers like 

To see the exact meaning of the different stages, see the 

Include the polyfill, as async functions need 

var EmberApp = require('ember-cli/lib/broccoli/ember-app')

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    babel: {
      includePolyfill: true
    },
    // You might want to disable jshint as it does
    // not support async/await yet.
    hinting: false
  })

  return app.toTree()
}

Nothing more is required as Babel enables any JavaScript features that are 

For our example app, we're going to implement a simple login with an acceptance test. The login logic will be handled by 

 which is compatible with Ember.js 2.0 and above.

Before we do anything, we have to write an initializer, which sets the global 

. This change guaranties that async code runs with the Ember run-loop in mind.

import Ember from 'ember'

export function initialize() {
  window.Promise = Ember.RSVP.Promise
}

export default {
  name: 'promise',
  initialize
}

$ ember install simplabs/ember-simple-auth
$ ember generate acceptance-test login

Imagine a login acceptance that looks like this in plain 

import Ember from 'ember'
import $ from 'jquery'
import { module, test } from 'qunit'
import startApp from 'await-test/tests/helpers/start-app'
import { authenticateSession } from 'await-test/tests/helpers/ember-simple-auth'

module('Acceptance | Login', {
  beforeEach() {
    this.application = startApp()
  },
  afterEach() {
    Ember.run(() => this.application.destroy())
  }
})

test('visiting /protected redirects to /login', assert => {
  assert.expect(1)

  visit('/protected')

  andThen(() => {
    assert.equal(currentURL(), '/login')
  })
})

test('visiting /login works', assert => {
  assert.expect(1)

  visit('/login')

  andThen(() => {
    assert.equal(currentURL(), '/login')
  })
})

test('login fails for invalid user', assert => {
  assert.expect(2)

  visit('/login')

  andThen(() => {
    fillIn('input[type=text]',     'topaxi')
    fillIn('input[type=password]', 'notmypassword')
    click('button[type=submit]')
  })

  andThen(() => {
    assert.equal(currentURL(), '/login')
    assert.equal($('.error-message').text(), 'Invalid credentials!')
  })
})

test('login works for valid user', assert => {
  assert.expect(2)

  visit('/login')

  andThen(() => {
    fillIn('input[type=text]',     'topaxi')
    fillIn('input[type=password]', '123456')
    click('button[type=submit]')
  })

  andThen(() => {
    assert.equal(currentURL(), '/')
    assert.equal($('.logged-in-user').text(), 'topaxi')
  })
})

test('a protected route is accessible when the session is authenticated', assert => {
  assert.expect(1)

  authenticateSession(this.application)
  visit('/protected')

  andThen(() => {
    assert.equal(currentRouteName(), 'protected.index')
  })
})

With ES7 async functions, we can get rid of all these 

 function calls which wait for all unresolved Promises (this is one of the reasons we had to replace the global 

import Ember from 'ember'
import $ from 'jquery'
import { module, test } from 'qunit'
import startApp from 'await-test/tests/helpers/start-app'
import { authenticateSession } from 'await-test/tests/helpers/ember-simple-auth'

module('Acceptance | Login', {
  beforeEach() {
    this.application = startApp()
  },
  afterEach() {
    Ember.run(() => this.application.destroy())
  }
})

test('visiting /protected redirects to /login', async assert => {
  assert.expect(1)
  await visit('/protected')
  assert.equal(currentURL(), '/login')
})

test('visiting /login works', async assert => {
  assert.expect(1)
  await visit('/login')
  assert.equal(currentURL(), '/login')
})

test('login fails for invalid user', async assert => {
  assert.expect(2)

  await visit('/login')
  fillIn('input[type=text]',     'topaxi')
  fillIn('input[type=password]', 'notmypassword')
  await click('button[type=submit]')

  assert.equal(currentURL(), '/login')
  assert.equal($('.error-message').text(), 'Invalid credentials!')
})

test('login works for valid user', async assert => {
  assert.expect(2)

  await visit('/login')
  fillIn('input[type=text]',     'topaxi')
  fillIn('input[type=password]', '123456')
  await click('button[type=submit]')

  assert.equal(currentURL(), '/')
  assert.equal($('.logged-in-user').text(), 'topaxi')
})

test('a protected route is accessible when the session is authenticated', async function(assert) {
  assert.expect(1)

  authenticateSession(this.application)
  await visit('/protected')

  assert.equal(currentRouteName(), 'protected.index')
})

Now on to implementing the whole login process.

The authenticator is responsible for to login an user and restore or invalidate the session.

import Ember from 'ember'
//import ajax from 'ember-ajax'
import BaseAuthenticator from 'ember-simple-auth/authenticators/base'

export default BaseAuthenticator.extend({
  async authenticate(credentials) {
    // Example API call to login which would return a session token
    // in a JSON object.
    //let { token } = await ajax('/api/v1/login', credentials)
    let { token } = await mockAuth(credentials)

    return { token, username: credentials.identification }
  },
  async restore(properties) {
    if (isEmpty(properties.token)) {
      throw new Error('No token to restore found')
    }

    return properties
  },
  invalidate() {
    // Example API call to logout
    //return ajax('/api/v1/logout')
    return true
  }
})

 method does not need to await anything, the ember-simple-auth API expects a rejected promise, throwing in an async function rejects the returned promise of 

 function here is only intended for our example and fakes an actual login attempt.
I've implemented it like this:

function mockAuth({ identification: user, password: pass }) {
  return new Promise((resolve, reject) => {
    if (user === 'topaxi' && pass === '123456') {
      resolve({ token: 'some random session token' })
    }
    else {
      reject(new Error('Invalid credentials!'))
    }
  })
}

Setup the router with all routes we're going to use for this example:

import Ember from 'ember'
import config from './config/environment'

const Router = Ember.Router.extend({
  location: config.locationType
})

Router.map(function() {
  this.route('login')
  this.route('protected', function() {
    // Put any route which needs authentication here or make sure
    // to extend the protected route.
    //this.route('user', { resetNamespace: true })
  })
})

export default Router

 action to the application controller, we may need to add logout links on any page so this is a good place to implement his.

import Ember from 'ember'
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin'

export default Ember.Route.extend(ApplicationRouteMixin, {
  actions: {
    invalidateSession() {
      this.get('session').invalidate()
    }
  }
})

Add some indication to the application route when we're logged in:

<h2 id="title">Welcome to Ember</h2>

{{#if session.isAuthenticated}}
  <div class="logged-in">
    Currently logged in as: <span class="logged-in-user">{{session.session.content.authenticated.username}}</span>
    <br>
    <a {{action 'invalidateSession'}}>Logout</a>
  </div>
{{else}}
  <nav>
    {{#link-to 'login'}}Login{{/link-to}}
  </nav>
{{/if}}

{{outlet}}

 in our template, we need to inject the ember-simple-auth session service into our application controller:

import Ember from 'ember'

export default Ember.Controller.extend({
  session: Ember.inject.service()
})

Implement the route, controller and template for our login.

import Ember from 'ember'
import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin'

export default Ember.Route.extend(UnauthenticatedRouteMixin, {
  session: Ember.inject.service(),

  afterModel() {
    if (this.get('session.isAuthenticated')) {
      this.replaceWith('/')
    }
  }
})

import Ember from 'ember'

export default Ember.Controller.extend({
  session: Ember.inject.service(),

  actions: {
    async authenticate() {
      this.set('loading', true)
      this.set('errorMessage', null)

      try {
        let credentials = this.getProperties('identification', 'password')

        await this.get('session').authenticate('authenticator:custom', credentials)
      }
      catch (e) {
        this.set('errorMessage', e.message)
      }
      finally {
        this.set('loading', false)
      }
    }
  }
})

<form class="form-inline {{if loading 'form-loading'}}" {{action 'authenticate' on='submit'}}>
  <div class="form-group login-form-user">
    {{input type="text" value=identification class="form-control" placeholder="Username" disabled=loading autofocus=true}}
  </div>
  <div class="form-group login-form-password">
    {{input type="password" value=password class="form-control" placeholder="Password" disabled=loading}}
  </div>
  <button type="submit" class="btn btn-primary" disabled={{loading}}>
    {{#if loading}}Logging in...{{else}}Login{{/if}}
  </button>
  {{#if errorMessage}}
    <p class="error-message">{{errorMessage}}</p>
  {{/if}}
</form>

 to indicate which route needs authentication.

import Ember from 'ember'
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin'

export default Ember.Route.extend(AuthenticatedRouteMixin)

Now we're all set, lets run the acceptance test to check if everything is working as expected:

$ ember test
version: 1.13.8
Built project successfully. Stored in "/home/topaxi/await-test/tmp/class-tests_dist-hJ8RCDwV.tmp".
ok 1 PhantomJS 1.9 - Acceptance | Login: visiting /protected redirects to /login
ok 2 PhantomJS 1.9 - Acceptance | Login: visiting /login works
ok 3 PhantomJS 1.9 - Acceptance | Login: login fails for invalid user
ok 4 PhantomJS 1.9 - Acceptance | Login: login works for valid user
ok 5 PhantomJS 1.9 - Acceptance | Login: a protected route is accessible when the session is authenticated

1..5
# tests 5
# pass  5
# fail  0

# ok

This covered our login process, what's still missing is authorization for our potential API endpoints. This might be implemented like this, but won't be covered fully in this blog post.

import BaseAuthorizer from 'ember-simple-auth/authorizers/base'

export default BaseAuthorizer.extend({
  authorize({ token }, setRequestHeader) {
    if (token) {
      setRequestHeader('Authorization', `Bearer ${token}`)
    }
  }
})

Now that you've learnt to build an authentication with the latest ember-simple-auth module and ES7 async functions, go build something awesome! :)

Using ES7 Async Functions In Ember

In ES6 (or ES2015 if you will), one great new addition is the new class syntax, known from almost every other classical object-oriented programming language like Java, C++, etc.

In this post, we're going from the plain JavaScript functions to the new ES6 class definitions.

While JavaScript is object-oriented it uses the so called prototypical inheritance instead of the more common classical inheritance approach.
What this basically means is, objects are constructed from other objects instead of declarative object definitions. JavaScript uses functions as constructors and if called with the keyword 

 they will create a new object using the functions 

function Foo() {
  console.log('Constructing new foo...')
}

Foo.prototype.hello = function() {
  console.log('Hello World')
}

 function, we can instantiate a new object with a 

var foo = new Foo() // Logs 'Constructing new foo...'

foo.hello() // Logs 'Hello World'

 object.
You can lookup and manually set the inherited object by accessing / setting the 

 property on any object. This was non-standard up until ES6.

Foo.prototype.constructor === Foo // true
Foo.prototype.__proto__ === Object.prototype // true

 accessor as it is only standardized because most browser started implementing it and there were use cases where no other solution was available. There are also 

To inherit from a object, all you need to do is setting the 

 property of your object to an instance of your super class.

function Bar() {

}

Bar.prototype = new Foo()

 class. But there is one little problem here, if you noticed, we constructed an instance our 

s prototype, this can cause serious problems as the constructor 

 might have side-effects or do other stuff we don't want yet. In our example above, the code even logged 

 creates a new object which directly inherits from the given object.

function Bar() {

}

Bar.prototype = Object.create(Foo.prototype)

 and no other methods or constructors will be called.
Don't forget to call the parent constructor (

) on your currently constructing object.
Unfortunately this approach also kills of our initial 

, you might want to reassign it afterwards.

function Bar() {
  Foo.apply(this, arguments)
}

Bar.prototype = Object.create(Foo.prototype)
Bar.prototype.constructor = Bar

 class has some static methods, we won't get these inherited in this example. By setting the 

 we even get the static members correctly inherited.

function Foo() {

}

Foo.staticHello = function() {
  return 'Hello static World'
}

Foo.prototype.hello = function() {
  return 'Hello World'
}

function Bar() {
  Foo.apply(this, arguments)
}

Bar.prototype = Object.create(Foo.prototype)
Bar.prototype.constructor = Bar
Bar.__proto__ = Foo

var f = new Foo
var b = new Bar

console.log(f.hello()) // Hello World
console.log(b.hello()) // Hello World
console.log(Foo.staticHello()) // Hello static World
console.log(Bar.staticHello()) // Hello static World

As you might have noticed, this is all very verbose and quite a bit weird. Because lots of people have issues and lots of libraries implemented their own class / object inheritance system, ES6 now comes with a native syntax for achieving exactly what we did in our last example.

To achieve the same as in my last example we can simply write this:

class Foo {
  static staticHello() {
    return 'Hello static World'
  }

  hello() {
    return 'Hello World'
  }
}

class Bar extends Foo {

}

var f = new Foo
var b = new Bar

console.log(f.hello()) // Hello World
console.log(b.hello()) // Hello World
console.log(Foo.staticHello()) // Hello static World
console.log(Bar.staticHello()) // Hello static World

Voilà, no more using weird underscored accessors, no more manually calling the super constructor, everything is done for you.
The constructor in 

 is automatically derived if none is defined. The constructor and class methods may now even call super methods.

class Bar extends Foo {
  constructor() {
    // super must be called before any use of `this`
    // because it is the parents job to construct the initial object
    super()
  }

  hello() {
    return super.hello()
  }
}

One small note, there is no way yet to define instance variables, you have to set them in the constructor for now.

This was a short introduction to ES6 classes, there is a lot more going on here.
For a more in-depth explanation I recommend reading 

Dr. Axel Rauschmayer article on Classes in ECMAScript 6

JavaScript Classes - Basics

 it is possible to use some pretty nifty ES7 (or post ES2015) syntax for computed properties, event-listeners, observers and more!

 make it very easy to annotate and modify properties or classes using a declarative syntax.

Decorators are currently a stage 1 proposal in 

var EmberApp = require('ember-cli/lib/broccoli/ember-app')
var app      = new EmberApp({
  babel: {
    optional: [ 'es7.decorators' ]
  }
})

module.exports = app.toTree()

 specific decorators to your project ready to be used.

$ ember install ember-computed-decorators

import Ember from 'ember'
import { computed, observes } from 'ember-computed-decorators'

export default Ember.Component.extend({
  @on('didInsertElement')
  setupEditable() {
    let options = {
      placeholder: this.get('placeholder'),
      emptytext:   this.get('emptytext'),
      value:       this.get('value'),
      success:     (res, value) => this.sendAction('setValue', value)
    }

    let $editable = Ember.$('<a>').addClass('editable').editable(options)
    this.$().append($editable)
  },

  @observes('value')
  updateValue() {
    this.$('.editable').editable('setValue', this.get('value'))
  }
})

As you can see, we moved the relevant events or observers above our functions. With this new syntax we have two nice side effects, first we immediately see when each function is triggered without skipping to the end of the function, second we can use the ES2015 concise method syntax, which is shorter and more pleasant to the eye.

Decorators are evaluated from bottom to top, which means, decorators closer to the function get executed first.

@computed('firstName', 'lastName') // executes second
@readOnly                          // executes first
fullName() {
  return `${this.get('firstName')} ${this.get('lastName')}`
}

Another example using the Ember Data decorators:

import DS from 'ember-data'
import { readOnly, computed } from 'ember-computed-decorators'
import { attr, hasMany, belongsTo } from 'ember-computed-decorators/ember-data'

export default DS.Model.extend({
  @attr('string') username,
  @attr('string') firstName,
  @attr('string') lastName,
  @attr('date') birthday,
  @hasMany('user') friends,
  @belongsTo('team') team,

  @readOnly
  @computed('firstName', 'lastName')
  fullName() {
    return `${this.get('firstName')} ${this.get('lastName')}`
  },

  @readOnly
  @computed
  age() {
    let now       = new Date
    let birthday  = this.get('birthday')
    let age       = now.getFullYear() - birthday.getFullYear()
    let monthDiff = now.getMonth() - birthday.getMonth()

    if (monthDiff < 0 || monthDiff === 0 && now.getDate() < birthday.getDate()) {
      age--
    }

    return age
  }
})

As of this writing, the following decorators for Ember are available:

import { ... } from 'ember-computed-decorators'

import { ... } from 'ember-computed-decorators/ember-data

 and even the decorator proposal are still in flux and probably shouldn't be used in any production code.

Using ES7 Decorators In Ember

Add simple visual progress bars to your route transitions by using 

app.import('bower_components/nprogress/nprogress.js')
app.import('bower_components/nprogress/nprogress.css')

/* globals NProgress */
import Ember from 'ember'

NProgress.configure({ showSpinner: false })

export default Ember.Mixin.create({
  actions: {
    loading() {
      NProgress.start()
      this.router.one('didTransition', () => NProgress.done())
      return true
    }
  , error() {
      NProgress.done()
      return true
    }
  }
})

Once the mixin is created, use it in each resource loading route like this:

import Ember            from 'ember'
import LoadingIndicator from 'yourproject/mixins/loading-indicator'

export default Ember.Route.extend(LoadingIndicator, {
  model() {
    return Ember.$.get('/my/data.json')
  }
})

Your Ember application now has nice loading bars on top of your document.