Rails and Ember.js

This talk covers the basics of why you need sth. like Ember.js on top of Rails, how Ember.js and Rails communicate and how to set up the projects so that development and deployment work well.

Transcript

1. Rails and Ember.js
2. Marco Otte-Witte http://simplabs.com
3. We are hiring! Ember.js, Rails, Swift
4. http://www.meetup.com/Ember-js-Munich/
5. Rails and Ember.js
6. Rails is great of course…
7. …but…
8. …it makes it really hard to build big, JavaScript heavy apps…
9. …as there´s nothing that helps you structure that JavaScript code.
10. Instead the JavaScript code is distributed all over the app
11. helpers like remote_form_for
12. RJS/SJR https://signalvnoise.com/posts/3697-server-generated- javascript-responses
13. <div data-special="im-special"> … </div> $(document).ready(function() { $('*[data-special="im- special"]').each(function($el) { $el.makeSpecial(); }); }); Data Attributes
14. …and it doesn´t currently look like that´s going to change
15. The point is…
16. …jQuery is just a low-level library to deal with the DOM and crazy browsers…
17. …and was never been built as a UI framework.
18. The UI state is distributed throughout the entire app!
19. You need sth. on top of Rails and jQuery!
20. …and there´s a lot of choices
25. …17 million others…
27. emerged from SproutCore (originally developed by Apple for
 http://iwork.com)
28. Yehuda Katz is a core team member (which means it must be great)
29. Ember.js is Rails for the browser
30. It offers everything we love about Rails:
31. convention over configuration
32. strictly enforced structure
33. clear separation of concerns
34. there´s usually only one right way to do sth.…
35. …so every project is the same
36. Demo
37. http://www.meetup.com/Ember-js-Munich/
38. How do Rails and Ember.js work together?
39. Rails is the API
40. Ember is an API client
41. Ember Data is Ember´s ActiveRecord https://github.com/emberjs/data
42. but it uses the Rails app´s API instead of PostgreSQL
43. JSON API is the API format of choice http://jsonapi.org
44. { "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" ] } }] }
45. ActiveModel::Serializer
 doesn´t support it (yet)…
46. …but it´s easy to implement
47. there´s also JSONAPI::Resources https://github.com/cerebris/jsonapi-resources
48. How to set up the project(s)?
49. Two different repos
50. don´t try to integrate Ember in Rails´ asset pipeline (although the ember-rails gem exists)
51. Use ember-cli http://www.ember-cli.com
52. ember-cli builds the project, runs tests etc.
53. it also proxies to the Rails app ember serve --proxy=http://192.168.0.0:3000
54. build the backend and frontend separately
55. and deploy separately Rails app goes to app server, Ember app goes to S3/Cloudfront
56. Q&A
57. Thanks!