How to Migrate an Ember.js 1.8.1 stack to 1.10.0 with HTMLBars on Grunt

doc.md

Breaking changes

---

Dependencies

Dependency	Version	New Version	Package manager
ember	1.8.1	1.10.0	Bower
ember-resolver	0.1.11	0.1.12	Bower
ember-data	1.0.0-beta.12	1.0.0-beta.14.1	Bower
grunt-ember-templates	0.4.21	0.5.0	Npm
-> handelbars	1.3.0	peerDependency (2.0.0)	Npm
-> ember-template-compiler	1.6.1	peerDependency (1.10.0)	Npm

bower cache clean
rm -rf node_modules
bower install && npm install

Grunt-ember-templates

options :

{
  options: {
+    templateCompilerPath: 'app/assets/scripts/bower_components/ember/ember-template-compiler.js',
+    handlebarsPath: 'node_modules/handlebars/dist/handlebars.js',
+    templateNamespace: 'HTMLBars'

Compilation

The task failes when a tag is not closed.

>>                          ^
>> Closing tag `div` (on line 10) did not match last open tag `p` (on line 9).
Warning: Ember Handlebars failed to compile app/assets/scripts/apps/import-contacts/templates/contacts/loading.hbs

Features

---

Ember-data 1.0.0-beta.14.1

Many things have been done especially to improve performances.

see the release blog. see the changelog

• store.update() method has been deprecated in favor of store.push().
• ManyArray get('content') method has been deprecated in favor of .toArray()
• .addRecord() and .removeRecord() method has been deprecated in favor of .addObject() / .removeObject() array methods.

// Ember Data 1.0.0-beta.12
record.get('myHasManyRelationship').get('content').map(...);
// Ember Data 1.0.0-beta.14
record.get('myHasManyRelationship').toArray().map(...)

--

Ember 1.10

All computed properties are cacheable by default. Please upgrade to Ember-data 1.0.0-beta.14.1 to avoid deprecation warnings

• see the deprecations
• see the changelog
• see the new features

BLOCK PARAMS

• See the description

{{currentUser.name}} {{! available on the controller }}
{{#each cars as |car|}}
  {{#with car.manufacturer as |make|}}
    {{make.name}}
    {{currentUser.name}} {{! still the controller scope }}
  {{/with}}
{{/each}}

CHAINED ELSE BLOCKS

• See the description

{{!-- Ember 1.10 Method --}}
{{#if isAtWork}}
  Ship that code!
{{else if isReading}}
  You can finish War and Peace eventually...
{{/if}}

--

HTMLBARS 0.8.5

• see the performance improvements
• A Feature-by-Feature review on the awesomeness of HTMLBars

EmberJS is known to perform badly when rendering long list of dynamic contents, especially on mobile. With HTMLBars, they managed to shave off a significant amount of rendering time with a different approach.

Inline If Helper

Current Ember developers are familiar with the bind-attr syntax, used to declare an attribute binding on an HTML element. An original motivation for HTMLBars was to improve on this syntax.

<span {{bind-attr class="isActive:active :fl"}}></span>
 
{{!-- HTMLBar Method --}}
<span class="{{if category.isActive 'active'}} fl"></span>

Road to Ember 1.11

---

1. Get rid of the {{bind}} helper
2. Outlet should be {{outlet 'name'}} instead of {{outlet name}}