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
   

   View Slide

2. cball_
   Chris Ball
   Ǧ
   

   View Slide

3. This talk is NOT…
   cball_
   

   View Slide

4. Not to debate front-end
   frameworks.
   cball_
   

   View Slide

5. Not to debate server-side
   alternatives.
   cball_
   

   View Slide

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

   View Slide

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

   View Slide

8. ❤
   cball_
   

   View Slide

9. conventions.
   ❤
   cball_
   

   View Slide

10. conventions.
    ❤
    cball_
    

    View Slide

11. Therefore
    cball_
    

    View Slide

12. ❤
    cball_
    

    View Slide

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

    View Slide

14. Productivity++
    cball_
    

    View Slide

15. Great Tooling
    (you're used to this)
    rails serve
    rails test
    rails generate
    rails new
    bundle gem
    cball_
    

    View Slide

16. Great Tooling
    ember-cli will feel familiar!
    ember serve
    ember test
    ember generate
    ember new
    ember addon
    cball_
    

    View Slide

17. ember s
    ember t
    ember g
    ember new
    ember addon
    cball_
    Great Tooling
    ember-cli will feel familiar!
    

    View Slide

18. Much of what you know
    has direct equivalents.
    cball_
    

    View Slide

19. cball_
    Router
    Model
    View
    ActiveRecord
    Gems
    Controller
    Router
    Model
    Template
    Ember Data
    Addons
    Route
    

    View Slide

20. cball_
    link_to
    yield
    things.each do |t|
    helpers
    pluralize
    link-to
    outlet
    each things as |t|
    helpers
    pluralize
    

    View Slide

21. The Ember Inspector
    

    View Slide

22. Easily handle complicated
    async javascript in tests.
    cball_
    

    View Slide

23. visit('/');
    click('.button');
    fillIn('.name', 'Chris');
    click('.another');
    andThen(()=> {
    let something = $('h2').text();
    assert.equal(something, 'yay');
    });
    cball_
    

    View Slide

24. Get that “$@#% that’s
    awesome!” moment you
    got learning Rails.
    cball_
    

    View Slide

25. Necessary mindset
    adjustments.
    cball_
    

    View Slide

26. Request + Response.
    cball_
    ɂ Ȑ
    

    View Slide

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

    View Slide

28. Keep memory in mind.
    cball_
    

    View Slide

29. Great browser-provided tools
    cball_
    

    View Slide

30. Controllers fetch data.
    cball_
    class SongController
    def show
    @song = Song.find(params[:id])
    end
    end
    

    View Slide

31. Routes fetch data.
    cball_
    // app/routes/song.js
    export default Ember.Route.extend({
    model(params) {
    return this.store.findRecord('song', params.id);
    }
    });
    

    View Slide

32. Routes fetch data.
    cball_
    {{! app/templates/song.hbs }}
    My amazing song is {{model.name}}
    

    View Slide

33. Rendering is slow.
    Does this look familiar?
    Completed 200 OK in 1749ms (Views: 1725.7ms | ActiveRecord: 23.3ms)
    cball_
    

    View Slide

34. Caching is the only way to
    speed it up.
    cball_
    

    View Slide

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

    View Slide

36. JavaScript is something
    to sprinkle in.
    cball_
    

    View Slide

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

    View Slide

38. They start over.
    

    View Slide

39. Focus on URLs.
    Ember Router maps URL to application state.
    Helps avoid the refresh issue.
    cball_
    

    View Slide

40. Rails manages assets.
    cball_
    css
    js
    images
    

    View Slide

41. Asset Pipeline =
    Ember will handle assets during the build
    process before deploying.
    cball_
    

    View Slide

42. Nest related API
    resource URLs.
    cball_
    
    

    View Slide

43. /users/23/songs/11
    cball_
    

    View Slide

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

    View Slide

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

    View Slide

46. Run jQuery hooks
    on page load.
    cball_
    

    View Slide

47. Components.
    cball_
    

    View Slide

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

    View Slide

49. cball_
    
    {{title}}
    {{yield}}
    Edit title: {{input type="text" value=title}}
    
    Components.
    

    View Slide

50. Use jQuery code only in
    a component's
    didInsertElement hook.
    cball_
    

    View Slide

51. Always, always add
    corresponding
    willDestroyElement hook.
    cball_
    

    View Slide

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

    View Slide

53. cball_
    "I JavaScript!"
    
    

    View Slide

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

    View Slide

55. Learn to JavaScript.
    cball_
    

    View Slide

56. Don't use CoffeeScript.
    cball_
    

    View Slide

57. ES6 support out
    of the box
    Eliminates the need for
    CoffeeScript and adds
    additional features.
    http:/babeljs.io
    

    View Slide

58. It's not enjoyable because
    you've fought with it.
    cball_
    

    View Slide

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

    View Slide

60. Use
    accepts_nested_attributes_for.
    cball_
    

    View Slide

61. Forget about
    accepts_nested_attributes_for.
    cball_
    

    View Slide

62. Make an ajax request that
    returns JavaScript to update a
    snippet in a view.
    cball_
    

    View Slide

63. js.erb
    cball_
    

    View Slide

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

    View Slide

65. Parts of mindset to
    keep?
    cball_
    

    View Slide

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

    View Slide

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
    

    View Slide

68. Too long, didn't listen.
    cball_
    more code!
    

    View Slide

69. cball_
    

    View Slide

70. cball_
    

    View Slide

71. cball_
    

    View Slide

72. cball_
    

    View Slide

73. cball_
    

    View Slide

74. cball_
    

    View Slide

75. cball_
    

    View Slide

76. cball_
    

    View Slide

77. What might change in
    your daily workflow?
    cball_
    

    View Slide

78. UI first. API after.
    cball_
    

    View Slide

79. cball_
    

    View Slide

80. Development
    cball_
    

    View Slide

81. 2 separate repositories.
    cball_
    

    View Slide

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

    View Slide

83. Continuous Integration
    cball_
    

    View Slide

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

    View Slide

85. Deployment
    cball_
    

    View Slide

86. cball_
    Heroku ember-cli buildpack
    - API_URL will set nginx proxy
    - Requires 2 heroku apps
    https://github.com/tonycoco/heroku-buildpack-ember-cli
    

    View Slide

87. cball_
    ember-cli-deploy
    By default, Rails serves
    index.html from Redis, assets
    from S3.
    http://ember-cli.github.io/ember-cli-deploy
    

    View Slide

88. cball_
    capistrano
    Can be set to deploy front-end
    and back-end separately.
    http://capistranorb.com
    

    View Slide

89. Final thoughts
    cball_
    

    View Slide

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

    View Slide

91. Keep using Rails for a great
    API and for what makes
    your app special.
    cball_
    

    View Slide

92. Start enjoying front-end
    development.
    cball_
    

    View Slide

93. cball_
    ❤
    

    View Slide

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
    

    View Slide

95. cball_
    Thanks!
    

    View Slide