$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Chris Ball

Other Decks in Programming

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