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.

Transcript

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. cball_
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 song)
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}} Components.
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. cball_
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!