Developer(s)Jeremy Ashkenas
Initial releaseOctober 13, 2010; 13 years ago (2010-10-13)
Stable release
1.2.3 / September 3, 2015; 8 years ago (2015-09-03)[1]
Written inJavaScript
Operating systemCross-platform
Size7.3 KB production
69 KB development
TypeJavaScript framework
LicenseMIT
Websitebackbonejs.org

Backbone.js is a open-source JavaScript framework with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only hard dependency is on one JavaScript library,[2] Underscore.js, plus jQuery for use of the full library.[3] It is designed for developing single-page web applications,[4] and for keeping various parts of web applications (e.g. multiple clients and the server) synchronized.[5] Backbone was created by Jeremy Ashkenas, who is also known for CoffeeScript and Underscore.js.[6]

Overview edit

Models and Views edit

The main use of Backbone.js is to help with separating the business logic away from the user interface. Backbone does this by utilizing models and views.

A model contains and manages the interactive data; it is also responsible for controlling the loads and saves from the server. A model can also deal with the logic involved with the data, such as handling conversions, validations, computed properties, and access control. Models should be designed as reusable objects that contain all the functions needed to manipulate their set of data. They should be able to be passed around the application to be used wherever the data they contain is required.

A view is a piece of the user interface. Views can render the data from a particular model, or from a number of different models. Views can also be stand alone chucks of the user interface that do not interact with any model. Views handle interactivity and captures the user input. It sends the input to the corresponding model to handle the necessary logic associated with the input.

When the data in a model is modified, it will trigger a "change" event. When these events are triggered, the views react or re-render themselves as necessary. Ideally, the models should not be aware of the views they are interacting with. Instead, the models just trigger the events and the views are responsible for listening for these events and reacting accordingly.

 

 

Collections edit

Collections are used to deal with a group of related models. They can handle the loading and saving of new models to the server. A collection can provide functions that help with the aggregation or calculations across multiple models. Collections are also capable of proxying all the events that are triggered from the models within it. This allows the views to be able to listen for the events from one location, rather than listening for events from each model within the collection.

Routers edit

Backbone routers are used to provide linkable, bookmarkable, shareable URLs for significant locations in the application.

Events edit

A list of the built-in Backbone events, with their arguments:

  • "add" (model, collection, options) — when a model is added to a collection.
  • "remove" (model, collection, options) — when a model is removed from a collection.
  • "update" (collection, options) — single event triggered after any number of models have been added or removed from a collection.
  • "reset" (collection, options) — when the collection's entire contents have been replaced.
  • "sort" (collection, options) — when the collection has been re-sorted.
  • "change" (model, options) — when a model's attributes have changed.
  • "change:[attribute]" (model, value, options) — when a specific attribute has been updated.
  • "destroy" (model, collection, options) — when a model is destroyed.
  • "request" (model_or_collection, xhr, options) — when a model or collection has started a request to the server.
  • "sync" (model_or_collection, resp, options) — when a model or collection has been successfully synced with the server.
  • "error" (model_or_collection, resp, options) — when a model's or collection's request to the server has failed.
  • "invalid" (model, error, options) — when a model's validation fails on the client.
  • "route:[name]" (params) — Fired by the router when a specific route is matched.
  • "route" (route, params) — Fired by the router when any route has been matched.
  • "route" (router, route, params) — Fired by history when any route has been matched.
  • "all" — this special event fires for any triggered event, passing the event name as the first argument.

Dependencies edit

  • Underscore.js - Backbone's only hard dependency. For Backbone to work, you must include the Underscore library or an alternative that replaces Underscore's functionality.
  • jQuery - suggested for easier DOM manipulation and Ajax
  • JSON2.js - required if you want to parse and serialize JSON in older browsers, such as Internet Explorer versions 6 and 7
  • Lo-Dash - alternative to Underscore.js that has custom builds and additional features.
  • Zepto - jQuery alternative for mobile apps

Development Tools edit

Backbone Debugger edit

Backbone Debugger is a Chrome Developer Tools extension to debug Backbone.js applications. Displays the application’s views, models, collections, and routers in real-time.

Backbone Eye edit

Backbone Eye is a Firebug extension for debugging Backbone.js applications.

Development History edit

Backbone.js was developed by Jeremy Ashkenas and the initial Backbone release was on October 13, 2010.

Releases edit

As of September 03, 2015, release 1.2.3 is the current stable version.

Legacy Browser Support edit

Backbone.js is capable of supporting Internet Explorer versions 6 and 7 with the use of JSON2.js to handle parsing and serializing JSON.

Use edit

The following web applications are built with Backbone.js:[7]

References edit

  1. ^ Change Log
  2. ^ Alex MacCaw (18 August 2011). JavaScript Web Applications. O'Reilly Media, Inc. p. 165. ISBN 978-1-4493-0351-8. Retrieved 27 April 2012.
  3. ^ Dependencies, BackboneJS, October 14, 2015
  4. ^ "What SendHub Learned Building a Single-Page Backbone.js App", ReadWriteWeb
  5. ^ "Behind the rumours: how we built our Twitter riots interactive", The Guardian, London, 8 December 2011
  6. ^ Stenger, Brad (April 4, 2012), "JavaScript Meetup City", Open, The New York Times
  7. ^ Companies and Websites using Backbone.js
  8. ^ a b c d e f g h i j k l m Example Sites Which Use Backbone.js
  9. ^ http://www.fastcolabs.com/3014663/open-company/inside-the-tech-stack-digg-used-to-replace-google-reader
  10. ^ Backbonification: migrating a large JavaScript project from DOM spaghetti to Backbone.js, Samuel Clay (NewsBlur) 13th November 2012
  11. ^ "Mobile UI Components". Retrieved 2014-03-22.
  12. ^ "A Shorter Letter". Retrieved 2014-03-22.

Further reading edit

External links edit

Category:JavaScript libraries