Prateek dayal backbonerails-110528024926-phpapp02

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

Prateek dayal backbonerails-110528024926-phpapp02

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Prateek dayal backbonerails-110528024926-phpapp02 (20)

More from Revath S Kumar (11)

Recently uploaded (20)

Prateek dayal backbonerails-110528024926-phpapp02

Editor's Notes