Updating Apps to Ember Version 2.x

15 February, 2016
post-banner

Last year, version 2.0 of Ember was released using the motto 'Stability Without Stagnation'. So rather than focusing on adding loads of new features, the Ember team focused on removing features that were deprecated in the last stable version. This means that apps that ran on Ember v.1.13 without any issues, should also run on Ember v.2.0 without any issues.

One of the great things about Ember's updates is that it follows some of the best big bets of open web standards. Things such as ES6 modules, promises, and web components have all made their way into the Ember framework.

Updating the version of Ember and Ember Data is a fairly simple task, but it's always useful to have a brief guide. So, this article will serve as a simple introduction on how to do this.

What's New in Ember 2.x?

The focus on removing deprecated features from Ember meant that nothing is really 'new' in Ember 2.0. That being said, there were many 'precursor features' implemented in Ember as part of the 2.0 release process. Some of the major new features are:

  • The command-line interface for Ember, Ember-CLI, is now a core tool of the framework.
  • ECMAScript 6 (ES6/ES.Next) modules are now fully compatible with Ember projects.
  • Ember 2.0 has started a shift from the original v.1 MVC pattern to routable components, which will continue throughout releases until components fully replace this style.
  • More intuitive attribute bindings, with the deprecation of the {{bind-attr}} helper.

Install/Update Ember-CLI

So, now we can get down to updating our Ember apps to the latest, stable version. First off, we can install the latest version of Ember CLI globally through the command line, if you haven't already got it installed.

$ npm install -g ember-cli

We can then check the installed version by running ember -v.

$ ember -v
version: 1.13.15  
node: 5.2.0  
npm: 2.14.10  
os: darwin x64  

If you already have an older version of Ember CLI installed, we can simply uninstall it globally, clean the cache, and then reinstall the latest version (currently v1.13.15).

$ npm uninstall -g ember-cli
$ npm cache clean && bower cache clean
$ npm install -g [email protected]

Updating Ember

With the latest version of Ember-CLI installed, we can cd into our app that needs updating and get started.

You can check out the latest stable version of Ember here, which, at the time of writing, is v2.3.1.

We can install the latest version using Bower and set the specific version we want using #<version>. We can also add the --save flag when we install to automatically persist this version to the bower.json file.

$ bower install ember#2.3.1 --save
bower ember#2.3.1               cached git://github.com/components/ember.git#2.3.1  
bower ember#2.3.1             validate 2.3.1 against git://github.com/components/ember.git#2.3.1  
bower ember#>=1.4               cached git://github.com/components/ember.git#2.3.1  
bower ember#>=1.4             validate 2.3.1 against git://github.com/components/ember.git#>=1.4  
bower ember#> 1.5.0-beta.3      cached git://github.com/components/ember.git#2.3.1  
bower ember#> 1.5.0-beta.3    validate 2.3.1 against git://github.com/components/ember.git#> 1.5.0-beta.3  
bower ember#>= 1.8.1 < 2.0.0    cached git://github.com/components/ember.git#1.13.13  
bower ember#>= 1.8.1 < 2.0.0  validate 1.13.13 against git://github.com/components/ember.git#>= 1.8.1 < 2.0.0

Unable to find a suitable version for ember, please choose one:  
    1) ember#1.13.12 which resolved to 1.13.12 and is required by update-article
    2) ember#>= 1.8.1 < 2.0.0 which resolved to 1.13.13 and is required by ember-data#1.13.15
    3) ember#>=1.4 which resolved to 2.3.1 and is required by ember-cli-shims#0.0.6
    4) ember#> 1.5.0-beta.3 which resolved to 2.3.1 and is required by ember-resolver#0.1.21
    5) ember#2.3.1 which resolved to 2.3.1

Prefix the choice with ! to persist it to bower.json

? Answer 

You will probably be prompted to select a suitable version of Ember, depending on different resolutions and requirements. In this example, we want option 5, so we can enter !5, prepended with an exclamation mark to persist to the bower.json, to do so.

? Answer !5
bower ember                 resolution Saved ember#2.3.1 as resolution  
bower ember#2.3.1              install ember#2.3.1

ember#2.3.1 bower_components/ember  
└── jquery#1.11.3

Install Ember-Data 2.3.x

Starting with Ember 2.0, every release of Ember will be coordinated with the releases of the other main tools from the project, one of these being Ember Data.

Ember Data is now a full Ember-CLI add-on, meaning that we can install it, the same as any add-on, using ember install.

You can check out the current stable version of Ember Data here, which, at the time of writing, is v2.3.3.

$ ember install [email protected]

version: 1.13.15  
Installed packages for tooling via npm.  
Installed addon package.  

You may be returned a deprecation warning, asking you to remove the ember-data package from the bower.json file, as only the NPM package is needed from v2.3.0 onwards. This is absolutely fine, simply remove the "ember-data": "1.13.15", line from the bower.json, and install it again.

Running the App

Now that we have updated to the latest versions of Ember and Ember Data in our app, we can run it using ember server. If you open the console in the browser, you'll be able to verify that we have set the versions up properly.

DEBUG: -------------------------------  
DEBUG: Ember      : 2.3.1  
DEBUG: Ember Data : 2.3.3  
DEBUG: jQuery     : 1.11.3  
DEBUG: -------------------------------  

Further Reading

comments powered by Disqus