Single Page Web Apps with Backbone.js and Rails

SINGLE PAGE APPS
WITH
BACKBONE.JS & RAILS
Prateek Dayal
SupportBee.com

HOW I LEARNED TO STOP
WORRYING
AND LOVE JAVSCRIPT!

VANILLA JQUERY IS GREAT
FOR A SIMPLE WEBSITE

BUT YOU WANT TO BUILD A
SINGLE PAGE APPLICATION

Unless you’re a really fastidious coder, some sort of
library to help structure large-scale JavaScript
applications is important -- it’s far too easy to
degenerate into nested piles of jQuery callbacks, all
tied to concrete DOM elements.

Jeremy Ashkenas

COMPLEX SINGLE PAGE APPS
HAVE

• All of the client logic in Javascript


• Updates to many parts of the UI on changes to
data


• Updates to many parts of the UI on changes to
data

• Templating on the client side

TO NOT GO CRAZY
BUILDING IT, YOU NEED

•A MVC like pattern to keep the code clean


•Atemplating language like HAML/ERB to easily
render view elements



•A better way to manage events and callbacks




•A way to preserver browser’s back button


•A templating language like HAML/ERB to easily


•A way to preserver browser’s back button

• Easy Testing :)

• 3.9 kb packed and gzipped


• Only dependency is underscore.js



• You need jQuery or Zepto for Ajax



• You need jQuery or Zepto for Ajax

• Annotated source code

MODELS

• Data is represented as Models

MODELS


• Can be Created, Validated, Destroyed & Persisted on Server

MODELS


• Can be Created, Validated, Destroyed & Persisted on Server

• Attribute changes trigger a ‘change’ event

SB.Models.TicketSummary = Backbone.Model.extend({
id: null,
subject: null,
name: 'ticket',
});

COLLECTIONS

•A collection of models

COLLECTIONS


• Triggers events like add/remove/refresh

COLLECTIONS



• Can fetch models from a given url

COLLECTIONS



• Can fetch models from a given url

• Can keep the models sorted if you deﬁne a comparator
function

SB.Collections.TicketList = Backbone.Collection.extend({
model: SB.Models.TicketSummary,

url: "/tickets",
name: "tickets",

initialize: function(models, options){
// Init stuff if you want
}
});

VIEWS

• They are more like Rails’ Controllers

VIEWS

• They are more like Rails’ Controllers

• Responsiblefor instantiating Collections and binding events
that update the UI

SB.Views.TicketListView = Backbone.View.extend({

tagName: 'ul',

initialize: function(){

this.ticketList = new SB.Collections.TicketList;

_.bindAll(this, 'addOne', 'addAll');

this.ticketList.bind('add', this.addOne);

this.ticketList.bind('refresh', this.addAll);

this.ticketList.bind('all', this.render);

this.ticketList.fetch();

},

addAll: function(){

this.ticketList.each(this.addOne);
},

addOne: function(ticket){

var view = new SB.Views.TicketSummaryView({model:ticket});

$(this.el).append(view.render().el);
}
});

SB.Views.TicketSummary = Backbone.View.extend({

initialize: function(){

_.bind(this, 'render');

if(this.model !== undefined){

this.model.view = this;

}
},

events: {

'click': 'openTicket'
},

openTicket: function(){

window.location = "#ticket/" + this.model.id;
},

render: function(){

$(this.el).html(SB.Views.Templates['tickets/summary']
(this.model.toJSON()));

return this;
}

});

