Backbone JS

• Provides models with key-value binding and custom events, collections, and connects it all to your existing API over a RESTful JSON interface.
• Used for SPA(Single page applications) like Gmail, Facebook, Twitter.
• Client Side JS:
  • Routers
  • Models
  • Views
  • Collection
• Advantages:
  • Fast
  • Highly interactive
  • Scalable
• Disadvantages:
  • Cannot be indexed by search engines(without extra work)
  • Difficult to test
  • Security issues( security must be enforce by the server)
• Required Dependencies:
  • Underscore.js (Functional support for Javascript)
  • JQuery/zerto (zepto is only for modern browsers, DOM manipulation & AJAX)
• Understanding:
  • Backbone.Model is used to create object. Use Get(), Set(0 method to change property values.
  • Need to create a model Object by extending Backbone.Model, and need to pass it to a view that extended from Backbone.View.

Models:

• Models hold the application data.
• The Purpose of models
  • Models form the core of the application
  • Contains application state, logic and behavior
  • Models provide a life cycle
  • They communicate changes to the rest of the applications via events.
• Some functions
  • Instanceof() – check instance
  • Has() – Check for property
  • Escape() – encode html
  • Id – persistent id
  • cid – temp id
  • isNew() – Object state
  • 'defaults' property is set the default values, that are not set in constructor.
• Model Events
  • Model raises events when their states changes
  • To detect a change to a model listen for the 'change' event.
  • Use the 'on' method to bind to an event
  • Use the 'trigger' method to trigger the event
  • Can use the Validate() method to validate the model.
  • Use toJson() method to serialize the attributes.
  • Models have save(), fetch() and desroy() methods for synchronizing with the server.

Views:

• Handle model and DOM events.
• Are link between models and UI.
• All views have an associated DOM element at all the times (.el) var v= new Backbone.View.extend({});Every view have exactly one DOM element.
• The new element is defined by the id, tagName, className & attributes.
• Any of the following properties will be attached directly to the view object if passed to the constructor.
  • Model, collection, el, id, className, tagName, attributes.
• Render() is the function that render's the views element(.el). In render should return 'this'.
• Make() function used for helpful functions for creating DOM elements.
• Remove() is the method to remove the view from the DOM element.
• Events – Declarative syntax to register handlers for DOM events
• Guide lines:
  • Views should render self-contained DOM elements
    • Do not attach to existing elements
    • Do not access DOM elements the view does not own.
  • Pass 'el' to the constructor of self-updating view.

Templating:

• Cline-side Templating
  • Dynamically build markup from a template and some data
  • Templating happens in the view's render method
• Underscore.js templates
  • Underscore can render templates
  • Three valid types of code blocks
    • <%...%> Execute arbitrary code.
    • <%=…%> Evaluate an expression and render the result inline.
    • <%-…%> Evaluate an expression and render the html escaped result inline.
  • Script tag templates – Templates can be stored inside script tags with a non-javascript 'type' attribute.
• Handlebar templates
  • Templating engine based on mustache
  • Code blocks are delimited by {{…}}
  • Rendering is a two stage process     i) Compile ii) Execute
  • NOTE: Compile is the most time consuming process. So check every template is compiled only once.
• Pre-compiling templates
  • Compiling a template == converting to function
  • Pre-compiled templates for performance
  • Script compilation as a build step.
  • Handlebars includes support for pre-compiling file-based templates.

Collections:

• Collection
  • Container for multiple models of the same type.
  • Retrieve models from the server
  • Create models and save them in server.
  • New connection method can be created by new Backbone.Collection
  • Collections can have 'class' properties too.
• Sorting
  • Collections are sorted - either by insertion order or by a comparator.
• Adding and Removing
  • Add() and remove() work exactly as you would expect.
  • Use 'at' option to insert the model in specific index and 'silent' option to suppress the add event.
  • Add() and remove() both work on a single model, or an array of models.
• Getting Elements
  • At() retrieves model from a collection by the index of the model in the collection.
  • Get() retrieves a model from a collection by its id.
  • GetByCid() is used to get the model, if it is not presisted
• Collection iterators
  • Backbone proxies set of unsderscore.js vollection functions
    • forEach() – Can directly pass the function.
    • Map() – map will create another collection. (like Select in LINQ)
    • Redunce() – two arguments. i) iteration function ii) start value
    • Find() - search for single model from collection.
• Events
  • Collection raises event when models are added or removed. 'add' while adding. 'remove' while removing.
  • Collections forward model change events. 'change' & 'change:attribute'

Connecting to a server:

• Backbone uses RESTFul web requests to synchronize data to and from server.
• Same origin policy
  • CORD – Cross-origin resource sharing.
    • Technology that allows cross-origin requests.
    • Uses special http headers to specify the set of valid origins.
    • Alternative to jsonp
• Collections requests
  • Create() and fetch()
• Model Requests
  • Fetch(), Save() and Destroy()
  • Save()
    • 'success' and 'error' attributes.
• Backbone.sync is responsible for all server communications.
• Backbone.localStorage – replaces Backbone.sync with local storage implementation.