Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Backbone                          John AshmeadWednesday, May 2, 2012                   1
MVC Abstraction Layer                   • Events                   • Models                   • Views                   • ...
Events                   • Used for backbone’s events                   • On, off, trigger                   • You can rol...
Event calls    object.on(event, callback, [context]);    // aka bind    object.off([event], [callback],    [context]);    ...
Models                   • A unique ‘cId’ supplied, you set ‘id’                   • “change” events issued when you use g...
Model calls    var MasterPiece =    Backbone.Model.extend({        option1: value1,        initialize: function(arg1, …) {...
RESTful interface            • “Backbone.sync” is basic call            • Sends server a “POST”, “GET”, “PUT”, or         ...
Views                   • Always gets a default ‘el’ DOM element                   • Has view.$el defined as $(view.el) as ...
View code     var Picture = Backbone.View.extend({       render: function(eventName) {          this.$el.html(this.templat...
Collections                   • Ordered sets of models                   • Can be the “model” in a view                   ...
Underscore                   • Each, map, find, filter, reject,…                   • First, last, flatten, uniq, …           ...
Routers                   • Keeps a map of hashtags to functions                   • Calls the function                   ...
Router code            var Dispatcher =            Backbone.Router.extend({              routes: {                 “help”:...
More than one way to do it         For views: model.view or         model.views[], or fire events, or         create “cont...
More than one place that’s                using it                   • LinkedIn Mobile                   • Foursquare     ...
More than one place                          it’s documented               • http://documentcloud.github.com/backbone/    ...
Presented for your                             consideration:                              • Takes care of basics of MVC  ...
Backbone.jsjohn.ashmead@ashmeadsoftware.com   Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012                        ...
Upcoming SlideShare
Loading in …5
×

Overview of Backbone

2,008 views

Published on

What Backbone.js is, how to use it in building websites, MVC architecture, RESTful abstractions, …

Published in: Technology, Business
  • Be the first to comment

Overview of Backbone

  1. 1. Backbone John AshmeadWednesday, May 2, 2012 1
  2. 2. MVC Abstraction Layer • Events • Models • Views • Collections • Routersjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 2
  3. 3. Events • Used for backbone’s events • On, off, trigger • You can role your own, e.g. “selected:true” • Simple linked list • Per instance • Mixed into Models,Views, Collections, & Routersjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 3
  4. 4. Event calls object.on(event, callback, [context]); // aka bind object.off([event], [callback], [context]); // aka unbind object.trigger(event, [*args]); // event = name[:namespace]john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 4
  5. 5. Models • A unique ‘cId’ supplied, you set ‘id’ • “change” events issued when you use get, set to change (you can bypass) • toJSON, fetch, parse, clone, previous, previousAttributes, save, destroy, validate, …john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 5
  6. 6. Model calls var MasterPiece = Backbone.Model.extend({ option1: value1, initialize: function(arg1, …) {} }); masterPiece1 = new MasterPiece(); masterPiece1.get(option1); masterPiece1.set(option1, value1);john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 6
  7. 7. RESTful interface • “Backbone.sync” is basic call • Sends server a “POST”, “GET”, “PUT”, or “DELETE”, depending on whether you have requested a create, retrieve, update, or delete. • If you define MasterPiece.url(), sync will talk to url’s of the form it returns • Example: /masterpieces/1 • “isNew” tracks status on clientjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 7
  8. 8. Views • Always gets a default ‘el’ DOM element • Has view.$el defined as $(view.el) as well • Use “setElement” to change its element • Instantiate “render” method to get it to workjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 8
  9. 9. View code var Picture = Backbone.View.extend({ render: function(eventName) { this.$el.html(this.template( this.model.toJSON())); return this; }, events: {“change”: “render”}, template: _.template(“<div><%= title =%></ div>”), close: { this.$el.unbind(); this.$el.empty(); }); var picture1 = new Picture({ model: monaLisa1 });john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 9
  10. 10. Collections • Ordered sets of models • Can be the “model” in a view • Can be included in a model • Usual functions, including most of Underscore • Models have a “collection” property, so only one collection per modeljohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 10
  11. 11. Underscore • Each, map, find, filter, reject,… • First, last, flatten, uniq, … • Memoize, delay, throttle, … • Keys, values, extend, clone, defaults, …john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 11
  12. 12. Routers • Keeps a map of hashtags to functions • Calls the function • Fires the event • Uses the “hashchange” event from browser or else polls the current locationjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 12
  13. 13. Router code var Dispatcher = Backbone.Router.extend({ routes: { “help”: “help”, “search/:query”: “search” }, help: function(){}, search: function(query){…} ); Backbone.history.start(); //magic <a href=”#/search/daVinci” /> dispatcher1.search(“daVinci”);john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 13
  14. 14. More than one way to do it For views: model.view or model.views[], or fire events, or create “controller” object to mediate, … For sync: can sync per model, send sets of requests, … For events: can mixin to any JS object, create custom events, … For render: can use templates, direct DOM manip, jQuery UI, …john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 14
  15. 15. More than one place that’s using it • LinkedIn Mobile • Foursquare • Khan Academy • Groupon Now! • Pandorajohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 15
  16. 16. More than one place it’s documented • http://documentcloud.github.com/backbone/ • http://documentcloud.github.com/backbone/ docs/backbone.html • http://backbonetutorials.com/ • http://blog.galk.me/post/17139384615/backbone- js-tutorial-create-a-simple-twitter-searchjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 16
  17. 17. Presented for your consideration: • Takes care of basics of MVC • Small, clean, & friendly code • Flexible • Reduces need to figure this stuff out yourselfjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 17
  18. 18. Backbone.jsjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 18

×