Ember.JS & Rails-API


Brian Cardarella

@bcardarella


Who?


Owner of @DockYard

Former organizer for BostonRB
Organizer for Boston OpenHack
Co-Organizer for Boston Ember.js


DockYard


Boston-based web consultancy
Rails, PostgreSQL, Ember.js

DRY => Open Source

http://dockyard.com
http://reefpoints.dockyard.com





  • What is Ember.js?
  • Why is Ember.js a good choice for Rails?
  • What is Rails-API?
  • Code walkthrough of basic CRUD Ember app

Ember.JS

Ember.JS



  • Formerly SproutCore 2.0
  • Formerly Amber
  • Full desktop-quality MVC
    client side framework
  • Not yet 1.0
  • ORM (ember-data) less ready

App Structure





  • Computed Properties
  • Bindings
  • MVC
  • Router
  • Run Loop
  • ORM

Computed Properties


App.User = Ember.Object.extend({
    fullName: function() {
        return '' + firstName + ' ' + lastName;
    }.property('firstName', 'lastName');
});

var user = App.User.create({firstName: 'Brian', lastName: 'Cardarella'});
user.get('fullName');
=> 'Brian Cardarella'

user.set('firstName', 'Crazy');
user.get('fullName');
=> 'Crazy Cardarella'

Bindings

Handlebar bindings observe Ember properties for changes and will update the template automatically.



var user = User.create({firstName: 'Brian', lastName: 'Cardarella'});
{{fullName}}
Brian Cardarella

user.set('firstName', 'Crazy');
{{fullName}}
Crazy Cardarella

Model View Controller





Controllers represent a "model"

Pages can have any number of controllers

Views capture events

RouteR


App.Router.map(function() {
  this.resource('users', function() {
    this.resource('user', { path: ':user_id' });
  });
});

Automatically generates:

  • App.UsersRoute
  • App.UserRoute

 

Each route automatically generates a controller and expects a template of a particular name.




Ember Run Loop





  • Not like a game run loop
  • Actions kick it off
  • Can be forced to run
  • Run loop will continue until empty

ORM: Ember-Data

  • Still under development
  • REST adapter
  • Fixture adapter
  • Relationship

App.User = DS.Model.extend({
  // Attributes
  firstName: DS.attr('string'),
  lastName:  DS.attr('string'),
  
  // Relationships
  comments:  DS.hasMany('App.Comment')
});

ORM: Querying





App.User.find(2)
=> user({id: 2, firstName: 'William', lastName: 'Shatner'});

App.User.find({firstName: 'George'});
=> [user({id: 2, firstName: 'George', lastName: 'Washington'}),
    user({id: 2, firstName: 'George', lastName: 'Foreman'})]





  • What is Ember.js?
  • Why is Ember.js a good choice for Rails?
  • What is Rails-API?
  • Code walkthrough of basic CRUD Ember app

Inspiration From Rails/Ruby





  • Router *
  • ember-data => ActiveRecord *
  • Inheritance Model
  • Monkey Patching
  • Interoperability
  • Dev Tools

* already covered in previous slides

Inheritance Model

Ruby

class Object < BasicObject; end

class Numeric < Object; end

class Integer < Numeric; end

Inheritance Model

Ember

Ember.CoreView = Ember.Object.extend()

Ember.View = Ember.CoreView.extend()

Monkey Patching

Ruby

# reopen the class
class Integer
  def my_method
    puts 'hey hey hey!'
  end
end

Monkey Patching

Ember

# reopen the class
App.User.reopen({
  myFunction: function() {
    return 'hey hey hey!';
  }
});

INTEROPERABILITY




Dev Tools





All dev tools built with Ruby





  • What is Ember.js?
  • Why is Ember.js a good choice for Rails?
  • What is Rails-API?
  • Code walkthrough of basic CRUD Ember app

Rails-API




  • Built by core team members
  • Meant for light-weight very fast API apps
  • No asset pipeline
  • No template rendering
  • Is it ready?





  • What is Ember.js?
  • Why is Ember.js a good choice for Rails?
  • What is Rails-API?
  • Code walkthrough of basic CRUD Ember app

ember and rails api

By bcardarella

ember and rails api

  • 3,282