Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Don't worry, Ruby! We still love you.

Don't worry, Ruby! We still love you.

With the rise of client-side frameworks you might wonder if your days using Ruby are numbered. You came to Ruby for its expressiveness and beauty. You don’t want to leave that completely behind. Luckily, you don’t have to. With a nod to the Single Responsibility Principle we all love, this talk looks at how to leverage a front-end framework like Ember.js to handle application state at the UI layer and leave Ruby or Rails to do what it does best — everything else. Something to keep in mind: that everything else is the heart of your entire app.

Chris Ball

March 10, 2015
Tweet

More Decks by Chris Ball

Other Decks in Programming

Transcript

  1. What We’ll Cover History: Rails + JavaScript The problems with

    Rails Views SRP: UI vs. Domain Layers Why Ember? Changes to developer workflow # # # # #
  2. link_to_remote 'refresh emails', :update => 'emails' RJS - Ignore the

    fact its JS. page.insert_html :bottom, :tasks, :partial => 'task', :object => Task.new
  3. Allows you to execute JavaScript from a server rendered view.

    Still the “preferred” Rails way. js.erb (aka sprinkles)
  4. “Backbone.js gives structure to web applications by providing models with

    key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”
  5. Rails is slow at rendering. Does this look familiar? Completed

    200 OK in 1749ms (Views: 1725.7ms | ActiveRecord: 23.3ms)
  6. Solution 2: Turbolinks AJAX every request, replace <body> with new

    html leave the rest as is. Option ————
  7. js.erb scatters code JavaScript code for an action can be

    in multiple places. js.erb or event listener/function?
  8. How do we store state? * In the DOM with

    data-whatever * On the server (session, db) * Set JavaScript variables on page
  9. Let Rails handle the Domain Layer. “The heart of your

    app” “The shit that gets you paid” “The special sauce”
  10. The UI Layer * Remove logic from DOM and callbacks

    * Bring structure to application state (big!) * Handle css, JavaScript, images, fonts * UI = 1st class citizen, not leftover thought
  11. The Domain Layer * Handle API Requests * Database access

    * Background tasks * Algorithms, calculations * Whatever makes your app special
  12. A nod to SRP Bucket 1: UI Layer (front-end framework)

    Bucket 2: Domain Layer (Rails) Bring structure to application state Make the UI a first class citizen ⋆ ⋆ ⋆ ⋆
  13. Rails inspired features Generator in ember-cli: > ember g resource

    Post > ember g acceptance-test “User reads posts” helpers in templates, link-to, partials, etc.
  14. ES6 support out of the box Eliminates the need for

    CoffeeScript and adds additional features. http:/babeljs.io
  15. Start with the UI. http-mocks allow you to mock out

    API so you can focus on the UI Layer first, and the Domain Layer second.
  16. Write less code. If not defined, Ember will generate code

    by default for Routes and Controllers.
  17. addons ≈ gems Ember addons are very similar in concept

    to gems. http://emberaddons.com http://emberobserver.com
  18. Why Ember? Conventions = powerful Rails inspired features, feel at

    home Ember Inspector Map URLs -> state, proxy ES6 Support Easy to start with mocked API write less code, add ons $@#% that’s awesome! ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆ ⋆
  19. sortBy: ['createdAt:desc'], sortedMessages: Ember.computed.sort('model', 'sortBy'), unreadMessages: Ember.computed.filterBy('messages', 'read', false) Ember

    Snippets {{#with sender as user}} {{partial 'users/user-info'}} {{/with}} {{#link-to "message" message classNames="read-message-link" classNameBindings="message.read:read"}}
  20. messages: DS.hasMany('message', { async: true, inverse: 'recipient' }), fullName: function()

    { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') markAsRead: function() { if (!this.get('read')) { this.set('read', true); this.save(); } } } Ember Snippets
  21. ember-cli-rails Render ember-cli apps from within Rails. Ability to transition

    an app in stages. https://github.com/rwz/ember-cli-rails
  22. Designers = Developers. Designers are more likely to write code.

    Handlebars easier to grasp than erb, designers know JavaScript.
  23. Repo / Deploy Overhead * single repo w/ front-end and

    backend dirs * separate repos, develop + deploy w/ proxy * separate repos, separate domains Multiple ways to split, what fits your team?
  24. Embrace a front-end framework! The sky is not falling. Not

    only can Ember and Rails/Ruby co-exist, they make an incredible team for app development.