Overview of Backbone

1,943 views

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,943
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×