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

Rails Without Views

Rails Without Views

A presentation I gave at RubyNation 2012. In it, I go over a few best practices for building real-world Backbone.js projects on top of Ruby on Rails.

Brennan Dunn

March 23, 2012
Tweet

More Decks by Brennan Dunn

Other Decks in Programming

Transcript

  1. Rails Without Views
    Building real-world Backbone.js
    applications on top of Rails

    View full-size slide

  2. “When I broke ground on
    Projector, my first real Backbone
    app, I went about everything the
    wrong way.”

    View full-size slide

  3. Backbone.View → ActionController::Base
    Backbone.MODEL → ACTIVERECORD::BASE
    Backbone.COLLECTION → ...has_many?

    View full-size slide

  4. “I was naïve. I was thinking too
    much like a hardened Rails
    developer.”

    View full-size slide

  5. “I was naïve. I was thinking too
    much like a hardened Rails
    developer.”
    Here’s how you can avoid this
    quicksand.

    View full-size slide

  6. BACKBONE 101 FOR RAILS
    DEVELOPERS

    View full-size slide

  7. “Views are sorta like controllers.
    They wrap themselves around
    DOM elements.”

    View full-size slide

  8. VIEWS ARE RESPONSIBLE FOR...
    ★ Rendering, or hijacking, a DOM element and its children
    ★ Responding to user input within the view’s associated element
    ★ Registering bindings on collections and model instances that affect
    the underlying DOM element
    ★ Templates != Backbone Views

    View full-size slide

  9. “Collections are managed lists of
    model objects.”

    View full-size slide

  10. COLLECTIONS ARE RESPONSIBLE FOR...
    ★ Fetching data from somewhere (a REST API, localStorage)
    ★ Map/Reduce functions to be performed on the collection
    ★ Emitting events related to items in the collection for listeners
    ★ Keeping contained items sorted

    View full-size slide

  11. “Models are objects wrapped
    around JSON.”

    View full-size slide

  12. MODELS ARE RESPONSIBLE FOR...
    ★ Providing computed properties on top of JSON objects
    ★ Providing query methods
    ★ Validating data set on the object
    ★ Synchronizing itself

    View full-size slide

  13. “The router connects URIs to
    application state.”

    View full-size slide

  14. THE WAY WE TRADITIONALLY HAVE
    WRITTEN RAILS APPLICATIONS

    View full-size slide

  15. Responsibilities of the
    SERVER
    Responsibilities of the
    CLIENT
    ★ Route URI to the appropriate
    handler
    ★ Do something with user input
    (like a form submit)
    ★ Authenticate sessions
    ★ Access control
    ★ Fetch stuff from a database or
    API
    ★ Render a template
    ★ Send back a document to the
    client (usually HTML)
    ★ Display received documents
    ★ Create new requests triggered
    by user input
    ★ Basic changes to the DOM

    View full-size slide

  16. THE WAY WE WRITE CLIENT-SIDE
    HEAVY APPLICATIONS

    View full-size slide

  17. Responsibilities of the
    SERVER
    Responsibilities of the
    CLIENT
    ★ Route URI to the appropriate
    handler
    ★ Do something with user input
    (like a form submit)
    ★ Authenticate sessions
    ★ Access control
    ★ Fetch stuff from a database or
    API
    ★ Render a template
    ★ Send back a document to the
    client (JSON)
    ★ Route URI to the appropriate
    handler
    ★ Fetch JSON documents from
    the server
    ★ Render templates
    ★ Modify templates according to
    user permissions
    ★ Attach event handlers to the
    resulting DOM
    ★ Send JSON to the backend

    View full-size slide

  18. Responsibilities of the
    CLIENT
    ★ Route URI to the appropriate
    handler
    ★ Fetch JSON documents from
    the server
    ★ Render templates
    ★ Modify templates according to
    user permissions
    ★ Attach event handlers to the
    resulting DOM
    ★ Send JSON to the backend
    Responsibilities of the
    CLIENT
    ★ Display received documents
    ★ Create new requests triggered
    by user input
    ★ Basic changes to the DOM

    View full-size slide

  19. Responsibilities of the
    SERVER
    ★ Route URI to the appropriate
    handler
    ★ Do something with user input
    (like a form submit)
    ★ Authenticate sessions
    ★ Access control
    ★ Fetch stuff from a database or
    API
    ★ Render a template
    ★ Send back a document to the
    client (JSON)
    Responsibilities of the
    SERVER
    ★ Route URI to the appropriate
    handler
    ★ Do something with user input
    (like a form submit)
    ★ Authenticate sessions
    ★ Access control
    ★ Fetch stuff from a database or
    API
    ★ Render a template
    ★ Send back a document to the
    client (usually HTML)

    View full-size slide

  20. “Creating a single-page
    application doesn’t mean less code
    on the server, more code on the
    client. Not much changes on the
    server.”

    View full-size slide

  21. FOUR CORE CONCEPTS
    TO KEEP YOU OUT OF THE MUD.

    View full-size slide

  22. BACKBONE MODELS DON’T INHERIT
    FROM ACTIVERECORD.

    View full-size slide

  23. “You can only work with what
    your backend provides.”
    “Objects in your collection should
    be based on what your client
    needs, not what’s in your
    database.”

    View full-size slide

  24. “You can only work with what
    your backend provides.”
    “Objects in your collection should
    be based on what your client needs
    to present, not what’s available.”

    View full-size slide

  25. GET /pROJECTS
    GET /PROJECTS/ARCHIVED

    View full-size slide

  26. RETHINK THE WAY YOU PRESENT
    DATA RELATIONSHIPS.

    View full-size slide

  27. “My REST controllers don’t
    always represent database
    resources.”

    View full-size slide

  28. AVOID:
    GET /STORIES
    GET /STORIES/1/COMMENTS
    GET /STORIES/1/TIME_LOGS

    View full-size slide

  29. “Eager load to minimize requests.”
    “Lazy load (make more requests)
    for detail views.”

    View full-size slide

  30. “Eager load to minimize requests.”
    “Lazy load (make more requests)
    for detail views.”

    View full-size slide

  31. EXPOSE THE CURRENT SESSION
    TO THE CLIENT.

    View full-size slide

  32. “Store your current user in a
    globally accessible variable .”

    View full-size slide

  33. NEVER TRUST YOUR
    CLIENT.

    View full-size slide

  34. “Access control needs to be
    mirrored on the client and server.”

    View full-size slide

  35. THANKS!
    @brennandunn
    projectorpm.com
    wearetitans.net

    View full-size slide