Getting Ready for Ember 2.0

Presented at the Melbourne Ember.js Meetup, July 2015.

Transcript

1. Getting ready for ember 2.0 Ivan Vanderbyl @ivanderbyl
2. 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
3. August 7th, ish. ember 2.0
4. Overview 1. New features in Ember 2.0 2. Removed in 2.0 3. Upgrade path
5. /* what’s new in 2.0 */
6. Ember 2.0 has undefined new features.
7. Ember 2.0 has NaN new features.
8. Ember 2.0 has null new features.
9. Ember 2.0 has 0 new features.
10. Ember 2.0 has -1 new features.
11. Ember 2.0 has no new features.
12. ember 2.0 is 1.13 in disguise
13. "Ember 2.0 is just removing deprecated code, and having a lighter, more modern Ember." — Eric Bryn
14. /* What's new 1.13 (for real) */
15. First Ember release to ship with Glimmer rendering engine 3rd generation rendering engine after HTMLBars, and Handlebars.
16. /* Data flow is unidirectional */ Data Down, Actions Up (DDAU) moving away from two-way bindings
17. 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
18. 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).
19. /* New Helper API */
20. - 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:
21. // app/helpers/full-name.js import Ember from "ember"; export default Ember.Helper.helper(function (params, hash) { return params.join(' '); });
22. // Inside curly braces {{full-name "Daniel" model.lastName}} // As a sub-expression {{my-component name=(full-name model.firstName "Smith")}}
23. // 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(); }) });
24. /* Closure Actions */
25. // 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')}}
26. // app/components/my-component.js import Ember from "ember"; export default Ember.Component.extend({ click() { this.attrs.submit(this.get('name')); } });
27. - 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:
28. Deprecate ALL THE THINGS
29. /* How do deprecations work? */
30. somePublicAPI()
31. // 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()
32. Release version 1.13 Deprecates: - somePublicAPI(), removed in 2.0 - ... http://emberjs.com/deprecations
33. 1. Update “ember” in bower.json to “1.13” 2. bower install 3. Fix use of somePublicAPI in your app
34. Release version 2.0 Removes: - somePublicAPI() - someOtherAPI() - ... Release version 1.13 Deprecates: - somePublicAPI(), removed in 2.0 - ... http://emberjs.com/deprecations
35. 1. Update “ember” in bower.json to “2.0” 2. bower install
36. Your app still works
37. Ember Chrome Extension
38. /* What’s actually being removed in 2.0? */
39. 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
40. /* APIs that didn’t make the cut */ Routable Components Angle Bracket Components … Probably coming in 2.1, maybe, not sure.
41. /* Upgrading to Ember 2.0 */
42. 1. Fix all 1.13 deprecation messages 2. Update “ember” in bower.json to “2.0” 3. bower install 4. Done.
43. /* Q/A */
44. Upgrade path for {{view “select”}}
45. {{! app/templates/components/my-select.hbs}} <select {{action 'change' on='change'}}> {{#each content key="@index" as |item|}} <option value="{{item}}" selected={{is-equal item selectedValue}}> {{item}} </option> {{/each}} </select>