Single Page Web Apps with Backbone.js and Rails
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Single Page Web Apps with Backbone.js and Rails

on

  • 13,993 views

My talk at RubyConf India 2011

My talk at RubyConf India 2011

Statistics

Views

Total Views
13,993
Views on SlideShare
10,733
Embed Views
3,260

Actions

Likes
25
Downloads
208
Comments
1

9 Embeds 3,260

http://devblog.supportbee.com 2846
http://speakerrate.com 387
http://localhost 10
http://www.techgig.com 4
http://192.168.0.108 4
https://twimg0-a.akamaihd.net 3
http://translate.googleusercontent.com 3
url_unknown 2
http://seekr-artemis.heroku.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Mark it!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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
  • 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
  • How many of you have used jQuery?\n
  • If you have to select a few elements and show/hide them or apply a css property etc\n
  • Something like Gmail. Incoming Emails affect multiple items in the view etc. \n
  • \n
  • 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
  • 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
  • \n
  • Only communicate data with the server after being loaded. \n
  • Only communicate data with the server after being loaded. \n
  • Only communicate data with the server after being loaded. \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Created by Charles Jolley, Used in Mobile Me, iWork.com, In Strobe Inc\n
  • Created by the founders of 280 North Inc. Used in GoMockingBird, Github Issues\n
  • \n
  • \n
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
  • \n
  • \n
  • \n
  • Unlike a Rails’ 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
  • \n
  • \n
  • \n
  • \n
  • This is a collection of model SB.Models.TicketSummary\n
  • \n
  • \n
  • Views also instantiate other views, which can render templates\n
  • Event binding for click happens here\nRenders a handlebars’ template\nThe model stores a reference to this view. This reference can be used to remove/update view on changes to the attribute\n
  • \n
  • Logicless template. Simple JSON parsing and if/else\nnameOrEmail is a helper function that you can register\n
  • \n
  • \n
  • Models inherit their urls from collections. For example\n
  • \n
  • \n
  • \n
  • The openTicket route will be fired when the ticket is clicked\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
  • 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
  • \n
  • \n
  • \n
  • \n
  • Though you can keep this and add some parsing code to parse the json out on client side\n
  • \n
  • \n
  • \n
  • Look at Rest in Practice or Roy Fielding’s blog for more info\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Single Page Web Apps with Backbone.js and Rails Presentation Transcript

  • 1. SINGLE PAGE APPS WITHBACKBONE.JS & RAILS Prateek Dayal SupportBee.com
  • 2. HOW I LEARNED TO STOP WORRYING AND LOVE JAVSCRIPT!
  • 3. BUT I LOVE JQUERY!
  • 4. VANILLA JQUERY IS GREAT FOR A SIMPLE WEBSITE
  • 5. BUT YOU WANT TO BUILD ASINGLE PAGE APPLICATION
  • 6. Unless you’re a really fastidious coder, some sort oflibrary to help structure large-scale JavaScriptapplications is important -- it’s far too easy todegenerate into nested piles of jQuery callbacks, alltied to concrete DOM elements. Jeremy Ashkenas
  • 7. ;)
  • 8. COMPLEX SINGLE PAGE APPS HAVE
  • 9. • All of the client logic in Javascript
  • 10. • All of the client logic in Javascript• Updates to many parts of the UI on changes to data
  • 11. • All of the client logic in Javascript• Updates to many parts of the UI on changes to data• Templating on the client side
  • 12. TO NOT GO CRAZYBUILDING IT, YOU NEED
  • 13. •A MVC like pattern to keep the code clean
  • 14. •A MVC like pattern to keep the code clean•Atemplating language like HAML/ERB to easilyrender view elements
  • 15. •A MVC like pattern to keep the code clean•Atemplating language like HAML/ERB to easilyrender view elements•A better way to manage events and callbacks
  • 16. •A MVC like pattern to keep the code clean•Atemplating language like HAML/ERB to easilyrender view elements•A better way to manage events and callbacks•A way to preserver browser’s back button
  • 17. •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 :)
  • 18. FORTUNATELY, THERE IS HELP!
  • 19. SproutCore
  • 20. Cappuccino
  • 21. BUT THEY ARE BIG
  • 22. AND HAVE ALEARNING CURVE
  • 23. • 3.9 kb packed and gzipped
  • 24. • 3.9 kb packed and gzipped• Only dependency is underscore.js
  • 25. • 3.9 kb packed and gzipped• Only dependency is underscore.js• You need jQuery or Zepto for Ajax
  • 26. • 3.9 kb packed and gzipped• Only dependency is underscore.js• You need jQuery or Zepto for Ajax• Annotated source code
  • 27. MVC
  • 28. MODELS, VIEWS & COLLECTIONS
  • 29. MODELS
  • 30. MODELS• Data is represented as Models
  • 31. MODELS• Data is represented as Models• Can be Created, Validated, Destroyed & Persisted on Server
  • 32. MODELS• Data is represented as Models• Can be Created, Validated, Destroyed & Persisted on Server• Attribute changes trigger a ‘change’ event
  • 33. SB.Models.TicketSummary = Backbone.Model.extend({ id: null, subject: null, name: ticket,});
  • 34. COLLECTIONS
  • 35. COLLECTIONS•A collection of models
  • 36. COLLECTIONS•A collection of models• Triggers events like add/remove/refresh
  • 37. COLLECTIONS•A collection of models• Triggers events like add/remove/refresh• Can fetch models from a given url
  • 38. 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
  • 39. SB.Collections.TicketList = Backbone.Collection.extend({ model: SB.Models.TicketSummary, url: "/tickets", name: "tickets", initialize: function(models, options){ // Init stuff if you want }});
  • 40. VIEWS
  • 41. VIEWS• They are more like Rails’ Controllers
  • 42. VIEWS• They are more like Rails’ Controllers• Responsiblefor instantiating Collections and binding events that update the UI
  • 43. 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); }});
  • 44. 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; } });
  • 45. HANDLEBARS!
  • 46. {{#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}}
  • 47. URLS
  • 48. URLS• Collections can have a url
  • 49. URLS• Collections can have a url• Models can have a url or they can derive it from collection’s url
  • 50. ◦ create → POST   /collection◦ read → GET   /collection[/id]◦ update → PUT   /collection/id◦ delete → DELETE   /collection/id
  • 51. FINALLY, CONTROLLERS
  • 52. • Used for setting up the routes
  • 53. • Used for setting up the routes• You can add new routes during runtime
  • 54. 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 : newSB.Models.Ticket({id : id})}); $("#list").hide(); $("#ticket").html(view.el); $("#ticket").show(); }});
  • 55. window.controller = new SB.Controllers.AgentHome
  • 56. • Initiates a new controller instance
  • 57. • Initiates a new controller instance• which matches the dashboard route
  • 58. • Initiates a new controller instance• which matches the dashboard route• and creates a instance of TicketListView
  • 59. • Initiates a new controller instance• which matches the dashboard route• and creates a instance of TicketListView• and a TicketList collection is created
  • 60. • TicketList collection fetches tickets and triggers the refresh event
  • 61. • 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
  • 62. • Every Ticket Summary row has an onclick handler
  • 63. • Every Ticket Summary row has an onclick handler• which changes to url to #ticket_id
  • 64. • Every Ticket Summary row has an onclick handler• which changes to url to #ticket_id• which matches the openTicket route
  • 65. SERVER SIDE
  • 66. ActiveRecord::Base.include_root_in_json = false
  • 67. • Youcan use as_json to customize the json responses
  • 68. • Youcan use as_json to customize the json responses• Or you can use Restfulie
  • 69. • Youcan use as_json to customize the json responses• Or you can use Restfulie• Restfulie lets you easily put links in representations too
  • 70. 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 } endend
  • 71. NOT JUST FOR API BACKED MODELS
  • 72. //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 } ]}));
  • 73. TESTING
  • 74. JASMINE FTW!
  • 75. 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");});
  • 76. SINON FOR MOCKS/STUBS
  • 77. 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);});
  • 78. QUESTIONS?prateek@supportbee.com @prateekdayal http://supportbee.com