• 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;
  },
});

• 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

• the blog post could lead to a book authoring
• writing a book could take more time
  than being a pregnant
• I would learn more then I knew
• it could be a reason of stopping doing any
  other work in the end of June and in August
• it can bring new challenges in my life
• speaking at DrupalCon Prague

AMZN.TO/15OMXOX

• 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){
  }}); 

• Is a D7 module: https://drupal.org/project/backbone
• Provides models and collections for Drupal
  entities in the Backbone application:
• Node as Node model
• All nodes as NodeIndex collection
• Arbitrary view as NodeView collection
• Requires Services or RESTful Web Services

 // Create new NodeView collection.
var viewCollection = new Drupal.Backbone.Collections.NodeView();
// Set Drupal View name.
viewCollection.viewName = 'backbone_example';
// Fetch data from the collection.
viewCollection.fetch({success: function() {
  console.log(viewCollection.toJSON());
});

• RESTful Web Services
  Exposes entities and other resources as RESTful web API
• Serialization
  Provides a service for (de)serializing data to/from formats such as JSON and XML
  
• HAL (Hypertext Application Language)
  Serializes entities using HAL

• Node resource:
  
• http://example.com/entity/node/<id>
• GET, PUT, DELETE
• http://example.com/entity/node
• POST
• Articles view:
• http:/example.com/articles
• GET
• Headers:

• Content-type: application/hal+json
  Accept: application/hal+json

• Used as a Web API
  
• Is typically based on the  JSON
  
• http://tools.ietf.org/id/draft-kelly-json-hal-01.html

// Disable ajax cache
jQuery.ajaxSetup({ cache: false });
// Add REST service URL
var appConfig = {
  baseURL: 'http://localhost/drupal-rest/',
  addURL: '',
  token: ''
}
// Get token and save it
$.get(appConfig.baseURL + 'rest/session/token')
.done(function(data) {
  appConfig.token = data;
});

// Override Backbone.sync to include a token and set headersvar sync = Backbone.sync;
Backbone.sync = function(method, model, options) {
  options.beforeSend = function (xhr) {
    xhr.setRequestHeader('Content-type', 'application/hal+json');
    xhr.setRequestHeader('Accept', 'application/hal+json');
    xhr.setRequestHeader('X-CSRF-Token', appConfig.token);
  };
  sync(method, model, options);
};

// Define a mixinvar mixin = {
  // Transform JSON generated by Drupal  parse: function(resp, options) {
    if (!_.isNull(resp)) {
      var id = this.idAttribute;

      _.each(resp, function(value, key) {
        if (_.isString(key) && key.charAt(0) != '_') {
          if (_.isArray(value)) {
            resp[key == 'nid' ? id : key] = value[0].value;
          }
        }
      });

      delete resp.nid;
    }
    return resp;
  },

  // Convert regular JSON into MongoDB extended one.
  toExtendedJSON: function() {
    var attrs = this.attributes;

    var id = this.idAttribute;
    _.each(attrs, function(value, key) {
      if (_.isString(key) && key.charAt(0) != '_') {
        attrs[key == id ? 'nid' : key] = [{ 'value': value }];
      }
    });

    return attrs;
  },

  // Substute toJSON method when performing synchronization.
  sync: function() {
    var toJSON = this.toJSON;
    this.toJSON = this.toExtendedJSON;

    var ret = Backbone.sync.apply(this, arguments);

    this.toJSON = toJSON;

    return ret;
  }
}

// Mix our mixin
_.extend(Backbone.Model.prototype, mixin);

• Edit module
• Uses AJAX instead REST
• Overrides Model.sync() and Model.save()
  to work with AJAX

(function ($, _, Backbone, Drupal, drupalSettings) {"use strict";
// ...Drupal.behaviors.edit = {
  attach: function (context) {
    // Initialize the Edit app once per page load.
    $('body').once('edit-init', initEdit);

    // Initialize models, collections and views.
    // Bind them to a DOM.
    // ...
  },  detach: function (context, settings, trigger) {
    if (trigger === 'unload') {
      // Deletes models, collections and views.
      deleteContainedModelsAndQueues($(context));
    }
  }
};// ...
})(jQuery, _, Backbone, Drupal, drupalSettings);

• Drupal dev end & cloud hosting
• Runs on Drupal
• Uses Backbone.js for
  the dashboard for over a year

• http://backbonejs.org/ - official docs
  
• http://backplug.io/ - bakbone plugins and extensions
  
• https://groups.drupal.org/backbone-js - group
  
• http://www.packtpub.com/backbonejs-mvc-rest-cookbook/book - Backbone.js Cookbook
  
• http://slid.es/dealancer/backbone-drupal - SLIDES!
  

• EVOLVING FRONTEND DEVELOPMENT; DANCING ON THE TIP OF A HURTLING ROCKET
  @jessebeach, Tue, 14:15-15:15
• REST AND SERIALIZATION IN DRUPAL 8
  @linclark and @klausi, Wed, 13:00-14:00
• DRUPAL 8, BACKBONE AND REST: BUILDING THE CLIENT-SIDE APPLICATION LAYER 
  BOF, Wed, 15:45-16:45