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.

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