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

Mind the Front-end Gap: Navigating the Path from Rails to Ember

Chris Ball
September 18, 2015

Mind the Front-end Gap: Navigating the Path from Rails to Ember

You’ve heard great things about Ember as a front-end framework and want to give it a try. You’re experienced with Rails but don’t know where to start in this brave new world. This talk will give actionable advice on how to best leverage your Rails experience to help ease your transition to Ember.

You’ll still use Rails for the API and domain layer, it’s awesome for that. But by leaning on Ember’s strong conventions just like you did with Rails, you’ll find that working on the front-end is much more enjoyable and productive when you’re not jumping through Russian Dolls and sprinkles of JavaScript.

Chris Ball

September 18, 2015

More Decks by Chris Ball

Other Decks in Programming


  1. Mind the Front-End Gap: Navigating the Path from

  2. cball_ Chris Ball Ǧ

  3. This talk is NOT… cball_

  4. Not to debate front-end frameworks. cball_

  5. Not to debate server-side alternatives. cball_

  6. Not to convince Sam Phippen to use SPA's. cball_

  7. Here's a quick pitch. (maybe this is you?) cball_

  8. ❤ cball_

  9. conventions. ❤ cball_

  10. conventions. ❤ cball_

  11. Therefore cball_

  12. ❤ cball_

  13. Conventions give us superpowers. http://realitypod.com/wp-content/uploads/2011/03/super-strength.jpg

  14. Productivity++ cball_

  15. Great Tooling (you're used to this) rails serve rails test

    rails generate <type> <name> rails new <project name> bundle gem <gem name> cball_
  16. Great Tooling ember-cli will feel familiar! ember serve ember test

    ember generate <type> <name> ember new <project name> ember addon <addon name> cball_
  17. ember s ember t ember g <type> <name> ember new

    <project name> ember addon <addon name> cball_ Great Tooling ember-cli will feel familiar!
  18. Much of what you know has direct equivalents. cball_

  19. cball_ Router Model View ActiveRecord Gems Controller Router Model Template

    Ember Data Addons Route
  20. cball_ link_to yield things.each do |t| helpers pluralize link-to outlet

    each things as |t| helpers pluralize
  21. The Ember Inspector

  22. Easily handle complicated async javascript in tests. cball_

  23. visit('/'); click('.button'); fillIn('.name', 'Chris'); click('.another'); andThen(()=> { let something =

    $('h2').text(); assert.equal(something, 'yay'); }); cball_
  24. Get that “$@#% that’s awesome!” moment you got learning Rails.

  25. Necessary mindset adjustments. cball_

  26. Request + Response. cball_ ɂ Ȑ

  27. All the things are rebuilt on every request. cball_

  28. Keep memory in mind. cball_

  29. Great browser-provided tools cball_

  30. Controllers fetch data. cball_ class SongController def show @song =

    Song.find(params[:id]) end end
  31. Routes fetch data. cball_ // app/routes/song.js export default Ember.Route.extend({ model(params)

    { return this.store.findRecord('song', params.id); } });
  32. Routes fetch data. cball_ {{! app/templates/song.hbs }} My amazing song

    is {{model.name}}
  33. Rendering is slow. Does this look familiar? Completed 200 OK

    in 1749ms (Views: 1725.7ms | ActiveRecord: 23.3ms) cball_
  34. Caching is the only way to speed it up. cball_

  35. Rendering is fast! New rendering engine based on lessons learned

    from React.
  36. JavaScript is something to sprinkle in. cball_

  37. On JavaScript heavy pages, what happens if user refreshes?

  38. They start over.

  39. Focus on URLs. Ember Router maps URL to application state.

    Helps avoid the refresh issue. cball_
  40. Rails manages assets. cball_ css js images

  41. Asset Pipeline = Ember will handle assets during the build

    process before deploying. cball_
  42. Nest related API resource URLs. cball_

  43. /users/23/songs/11 cball_

  44. /users/:user_id/songs/:song_id cball_ (shouldn't have to pass this to fetch single

  45. Keep resource API urls as flat as possible. cball_

  46. Run jQuery hooks on page load. cball_

  47. Components. cball_

  48. cball_ {{#each model as |post|}} {{#blog-post title=post.title}} {{post.body}} {{/blog-post}} {{/each}}

  49. cball_ <article class="blog-post"> <h1>{{title}}</h1> <p>{{yield}}</p> <p>Edit title: {{input type="text" value=title}}</p>

    </article> Components.
  50. Use jQuery code only in a component's didInsertElement hook. cball_

  51. Always, always add corresponding willDestroyElement hook. cball_

  52. If you use Bootstrap, don't blindly include their JavaScript. cball_

  53. cball_ "I JavaScript!"

  54. It's a little better with CoffeeScript. cball_

  55. Learn to JavaScript. cball_

  56. Don't use CoffeeScript. cball_

  57. ES6 support out of the box Eliminates the need for

    CoffeeScript and adds additional features. http:/babeljs.io
  58. It's not enjoyable because you've fought with it. cball_

  59. Lean on Ember's conventions instead of fighting. cball_

  60. Use accepts_nested_attributes_for. cball_

  61. Forget about accepts_nested_attributes_for. cball_

  62. Make an ajax request that returns JavaScript to update a

    snippet in a view. cball_
  63. js.erb cball_

  64. cball_ Templates are bound, so values update automatically.

  65. Parts of mindset to keep? cball_

  66. You'd be surprised at how many concepts still apply. cball_

  67. cball_ Small methods Collaborator objects SRP things hard = doing

    wrong TDD generators Acceptance tests Unit tests addons = gems blocks, yield CRUD Refactoring Brain ENV config reopen class DDAU = pass messages
  68. Too long, didn't listen. cball_ more code!

  69. cball_

  70. cball_

  71. cball_

  72. cball_

  73. cball_

  74. cball_

  75. cball_

  76. cball_

  77. What might change in your daily workflow? cball_

  78. UI first. API after. cball_

  79. cball_

  80. Development cball_

  81. 2 separate repositories. cball_

  82. Run both Rails server and Ember server for your app.

  83. Continuous Integration cball_

  84. You'll be running test suites for 2 apps. cball_

  85. Deployment cball_

  86. cball_ Heroku ember-cli buildpack - API_URL will set nginx proxy

    - Requires 2 heroku apps https://github.com/tonycoco/heroku-buildpack-ember-cli
  87. cball_ ember-cli-deploy By default, Rails serves index.html from Redis, assets

    from S3. http://ember-cli.github.io/ember-cli-deploy
  88. cball_ capistrano Can be set to deploy front-end and back-end

    separately. http://capistranorb.com
  89. Final thoughts cball_

  90. Ember is a brave, new world that's actually familiar. cball_

  91. Keep using Rails for a great API and for what

    makes your app special. cball_
  92. Start enjoying front-end development. cball_

  93. cball_ ❤

  94. cball_ https://thisthatandtheotherthang.wordpress.com/tag/fun-facts/ http://www.amazon.com/Matryoshka-Madness-13001-Ninja/dp/B003EED2LS Image Credits http://www.carbonated.tv/lifestyle/6-funny-dog-faces-to-get-your-day-started http://www.flaticon.com/free-icon/woman-head-side-silhouette_40809

  95. cball_ Thanks!