Overview of Backbone
Upcoming SlideShare
Loading in...5
×
 

Overview of Backbone

on

  • 2,002 views

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

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

Statistics

Views

Total Views
2,002
Views on SlideShare
2,001
Embed Views
1

Actions

Likes
1
Downloads
25
Comments
0

1 Embed 1

http://nodeslide.herokuapp.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

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…
Post Comment
Edit your comment

Overview of Backbone Overview of Backbone Presentation Transcript

  • Backbone John AshmeadWednesday, May 2, 2012 1
  • MVC Abstraction Layer • Events • Models • Views • Collections • Routersjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 2
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Backbone.jsjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 18