Ember on Rails - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Brightin

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Warning: blatant self- promotion

Slide 5

Slide 5 text

Appuccino

Slide 6

Slide 6 text

Ember

Slide 7

Slide 7 text

A framework for creating ambitious web applications

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

MVC-ish

Slide 10

Slide 10 text

Awesome routing

Slide 11

Slide 11 text

Auto-updating templates

Slide 12

Slide 12 text

Upgrades JavaScript

Slide 13

Slide 13 text

Rails for browsers

Slide 14

Slide 14 text

Ember & Rails

Slide 15

Slide 15 text

Besties

Slide 16

Slide 16 text

Setting up Ember is a chore

Slide 17

Slide 17 text

Tools

Slide 18

Slide 18 text

gem 'ember-rails'

Slide 19

Slide 19 text

rails g ember:bootstrap

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Emblem

Slide 22

Slide 22 text

gem 'emblem-rails'

Slide 23

Slide 23 text

No more {{}}

Slide 24

Slide 24 text

API

Slide 25

Slide 25 text

Ember Data is beta!

Slide 26

Slide 26 text

Ember Data is beta undocumented

Slide 27

Slide 27 text

Here be dragons

Slide 28

Slide 28 text

gem 'active_model_serializers'

Slide 29

Slide 29 text

gem 'ember-rails'

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Use the defaults and you’ll love Ember Data

Slide 35

Slide 35 text

Testing Ember with Rails

Slide 36

Slide 36 text

Testing Ember is hard

Slide 37

Slide 37 text

gem 'konacha'

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Mocha is nicer than Qunit

Slide 40

Slide 40 text

Use Sinon and mock a lot

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Summary

Slide 44

Slide 44 text

Ember is pretty cool

Slide 45

Slide 45 text

Rails provides some useful tools

Slide 46

Slide 46 text

Stick to the defaults

Slide 47

Slide 47 text

ember-rails is your friend

Slide 48

Slide 48 text

Questions? ! !

Slide 49

Slide 49 text

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