Future-proofing your Ember 1.x code

future-proof.md

This post is also on my blog, since Gist doesn't support @ notifications.

---

Components are taking center stage in Ember 2.0. Here are some things you can do today to make the transition as smooth as possible:

• Use Ember CLI

• In general, replace views + controllers with components

• Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController

• Fetch data in your route, and set it as normal properties on your top-level controller. Export an Ember.Controller, otherwise a proxy will be generated. You can use Ember.RSVP.hash to simulate setting normal props on your controller.

  ```js   
  //controllers/index.js
  import Ember from 'ember';
  export default Ember.Controller;
  
  //routes/index.js
  model: function() {
    return Ember.RSVP.hash({
      users: this.store.find('user')
    });
  },
  
  setupController: function(controller, models) {
    controller.setProperties(models);
  }
  ```
  
  Now you can just refer to the keys in your route's template:
  
  ```hbs
  //templates/index.js
  <h1>Users</h1>
  {{user-list users=users}}
  ```
  This controller/template pair will eventually become a routable component.
  

• In your templates, stay away from things like ItemControllers and calls to render(). Use components instead.

• Don't use views

• Write your app in the "data down, actions up" paradigm

  • Not currently enforced, but you can still structure your app this way
  • Stay away from two-way bindings and mutability

• Don't use each or with in the context-switching form. That is, use

   {{#each users as |user|}} {{user.firstName}} {{/each}}
  

  instead of

   {{#each users}} {{firstName}} {{/each}}
  

• Use pods

• Use this.route instead of this.resource in Router.map. Couple this with pods and you'll quickly understand why you don't want to use resource anymore - your directory structure in pods will now mirror the view hierarchy of your UI.

Better apps

Follow these tips, and your apps will be ready for Ember 2.0. You'll also learn a lot about writing apps that are better structured and easier to understand!

Deprecations will be coming to help you move towards these newer practices. The goal is, if your app runs on the final version of 1.x with no deprecations, it should be able to run in 2.0.

I just changed from ArrayController to Controller and got it to work again but I now get .createWithMixins is deprecated, please use .create or .extend accordingly but I can't find how to do it. Can somebody point me to an example or take a look at my code:

  arrangedContent: function() {
    return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
      sortProperties: ['date'],
      sortAscending: false,
      content: this.get('model')
    });
  }.property('model'),

@broerse I think you can just do:

  arrangedContent: function() {
    return Ember.ArrayProxy.extend(Ember.SortableMixin).create({
      sortProperties: ['date'],
      sortAscending: false,
      content: this.get('model')
    });
  }.property('model'),

@koriroys This was just what solved it. Many thanks!

@koriroys Saved my day, thanks!!!!