Ember.JS & Rails-API
Brian Cardarella
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
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
- active_model_serializers built to work with ember-data
- ember-rails built by Ember core team
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