$30 off During Our Annual Pro Sale. View Details »

Ember on Rails

Tom Kruijsen
February 04, 2014

Ember on Rails

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.

Tom Kruijsen

February 04, 2014
Tweet

More Decks by Tom Kruijsen

Other Decks in Programming

Transcript

  1. Ember on Rails
    Tom Kruijsen
    Utrecht.rb - 2014-02-03

    View Slide

  2. Brightin

    View Slide

  3. View Slide

  4. Warning: blatant self-
    promotion

    View Slide

  5. Appuccino

    View Slide

  6. Ember

    View Slide

  7. A framework for creating
    ambitious web
    applications

    View Slide

  8. View Slide

  9. MVC-ish

    View Slide

  10. Awesome routing

    View Slide

  11. Auto-updating templates

    View Slide

  12. Upgrades JavaScript

    View Slide

  13. Rails for browsers

    View Slide

  14. Ember &
    Rails

    View Slide

  15. Besties

    View Slide

  16. Setting up Ember is a
    chore

    View Slide

  17. Tools

    View Slide

  18. gem 'ember-rails'

    View Slide

  19. rails g
    ember:bootstrap

    View Slide

  20. View Slide

  21. Emblem

    View Slide

  22. gem 'emblem-rails'

    View Slide

  23. No more >{{}}

    View Slide

  24. API

    View Slide

  25. Ember Data is beta!

    View Slide

  26. Ember Data is beta
    undocumented

    View Slide

  27. Here be dragons

    View Slide

  28. gem
    'active_model_serializers'

    View Slide

  29. gem 'ember-rails'

    View Slide

  30. class CatsController < ApplicationController!
    def index!
    render json: Cat.all!
    end!
    end

    View Slide

  31. class CatSerializer < ActiveModel::Serializer!
    embed :ids, include: true!
    attributes :id, :name!
    !
    has_many :pictures!
    end

    View Slide

  32. {!
    "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"!
    }!
    ]!
    }

    View Slide

  33. Catstagram.Cat = DS.Model.extend!
    name: DS.attr()!
    pictures: DS.hasMany('picture')

    View Slide

  34. Use the defaults and
    you’ll love Ember Data

    View Slide

  35. Testing Ember
    with Rails

    View Slide

  36. Testing Ember is hard

    View Slide

  37. gem 'konacha'

    View Slide

  38. View Slide

  39. Mocha is nicer than Qunit

    View Slide

  40. Use Sinon and mock a
    lot

    View Slide

  41. #= 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()

    View Slide

  42. #= 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()

    View Slide

  43. Summary

    View Slide

  44. Ember is pretty cool

    View Slide

  45. Rails provides some
    useful tools

    View Slide

  46. Stick to the defaults

    View Slide

  47. ember-rails is
    your friend

    View Slide

  48. Questions?
    !
    !

    View Slide

  49. Ember on Rails
    Tom Kruijsen
    Utrecht.rb - 2014-02-03

    View Slide