{{#ticket}}
<div class="listing-cell name">
<p>{{nameOrEmail requester}} ({{replies_count}})</p>
</div>

<div class="listing-cell subject">

<a href="#{{id}}">

{{#unread}}

<b>{{subject}}</b>

{{/unread}}

{{^unread}}

{{subject}}

{{/unread}}

</a>
</div>
{{/ticket}}

URLS

• Collections can have a url

URLS

• Collections can have a url

• Models can have a url or they can derive it from collection’s
url

◦ create → POST /collection
◦ read → GET /collection[/id]
◦ update → PUT /collection/id
◦ delete → DELETE /collection/id

• Used for setting up the routes

• Used for setting up the routes

• You can add new routes during runtime

SB.Controllers.AgentHome = Backbone.Controller.extend({
routes: {

"": "dashboard", // http://app_url

":id": "openTicket" // http://app_url#id
},

dashboard: function(){

var view = new SB.Views.TicketListView;

$("#ticket").hide();

$("#list").html(view.el);

$("#list").show();
},

openTicket: function(id){

var view = new SB.Views.TicketView({model : new
SB.Models.Ticket({id : id})});

$("#list").hide();

$("#ticket").html(view.el);

$("#ticket").show();
}
});

window.controller = new SB.Controllers.AgentHome

• Initiates a new controller instance


• which matches the dashboard route



• and creates a instance of TicketListView



• and creates a instance of TicketListView

• and a TicketList collection is created

• TicketList
collection fetches tickets and triggers the
refresh event

• TicketList
collection fetches tickets and triggers the
refresh event

• Refresh handler renders a TicketSummary view for
each ticket and adds it to the top level element

• Every Ticket Summary row has an onclick handler


• which changes to url to #ticket_id


• which changes to url to #ticket_id

• which matches the openTicket route

ActiveRecord::Base.include_root_in_json = false

• Youcan use as_json to customize the json
responses

responses

• Or you can use Restfulie

responses

• Or you can use Restfulie

• Restfulie lets you easily put links in representations
too

collection(@items, :root => "items") do |items|
items.link "self", items_url

items.members do |m, item|
m.link :self, item_url(item)
m.values { |values|
values.name item.name
}
end
end

NOT JUST FOR API BACKED
MODELS

//window.AgentHomeController = new SB.Controllers.AgentHome;
window.mainView = new SB.Views.Main;
mainView.screens.add(new SB.Models.Screen({
title: 'Dashboard',
href: '#dashboard',
listings: [

{

title: 'New Tickets',

url: '/tickets?label=unanswered&replies=false'

},

{

title: 'Ongoing Tickets',

url: '/tickets?label=unanswered&replies=true'

},

{

title: 'Starred Tickets',

url: '/tickets?starred=true'

}
]
}));

beforeEach(function(){
var ticket = new SB.Models.TicketSummary({id: 1,

subject: "A Ticket",

replies_count: 0,

requester: {id : 1,

email: 'requester@example.com',

name: 'Requester',

thumbnail: 'thumbnail-url'}

});
this.view = new SB.Views.TicketSummary({model: ticket});
this.view.render();
});

it("should render a ticket summary correctly", function(){
expect($(this.view.el)).toHaveText(/A Ticket/);
expect($(this.view.el)).toHaveText(/Requester/);
});

it("should change the url on click", function(){
var currentLoc = window.location.toString();
$(this.view.el).click();
expect(window.location.toString()).toBe(currentLoc + "ticket#1");
});

beforeEach(function(){
this.server = sinon.fakeServer.create();
this.server.respondWith("GET", "/tickets_url_mock_server",

[200, { "Content-Type": "application/json" },

'{"tickets":[{"id": 1, "subject": "Ticket 1"},{"id": 2, "subject":
"Ticket 2"}]}'

]);
});

it("should instantiate view when tickets are fetched", function(){

var viewMock = sinon.mock(SB.Views);

viewMock.expects("TicketSummary").once().returns(new Backbone.View);
viewMock.expects("TicketSummary").once().returns(new Backbone.View);

var view = new SB.Views.TicketList({url: "/tickets_url_mock_server"});

this.server.respond();
viewMock.verify();
expect($(view.render().el).children().length).toBe(2);
});

QUESTIONS?

prateek@supportbee.com
@prateekdayal

http://supportbee.com

Single Page Web Apps with Backbone.js and Rails

More Related Content

What's hot (19)

Similar to Single Page Web Apps with Backbone.js and Rails (20)

Recently uploaded (20)

Single Page Web Apps with Backbone.js and Rails

Editor's Notes