• An Open Source MVC
  framework
• Based on Underscore.js
• Integrates with jQuery
• 100% minimalistic
• Modular and expandable
• Has a great community
  

• Contains data
• Implements business logic

var InvoiceItemModel = Backbone.Model.extend({  defaults: {
    description: '',
    price: 0,
    quantity: 1,
  },
  calculateAmount: function() {
    return this.get('price') * this.get('quantity');
  }
});
var model = new InvoiceItemModel({  description: 'Toy Tracktor', price: 15, quantity: 1});

• get, set, has, unset, clear, toJSON, escape
  

hacker.set('name', "<script>alert('xss')</script>");
var escaped_name = hacker.escape('name');// &lt;script&gt;alert(&#x27;xss&#x27;)&lt;&#x2F;script&gt;

• id, idAttribute, cid

var invoiceItemModel = Backbone.Model.extend({
  idAttribute: "_id"
});invoiceItemModel._id = Math.random().toString(36).substr(2);var id = invoiceItemModel._id;

• Set of models
• Iteratable
• Sortable
• Filterable

• length, at, indexOf, get

var model = invoiceItemCollection.at(2);
model.get('description'); // Farmer Figure 

• add, remove, reset

invoiceItemCollection.reset
 ([
{description: 'Wooden Toy House', price: 22, quantity: 3},
{description: 'Farm Animal Set', price: 17, quantity: 1}
]); 

var amount = invoiceItemCollection.chain()
.map(function(model) {
  return model.get('quantity') * model.get('price');
})
.reduce(function(memo, val) {
  return memo + val;
})
.value(); // 83 

• Renders a model
• Handles model events
• Handles DOM events
• Updates a model

var InvoiceItemView = Backbone.View.extend({
  
  tagName: 'tr',
  template: _.template($('#item-row-template').html()),

  render: function() {

    var data = this.model.toJSON();
    data.amount = this.model.calculateAmount();
    this.$el.html(this.template(data));

    return this;
  },
});

 var InvoiceItemView = Backbone.View.extend({
  // ...

  initialize: function() {
   this.listenTo(this.model, 'change', this.render, this);
  }
});

  var InvoiceItemView = Backbone.View.extend({

  //...

  events: {
    'click button.delete': 'delete',
  },

  function: delete() {
    this.remove();
  }

});

• Handles URL changes
• Delegates app flow to a view

var Workspace = Backbone.Router.extend({
  routes: {
    '': 'invoiceList',
    'invoice': 'invoiceList',
    'invoice/:id': 'invoicePage',
  },
  invoiceList: function() {
    // ...    var view = new InvoiceItemListView({
      collection: invoiceItemCollection
    }    $('body').html(view.render().el);    // ...  }});

• Going deeper into  models, collections and views
• Handling  DOM events in a view
  
• Binding a model and a collection to a view
  
• Using templates, forms, grids and layouts
  
• Communicating with a RESTful service
  
• Working with the local storage
  
• Optimizing and testing Backbone application
  
• Writing your own Backbone extensions
  
• Ensuring compatibility with search engines
  
• Creating mobile apps with jQueryMobile and PhoneGap

• REST was described by Roy Fielding in 2000:
  http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm
• Widely used as an API design model
• Client-server
• Uniform interface
• Stateless
• Cacheable
• Layered system
• Typically works over HTTP

var PostModel = Backbone.Model.extend({
  // Override id attribute.
  idAttribute: '_id',
  // Define URL root to access model resource.
  urlRoot: function() { return 'http://example.com/posts/'; }
  // Otherwise use url() method to provide full path  // to the model resource.
});
var PostCollection = Backbone.Collection.extend({
  model: PostModel,
  // Define path to the collection resource.
  url: function() { return 'http://example.com/posts/'; }
}); 

// Fetches data into a model.
model.fetch();
// Saves a model.
model.save();

// Destroys a model.
model.destroy();

// Fetches data into a collection.
collection.fetch();

// Adds models to a collection.
collection.add(models);

// Removes specific models from collection.
collection.remove(models); 

// Pass success and error callbacksmodel.fetch({  success: function(collection, response, options) {
  },
  error: function(collection, response, options){
  }}); 

• Create new db:
  https://mongolab.com/newdb
• Get an API key:
  https://mongolab.com/user?username=<username>
• Perform REST queries:
  https://api.mongolab.com/api/1/databases?apiKey=<your-api-key>
  https://api.mongolab.com/api/1/databases/sma/collections?apiKey=<your-api-key>
  https://api.mongolab.com/api/1/databases/sma/collections/posts?apiKey=<your-api-key>

 [{
  "_id": {
    "$oid": ""
  },
  title: 'Hey',
  body: 'Yo yo yo!'
}]

• Specialized view types
• Regions an layouts
• Memory Management

• http://backbonejs.org/ - official docs
  
• http://backplug.io/ - bakbone plugins and extensions
  
• http://slid.es/dealancer/backbone - slides