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

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

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

No content

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

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

BACKBONE 101 FOR RAILS DEVELOPERS

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

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

“Collections are managed lists of model objects.”

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

“Models are objects wrapped around JSON.”

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

“The router connects URIs to application state.”

THE WAY WE TRADITIONALLY HAVE WRITTEN RAILS APPLICATIONS

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

THE WAY WE WRITE CLIENT-SIDE HEAVY APPLICATIONS

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

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

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)

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

No content

No content

FOUR CORE CONCEPTS TO KEEP YOU OUT OF THE MUD.

BACKBONE MODELS DON’T INHERIT FROM ACTIVERECORD.

“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.”

“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.”

GET /pROJECTS GET /PROJECTS/ARCHIVED

RETHINK THE WAY YOU PRESENT DATA RELATIONSHIPS.

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

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

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

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

EXPOSE THE CURRENT SESSION TO THE CLIENT.

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

NEVER TRUST YOUR CLIENT.

No content

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

THANKS! @brennandunn projectorpm.com wearetitans.net