 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.

Ember.js route progress with NProgress.js

 installation to be used without root or sudo rights.

By default, if you install packages globally with npm, npm tries to install them into a system directory (i.e. 

). With the next steps, we're going to use your home directory for those files.

First we create a directory in your home directory where all the npm packages will be installed.

Tell npm where to store the globally installed packages by adding the following line to your 

 variables by adding the following lines to your 

PATH="$HOME/.node/bin:$PATH"
NODE_PATH="$HOME/.node/lib/node_modules:$NODE_PATH"

 variable for npm packages which ship man pages.
Add the following line to your 

 and you should be able to install and use npm packages globally with your user even without root access.

Use npm without root or sudo rights on Linux

One benefit using nvm over a package repository is, that you won't need root access to install Node.js.
This method should probably not be used for your production server, but can be very helpful on your development and testing machines.

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.25.1/install.sh | bash

After the install script completed, the script will append its executable path to your 

 (or depending on your shell a different) file. Before you can use 

If you don't want to execute arbitrary shell scripts from the internet you can follow the nvm readme on the Github repository: 

 in your shell and the latest Node.js version will be installed on your system.

The Node Version Manager also enables you to quickly install and switch between different Node.js versions. This allows you to test your applications for older versions of each platform.

$ nvm install v0.10 # to install the latest of the old Node.js 0.10 branch

nvm will automatically switch to the installed version, to switch back to the latest stable version simply type:

To preserve global npm packages when installing a new version of node use the following command:

$ nvm install node --reinstall-packages-from=default