Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails and Ember.js

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.


Marco Otte-Witte

February 12, 2015


  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

  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

  21. None
  22. None
  23. None
  24. None
  25. …17 million others…

  26. None
  27. emerged from SproutCore (originally developed by Apple for

  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=

  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!