Rails and Ember.js - Speaker Deck

Slide 1

Slide 1 text

Rails and Ember.js

Slide 2

Slide 2 text

Marco Otte-Witte http://simplabs.com

Slide 3

Slide 3 text

We are hiring! Ember.js, Rails, Swift

Slide 4

Slide 4 text

http://www.meetup.com/Ember-js-Munich/

Slide 5

Slide 5 text

Rails and Ember.js

Slide 6

Slide 6 text

Rails is great of course…

Slide 7

Slide 7 text

…but…

Slide 8

Slide 8 text

…it makes it really hard to build big, JavaScript heavy apps…

Slide 9

Slide 9 text

…as there´s nothing that helps you structure that JavaScript code.

Slide 10

Slide 10 text

Instead the JavaScript code is distributed all over the app

Slide 11

Slide 11 text

helpers like remote_form_for

Slide 12

Slide 12 text

RJS/SJR https://signalvnoise.com/posts/3697-server-generated- javascript-responses

Slide 13

Slide 13 text

…

$(document).ready(function() { $('*[data-special="im- special"]').each(function($el) { $el.makeSpecial(); }); }); Data Attributes

Slide 14

Slide 14 text

…and it doesn´t currently look like that´s going to change

Slide 15

Slide 15 text

The point is…

Slide 16

Slide 16 text

…jQuery is just a low-level library to deal with the DOM and crazy browsers…

Slide 17

Slide 17 text

…and was never been built as a UI framework.

Slide 18

Slide 18 text

The UI state is distributed throughout the entire app!

Slide 19

Slide 19 text

You need sth. on top of Rails and jQuery!

Slide 20

Slide 20 text

…and there´s a lot of choices

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

…17 million others…

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

emerged from SproutCore (originally developed by Apple for  http://iwork.com)

Slide 28

Slide 28 text

Yehuda Katz is a core team member (which means it must be great)

Slide 29

Slide 29 text

Ember.js is Rails for the browser

Slide 30

Slide 30 text

It offers everything we love about Rails:

Slide 31

Slide 31 text

convention over configuration

Slide 32

Slide 32 text

strictly enforced structure

Slide 33

Slide 33 text

clear separation of concerns

Slide 34

Slide 34 text

there´s usually only one right way to do sth.…

Slide 35

Slide 35 text

…so every project is the same

Slide 36

Slide 36 text

Demo

Slide 37

Slide 37 text

http://www.meetup.com/Ember-js-Munich/

Slide 38

Slide 38 text

How do Rails and Ember.js work together?

Slide 39

Slide 39 text

Rails is the API

Slide 40

Slide 40 text

Ember is an API client

Slide 41

Slide 41 text

Ember Data is Ember´s ActiveRecord https://github.com/emberjs/data

Slide 42

Slide 42 text

but it uses the Rails app´s API instead of PostgreSQL

Slide 43

Slide 43 text

JSON API is the API format of choice http://jsonapi.org

Slide 44

Slide 44 text

{ "links": { "posts.author": { "href": "http://example.com/people/{posts.author}", "type": "people" }, "posts.comments": { "href": "http://example.com/comments/{posts.comments}", "type": "comments" } }, "posts": [{ "id": "1", "title": "Rails is Omakase", "links": { "author": "9", "comments": [ "5", "12", "17", "20" ] } }] }

Slide 45

Slide 45 text

ActiveModel::Serializer  doesn´t support it (yet)…

Slide 46

Slide 46 text

…but it´s easy to implement

Slide 47

Slide 47 text

there´s also JSONAPI::Resources https://github.com/cerebris/jsonapi-resources

Slide 48

Slide 48 text

How to set up the project(s)?

Slide 49

Slide 49 text

Two different repos

Slide 50

Slide 50 text

don´t try to integrate Ember in Rails´ asset pipeline (although the ember-rails gem exists)

Slide 51

Slide 51 text

Use ember-cli http://www.ember-cli.com

Slide 52

Slide 52 text

ember-cli builds the project, runs tests etc.

Slide 53

Slide 53 text

it also proxies to the Rails app ember serve --proxy=http://192.168.0.0:3000

Slide 54

Slide 54 text

build the backend and frontend separately

Slide 55

Slide 55 text

and deploy separately Rails app goes to app server, Ember app goes to S3/Cloudfront