A quick overview of some useful tools for getting Ember running nice and smooth within a Rails app. Topics included are: setting up Ember, creating an API, and testing.
Ember on RailsTom KruijsenUtrecht.rb - 2014-02-03
View Slide
Brightin
Warning: blatant self-promotion
Appuccino
Ember
A framework for creatingambitious webapplications
MVC-ish
Awesome routing
Auto-updating templates
Upgrades JavaScript
Rails for browsers
Ember &Rails
Besties
Setting up Ember is achore
Tools
gem 'ember-rails'
rails gember:bootstrap
Emblem
gem 'emblem-rails'
No more >{{}}
API
Ember Data is beta!
Ember Data is betaundocumented
Here be dragons
gem'active_model_serializers'
class CatsController < ApplicationController!def index!render json: Cat.all!end!end
class CatSerializer < ActiveModel::Serializer!embed :ids, include: true!attributes :id, :name!!has_many :pictures!end
{!"cats": [!{!"id": 1,!"name": "Mimi",!"picture_ids": [!2, 3!]!},!{!"id": 2,!"name": "Sammie",!"picture_ids": [!2, 3!]!}!],!"pictures": [!{!"id": 2,!"url": "http://s3-eu-west-1.amazonaws.com/catstagram-pics/2.png"!},!{!"id": 3,!"url": "http://s3-eu-west-1.amazonaws.com/catstagram-pics/3.png"!}!]!}
Catstagram.Cat = DS.Model.extend!name: DS.attr()!pictures: DS.hasMany('picture')
Use the defaults andyou’ll love Ember Data
Testing Emberwith Rails
Testing Ember is hard
gem 'konacha'
Mocha is nicer than Qunit
Use Sinon and mock alot
#= require 'sinon'!#= require 'application'!!mocha.ui('bdd')!mocha.globals(['Ember', 'DS', 'Catstagram', 'MD5'])!mocha.timeout(5)!chai.Assertion.includeStack = true!!ENV = {!TESTING: true!}!!window.server = sinon.fakeServer.create()!!window.testHelper =!lookup: (object, object_name) ->!name = object_name || "main"!Catstagram.__container__.lookup(object + ":" + name)!!Catstagram.Router.reopen!location: 'none'!!Konacha.reset = Ember.K!!Catstagram.setupForTesting()!Catstagram.injectTestHelpers()!!beforeEach ->!Ember.run ->!Catstagram.reset()!!Ember.Test.adapter = Ember.Test.Adapter.create()
#= require 'spec_helper'!!describe 'Cats page', ->!beforeEach ->!cat = Ember.Object.create!id: 1!name: 'Mimi'!!stubStore = sinon.stub(testHelper.lookup('store'), 'find')!stubStore.withArgs('cat').returns([cat])!!!visit '/'!!it 'shows the names of the cats', ->!expect($('li').text()).to.equal('Mimi')!!it 'links to a cat page', ->!mock = sinon.mock(testHelper.lookup('route', 'cats_cat'))!mock.expects('setupController').once()!$('a').click()!mock.verify()
Summary
Ember is pretty cool
Rails provides someuseful tools
Stick to the defaults
ember-rails isyour friend
Questions?!!