Skip to content

Instantly share code, notes, and snippets.

@samselikoff
Last active April 21, 2023 17:14
Show Gist options
  • Star 230 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save samselikoff/1d7300ce59d216fdaf97 to your computer and use it in GitHub Desktop.
Save samselikoff/1d7300ce59d216fdaf97 to your computer and use it in GitHub Desktop.
Future-proofing your Ember 1.x code

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.

@blessanm86
Copy link

@samselikoff can you elaborate on what you do to handle this point Stay away from two-way bindings and mutability

@EmergentBehavior
Copy link

In your route, I think the Ember 2.0 way to fetch all records for a model is now findAll instead of find.

@broerse
Copy link

broerse commented Jul 15, 2015

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'),

@koriroys
Copy link

@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'),

@broerse
Copy link

broerse commented Jul 16, 2015

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

@dangreenisrael
Copy link

@koriroys Saved my day, thanks!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment