Backbone.js is a small JavaScript library that helps organize front-end code using an MVC pattern. It does not dictate HTML structure or widgets, but rather provides structure for JavaScript code and ties together DOM events, views, and CRUD operations on models and collections. Key components include controllers, views, models, collections, and support for RESTful persistence via Backbone.sync and JSON. Templates can be used to render views and manage data display, and various templating engines are supported.

1. Introduction to
for Rails developers
Alex Korban

2. What is it?
• Small JavaScript library to organise your UI and
data on the client
• Follows the MVC pattern
• Doesn't provide widgets or HTML structure

3. Why use it?
• Libraries like jQuery don't help with code
structure
• Doesn't assume anything about your UI
• Flexible with regards to data persistence
• You can use an HTML templating engine of your
choice
• Only hard dependency is Underscore.js
• Only 3.9kB minified

4. What's in it?
• Controller
• View
• Model
• Collection
• Hash change and history handling

5. Controller
class AppController extends Backbone.Controller
routes: handler method
"users": "users"
URL hash "users/:cid/edit": "edit"
fragment parameter part
users: ->
@view = new UserListView
edit: (cid) ->
@view = new EditUserView { model: Users.getByCid(cid) }
$ ->
window.app = new AppController()
Backbone.history.start()

6. View
class UsersView extends Backbone.View
tagName: "div" the view's DOM element parameters
id: "users"
events: DOM event handler
"click .add_user": "click_add_user"
event
type selector
constructor(@users): ->
@template = _.template("HTML string with params to interpolate")
@users.bind "add", @add_user
Bind collection event to view method
@users.bind "refresh", @render
render: ->
$(@el).html @template(@users)
click_add_user: ->
@users.add() Triggers a call to add_user
add_user: (user) =>
view = new UserView {model: user}
@el.append view.render()

7. Templates
• Since Underscore.js is included, you can use
_.template which provides variable interpolation
and arbitrary JavaScript execution
• You can use a different templating engine such
as Mustache.js, Haml-js or Eco
• You could even insert elements into the DOM
instead of using templates

8. Managing templates
• One option is to use Jammit (documentcloud.github.com/jammit)
• JavaScript templates are stored alongside Rails views:
// app/views/users/user.jst
<div class = "user">
<h2>Name: <%= name %></h2>
<em>Hometown: <%= birthplace %></em>
</div>
• Jammit allows different templating engines
• Jammit concatenates, compresses and precompiles templates
• Then you can access a template on the client side like this:
JST[“users/user”]({name: “Joe”, birthplace: “Picton”})

9. Models and collections
class User extends Backbone.Model
is_invited: ->
@get("invitation_token") != null
get() and set() provide access to the attribute hash
class UserCollection extends Backbone.Collection
model: User
url: "/users"
users = new UserCollection()
users.fetch() # loads models from the server
users.add [{name: "John"}, {name: "Mary"}] Adds 2 User instances to the
collection because model is
is_invited = users.at(0).is_invited()
defined in UserCollection

10. Persistence
• Backbone.sync() is called every time Backbone reads or saves a model
to the server
• The default is RESTful JSON requests using $.ajax():
create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
delete → DELETE /collection/id
• Responding to a “read” request: send down an array of model attribute
objects
• Responding to a “create” or “update”: send the attributes of the model
changed by the server
• You can override sync() to use XML or LocalStorage

11. Persistence & Rails
• With JSON persistence, your Rails update method might be:
def update
user = User.find params[:id]
user.update_attributes params
render json: user
end
• Set Backbone.emulateHTTP = true to replace PUT and
DELETE requests with a POST + _method parameter
• Set config.active_record.include_root_in_json = false
or override parse() in Backbone models (see
gist.github.com/957474 for an example)

12. Initialising data
• One option is to include the data when rendering the Rails view:
/ index.haml
:javascript Supplied by a Rails controller
this.users.refresh(#{@users.to_json(only: User::JSON_FIELDS)});
this.checklists.refresh(#{@checklists.to_json});
This just sets collection data from the argument
#content
• The other option is to get the data on page load:
:javascript
$(function() {
this.users.fetch(); This performs an AJAX request
this.checklists.fetch();
});
• Your UI will need to handle the delay in loading the data
• You probably want to preload just enough data to display the initial page, and load the rest
using .fetch() as needed

13. Alternatives
• Sproutcore (sproutcore.com)
• Cappuccino (cappuccino.org)
• KnockoutJS (knockoutjs.com)
• JavaScriptMVC (javascriptmvc.com)
• Sammy.js (sammyjs.org)

14. Questions?
Documentation: documentcloud.github.com/backbone
These slides: devblog.aoteastudios.com