Download as KEY, PPTX
![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;
}
});](https://image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-50-2048.jpg)
![◦ create → POST /collection
◦ read → GET /collection[/id]
◦ update → PUT /collection/id
◦ delete → DELETE /collection/id](https://image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-56-2048.jpg)
![//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'
}
]
}));](https://image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-83-2048.jpg)
![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);
});](https://image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-88-2048.jpg)
![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;
}
});](https://crownmelresort.com/image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-50-2048.jpg)
![◦ create → POST /collection
◦ read → GET /collection[/id]
◦ update → PUT /collection/id
◦ delete → DELETE /collection/id](https://crownmelresort.com/image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-56-2048.jpg)
![//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'
}
]
}));](https://crownmelresort.com/image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-83-2048.jpg)
![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);
});](https://crownmelresort.com/image.slidesharecdn.com/backbonerails-110528024926-phpapp02/75/Single-Page-Web-Apps-with-Backbone-js-and-Rails-88-2048.jpg)
Uploaded byPrateek Dayal
Single Page Web Apps with Backbone.js and Rails
This document discusses using Backbone.js to build single page applications with Rails. It describes how Backbone implements an MVC pattern with Models, Collections, Views and Controllers. Models represent data and trigger events on changes. Collections contain models and trigger add/remove events. Views are responsible for rendering templates and binding events. Controllers set up routes and match URLs to views. The document provides examples of implementing tickets in a support app using Backbone with Rails, Handlebars templating, and testing with Jasmine and Sinon mocks.
More Related Content
Similar to Single Page Web Apps with Backbone.js and Rails
Single Page Web Apps with Backbone.js and Rails
- 1. SINGLE PAGE APPS WITH BACKBONE.JS & RAILS Prateek Dayal SupportBee.com
- 2. HOW I LEARNEDTO STOP WORRYING AND LOVE JAVSCRIPT!
- 3. BUT I LOVEJQUERY!
- 4. VANILLA JQUERY ISGREAT FOR A SIMPLE WEBSITE
- 5. BUT YOU WANTTO BUILD A SINGLE PAGE APPLICATION
- 7. Unless you’re areally 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
- 8.
- 9. COMPLEX SINGLE PAGEAPPS HAVE
- 11. • All of the client logic in Javascript
- 12. • All of the client logic in Javascript • Updates to many parts of the UI on changes to data
- 13. • All of the client logic in Javascript • Updates to many parts of the UI on changes to data • Templating on the client side
- 14. TO NOT GOCRAZY BUILDING IT, YOU NEED
- 16. •A MVC like pattern to keep the code clean
- 17. •A MVC like pattern to keep the code clean •Atemplating language like HAML/ERB to easily render view elements
- 18. •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
- 19. •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
- 20. •A MVC like pattern to keep the code clean •A templating 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 • Easy Testing :)
- 21.
- 22.
- 23.
- 24. BUT THEY AREBIG
- 25. AND HAVE A LEARNINGCURVE
- 28. • 3.9 kb packed and gzipped
- 29. • 3.9 kb packed and gzipped • Only dependency is underscore.js
- 30. • 3.9 kb packed and gzipped • Only dependency is underscore.js • You need jQuery or Zepto for Ajax
- 31. • 3.9 kb packed and gzipped • Only dependency is underscore.js • You need jQuery or Zepto for Ajax • Annotated source code
- 32.
- 33. MODELS, VIEWS & COLLECTIONS
- 35.
- 36. MODELS • Data is represented as Models
- 37. MODELS • Data is represented as Models • Can be Created, Validated, Destroyed & Persisted on Server
- 38. MODELS • Data is represented as Models • Can be Created, Validated, Destroyed & Persisted on Server • Attribute changes trigger a ‘change’ event
- 39. SB.Models.TicketSummary = Backbone.Model.extend({ id: null, subject: null, name: 'ticket', });
- 40.
- 41. COLLECTIONS •A collection of models
- 42. COLLECTIONS •A collection of models • Triggers events like add/remove/refresh
- 43. COLLECTIONS •A collection of models • Triggers events like add/remove/refresh • Can fetch models from a given url
- 44. COLLECTIONS •A collection of models • Triggers events like add/remove/refresh • Can fetch models from a given url • Can keep the models sorted if you define a comparator function
- 45. SB.Collections.TicketList = Backbone.Collection.extend({ model: SB.Models.TicketSummary, url: "/tickets", name: "tickets", initialize: function(models, options){ // Init stuff if you want } });
- 46.
- 47. VIEWS • They are more like Rails’ Controllers
- 48. VIEWS • They are more like Rails’ Controllers • Responsiblefor instantiating Collections and binding events that update the UI
- 49. 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); } });
- 50. 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; } });
- 51.
- 52. {{#ticket}} <divclass="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}}
- 53.
- 54. URLS • Collections can have a url
- 55. URLS • Collections can have a url • Models can have a url or they can derive it from collection’s url
- 56. ◦ create → POST /collection ◦ read → GET /collection[/id] ◦ update → PUT /collection/id ◦ delete → DELETE /collection/id
- 57.
- 59. • Used for setting up the routes
- 60. • Used for setting up the routes • You can add new routes during runtime
- 61. 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(); } });
- 62. window.controller = newSB.Controllers.AgentHome
- 64. • Initiates a new controller instance
- 65. • Initiates a new controller instance • which matches the dashboard route
- 66. • Initiates a new controller instance • which matches the dashboard route • and creates a instance of TicketListView
- 67. • Initiates a new controller instance • which matches the dashboard route • and creates a instance of TicketListView • and a TicketList collection is created
- 69. • TicketList collection fetches tickets and triggers the refresh event
- 70. • 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
- 72. • Every Ticket Summary row has an onclick handler
- 73. • Every Ticket Summary row has an onclick handler • which changes to url to #ticket_id
- 74. • Every Ticket Summary row has an onclick handler • which changes to url to #ticket_id • which matches the openTicket route
- 75.
- 76.
- 78. • Youcan useas_json to customize the json responses
- 79. • Youcan useas_json to customize the json responses • Or you can use Restfulie
- 80. • Youcan useas_json to customize the json responses • Or you can use Restfulie • Restfulie lets you easily put links in representations too
- 81. 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
- 82. NOT JUST FORAPI BACKED MODELS
- 83. //window.AgentHomeController = newSB.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' } ] }));
- 84.
- 85.
- 86. 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"); });
- 87.
- 88. 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); });
- 89. QUESTIONS? prateek@supportbee.com @prateekdayal http://supportbee.com
Editor's Notes
- #2 Prateek Dayal, 4 years with Ruby on Rails, CoFounder SupportBee, A help desk Software for SME, like the ones using Basecamp, Also did Muziboo and run HackerStreet .. Will be talking about ... how many of you love js?\n
- #3 As Douglas Crockford puts it, most widely installed language but most misunderstood or not understood at all. A lot of care for Rails but not so much for JS etc\n
- #4 How many of you have used jQuery?\n
- #5 If you have to select a few elements and show/hide them or apply a css property etc\n
- #6 Something like Gmail. Incoming Emails affect multiple items in the view etc. \n
- #7 \n
- #8 Choosing a framework is like choosing Ruby on Rails. It gives you a set of conventions and a place to put things. A lot of good choices have been already made for you. \n
- #9 Most of this talk is based on our experience of building SupportBee, The ticketing page is a single page app like gmail. The code is from SB\n
- #10 \n
- #11 Only communicate data with the server after being loaded. \n
- #12 Only communicate data with the server after being loaded. \n
- #13 Only communicate data with the server after being loaded. \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 Created by Charles Jolley, Used in Mobile Me, iWork.com, In Strobe Inc\n
- #22 Created by the founders of 280 North Inc. Used in GoMockingBird, Github Issues\n
- #23 \n
- #24 \n
- #25 Done by Jeremy Ashkenas. He has also created coffeescript and jammit. Jammit and Backbone is part of the document cloud code. Basecamp mobile is built using Backbone\n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 You get a json of tickets and display it. And on clicking the ticket the url should be changed and ticket should be displayed\n
- #33 \n
- #34 \n
- #35 \n
- #36 Unlike a Rails&#x2019; model, there is no inbuilt support for Associations yet\nYou can initialize values in the initialize method\nextend helps you setup the prototype chain so that you can again inherit from this model\n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 This is a collection of model SB.Models.TicketSummary\n
- #42 \n
- #43 \n
- #44 Views also instantiate other views, which can render templates\n
- #45 Event binding for click happens here\nRenders a handlebars&#x2019; template\nThe model stores a reference to this view. This reference can be used to remove/update view on changes to the attribute\n
- #46 \n
- #47 Logicless template. Simple JSON parsing and if/else\nnameOrEmail is a helper function that you can register\n
- #48 \n
- #49 \n
- #50 Models inherit their urls from collections. For example\n
- #51 \n
- #52 \n
- #53 \n
- #54 The openTicket route will be fired when the ticket is clicked\n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 The controller has already appended the top level element to the list element on the page and has made it visible. So when tickets are populated, they show up on the page\n
- #61 The controller has already appended the top level element to the list element on the page and has made it visible. So when tickets are populated, they show up on the page\n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 Though you can keep this and add some parsing code to parse the json out on client side\n
- #67 \n
- #68 \n
- #69 \n
- #70 Look at Rest in Practice or Roy Fielding&#x2019;s blog for more info\n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n