Getting ready for ember 2.0 Ivan Vanderbyl @ivanderbyl 

A brief history of ember ➔ First Melbourne Ember meetup was May, 2013, just weeks before Ember 1.0 shipped ➔ Ember 1.0 took 2 years to ship. Ember 2.0 isn't far off 2 years since 1.0 ➔ We now have scheduled releases of Ember every 6 weeks. ➔ Coordinated versioning of all Core supported libraries ➔ Ember Data 1.13 finally shipped, after 3 years of work 

August 7th, ish. ember 2.0 

Overview 1. New features in Ember 2.0 2. Removed in 2.0 3. Upgrade path 

/* what’s new in 2.0 */ 

Ember 2.0 has undefined new features. 

Ember 2.0 has NaN new features. 

Ember 2.0 has null new features. 

Ember 2.0 has 0 new features. 

Ember 2.0 has -1 new features. 

Ember 2.0 has no new features. 

ember 2.0 is 1.13 in disguise 

"Ember 2.0 is just removing deprecated code, and having a lighter, more modern Ember." — Eric Bryn 

/* What's new 1.13 (for real) */ 

First Ember release to ship with Glimmer rendering engine 3rd generation rendering engine after HTMLBars, and Handlebars. 

/* Data flow is unidirectional */ Data Down, Actions Up (DDAU) moving away from two-way bindings 

Components now have: didInitAttrs runs after a component was created and passed attrs are guaranteed to be present. didReceiveAttrs runs after didInitAttrs, and it also runs on subsequent re-renders. didUpdateAttrs runs when the attributes of a component have changed. http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_component-lifecycle-hooks Component Lifecycle Hooks 

Note that a component is re-rendered whenever: - any of its attributes change - component.set() is called - component.rerender() is called - a property on a model or service used by the template has changed (including through computed properties). 

/* New Helper API */ 

- Represent a single value - Do not manage DOM or control flow - Can recompute themselves, similar to how a component can rerender - Can optionally access services - Do not require a dash in the name Ember helpers: 

// app/helpers/full-name.js import Ember from "ember"; export default Ember.Helper.helper(function (params, hash) { return params.join(' '); }); 

// Inside curly braces {{full-name "Daniel" model.lastName}} // As a sub-expression {{my-component name=(full-name model.firstName "Smith")}} 

// app/helpers/full-name.js import Ember from "ember"; export default Ember.Helper.extend({ // This service name is only an example nameBuilder: Ember.service.inject(), compute(params, hash) { return this.get('nameBuilder').build(params, hash.title); }, rebuildName: Ember.observer('nameBuilder.isAnonymized', function() { this.recompute(); }) }); 

/* Closure Actions */ 

// app/controllers/index.js import Ember from "ember"; export default Ember.Controller.extend({ actions: { setName(name) { model.set('name', name); } } }); {{! app/templates/index.hbs }} {{my-component submit=(action 'setName')}} 

// app/components/my-component.js import Ember from "ember"; export default Ember.Component.extend({ click() { this.attrs.submit(this.get('name')); } }); 

- Can be passed multiple arguments - Return a value. For example var result = this.attrs.submit(); - Can curry. For example submit=(action 'setName' “Tom”) would pass "Tom" as the first argument to setName when submit is called. Actions: 

Deprecate ALL THE THINGS 

/* How do deprecations work? */ 

somePublicAPI() 

// Deprecated by core team, will be removed in 2.0 Ember.deprecate(“This API will be removed in 2.0, please do otherThing(arg) instead”, this.isUsingSomePublicAPI, { id: “some_public_api”, until: “2.0” }); somePublicAPI() 

Release version 1.13 Deprecates: - somePublicAPI(), removed in 2.0 - ... http://emberjs.com/deprecations 

1. Update “ember” in bower.json to “1.13” 2. bower install 3. Fix use of somePublicAPI in your app 

Release version 2.0 Removes: - somePublicAPI() - someOtherAPI() - ... Release version 1.13 Deprecates: - somePublicAPI(), removed in 2.0 - ... http://emberjs.com/deprecations 

1. Update “ember” in bower.json to “2.0” 2. bower install 

Your app still works 

Ember Chrome Extension 

/* What’s actually being removed in 2.0? */ 

Notable Deprecations: ➔ Ember.CoreView, Ember.View, Ember.ContainerView and Ember. CollectionView ➔ Ember._Metamorph, Ember._MetamorphView ➔ The {{view "some-view"}} helper ➔ The {{view}} keyword ➔ {{each itemView=, {{each itemViewClass=, {{each tagName=, {{each emptyView=, {{each emptyViewClass ➔ Ember.Select and {{view "select"}} ➔ Ember.Checkbox is not removed, but will become a component instead of a view ➔ Ember.reduceComputed and Ember.arrayComputed in favor of plain normal array manipulations. ➔ Non-block param {{with ➔ Ember.ObjectController, Ember.ArrayController, The {{controller}} keyword, needs: on controllers The most commonly used parts of the view API will be supported into the foreseeable future via a core-supported add-on. http://emberjs.com/blog/2015/06/12/ember-1-13-0-released.html#toc_notable-deprecations-in-1-13 

/* APIs that didn’t make the cut */ Routable Components Angle Bracket Components … Probably coming in 2.1, maybe, not sure. 

/* Upgrading to Ember 2.0 */ 

1. Fix all 1.13 deprecation messages 2. Update “ember” in bower.json to “2.0” 3. bower install 4. Done. 

/* Q/A */ 

Upgrade path for {{view “select”}} 

{{! app/templates/components/my-select.hbs}} {{#each content key="@index" as |item|}} {{item}} {{/each}}