Ember without Ember Data

Ember data is still not at version 1.0 and thus I decided to use Ember without Data models.

I have my own models, and those are created by the route model function.

However maintaining state between the frontend objects and the backend objects is a nightmare. Especially when one route uses another routes models.

• How can this be achieved, should I write my own store and model find method?
• Should I use Ember Data (even though it's not at version 1.0 ?) perhaps an ETA on Ember Data 1.0 ?
• write code to update the models on the frontend each time I change a model?
• Another method?

Is what I'm doing best practices or should I be doing it differently? My gut feeling is that without using Ember Data I should write my own store. I'd love to get feedback from some of you guys.

Example of a model:

App.Person = Ember.Object.extend(App.Serializable,Em.Copyable,{
  user_email : null //used in routing dynamic segements and as old email when making changes to email
  ,first_name: null
  , last_name: null
  , fullname : function () {
    return this.first_name + ' ' + this.last_name;
  }.property('first_name','last_name').cacheable()
};

App.Person.reopenClass({
  createRecord: function(data) {
    return App.Person.create({
      user_email : data.email
      , first_name: data.first_name
      , last_name : data.last_name
}});

Example of how I load the class models:

App.UsersRoute = App.AuthenticatedRoute.extend( {
  model : function () {
    return new Ember.RSVP.Promise(function(resolve, reject) {
      $.getJSON('/users').then(function(usersData) {
        var userObjects = [];
          usersData.forEach(function (data) {
            userObjects.pushObject(App.Person.createRecord(data));
          });
        resolve( userObjects);
        },function(error) {
          reject(error);
      });
    })
  },

Subroutes use the model:

App.UsersAvailableRoute = App.AuthenticatedRoute.extend( {
     model : function () {
        return {
          allUsers :  Ember.ArrayController.create({
            content : this.modelFor('users').filter( function (user) {
                      return user.availablity === 100
                      }),

Example of how I update the model in a controller:

App.UsersAvailableController = Ember.ArrayController.extend({
needs : ['users']
    ,applyPersonAssign : function (person,need,project) {
          need.set('allocated',person);
          var updateObject = Ember.copy(project,true);
          if (Ember.isEmpty(need.get('inProject'))) {
            updateObject.projectNeeds.pushObject(need);
          }

          return $.ajax({
            url: '/projects/' + updateObject.get('codename'),
            "type": "PUT",
            "dataType": "json",
            data: updateObject.serialize()
          })

You don't necessarily need to recreate the Ember Data store. Ember works just fine with POJOs, you can also wrap your POJOs in an Ember Object to give you some fun built in features.

That being said creating a custom adapter which caches results could be convenient.

Here's an example where I create an adapter that supports caching. You can slowly build on the concept for all of the basic things you need.

App.FooAdapter = Ember.Object.extend({
  cache:{},
  find: function(id){
    var self = this,
        record;
    if(record = this.cache[id]){
      return Ember.RSVP.cast(record);
    }
    else
    {
      return new Ember.RSVP.Promise(function(resolve){
        resolve($.getJSON('http://www.foolandia.com/foooo/' + id));
      }).then(function(result){
        record = self.cache[id] = App.Foo.create(result);
        return record;
      });
    }
  }
});

In the examples below, I use the container to register the adapter on all of my routes/controllers so I had lazy easy access to it.

http://emberjs.jsbin.com/OxIDiVU/742/edit

If you always want it to be a promise:

http://emberjs.jsbin.com/OxIDiVU/740/edit

Reusability

The example above may make it look like you'd have to do a ton of work, but don't forget, Ember is super reusable, take advantage of the magic.

App.MyRestAdapter = Em.Object.extend({
  type: undefined,
  find: function(id){
    $.getJSON('http://www.foolandia.com/' + this.get('type') + '/' + id
  }
});

App.FooAdapter = App.MyRestAdapter.extend({
  type: 'foo' // this would create calls to: http://www.foolandia.com/foo/1
});

App.BarAdapter = App.MyRestAdapter.extend({
  type: 'bar' // this would create calls to: http://www.foolandia.com/bar/1
});

This is the basic idea of what Ember Data/Ember Model is. They've tried to create a ton of defaults and built in coolness, but sometimes it's overkill, especially if you are just consuming data and not doing CRUD.

Example: http://emberjs.jsbin.com/OxIDiVU/744/edit

Also you can read this (says the same stuff):

How do you create a custom adapter for ember.js?

Where I work we are using Ember Data and Ember CLI despite them being rather unstable. So far Ember Data hasn't caused too much pain and suffering here. The store is pretty easy to understand, and the documentation on Ember for that facet of the framework is rather good. The one issue that I have been having has to do with dynamically sorting models, and as I modify the content of them, they reshuffle according to the changes I make, and somewhere along the road some really weird stuff happens, not sure if that's Ember Data's fault though.

In short, we've found some success using Ember Data, and can't complain about it if that's the route you wish to go.

If you're familiar with Ruby, Rails is a great solution for a backend.

The ember community has support for rails with the ember-rails gem which lets you use rails as a means to serve JSON.

Getting started

• Add the gem to your application Gemfile:

  gem 'ember-rails' gem 'ember-source', '~> 1.9.0' # or the version you need

• Run bundle install

• Next, generate the application structure:

  rails generate ember:bootstrap

• Restart your server (if it's running)

Building a new project from scratch

Rails supports the ability to build projects from a template source ruby file.

To build an Ember centric Rails project you can simply type the following into your command line:

rails new my_app -m http://emberjs.com/edge_template.rb

To install the latest builds of ember and ember-data. It should be noted that the examples in the getting started guide have been designed to use the released version of ember:

rails generate ember:install

Then all you need to do is render json in your controllers, like this

class ProjectsController < ApplicationController
    def index
        respond_to do |format|
            format.json { render json: Project.all }
        end
    end

    def show
        respond_to do |format|
            format.json { render json: Project.where(name: params[:name])}
        end
    end
end

make sure to update your serializers

class ProjectSerializer < ApplicationSerializer
  attributes :id, :name, :description, :imgUrl, :deployUrl
end 

setup your routes

EmberRailsBlog.ProjectsRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('project');
    }
});

and finally your model

var attr = DS.attr;

EmberRailsBlog.Project = DS.Model.extend({
    name: attr(),
    description: attr(),
    imgUrl: attr(),
    deployUrl: attr()
});