Backbone.js is a JavaScript framework created by Jeremy Ashkenas in 2010 that serves as a layer above DOM manipulation libraries like jQuery. It features a minimalistic and modular design with key concepts including models, collections, views, routers, and events to facilitate organized code structure. Backbone.js allows developers to manage and manipulate data, bind models to views, and implement URL routing for applications.

2. What is BackBone.js
• BackBone is a Javascript Framework
• Created by Jeremy Ashkenas in 2010, an author
of CoffeeScript
• It’s a layer above existing JavaScript DOM
manipulation libraries like jQuery, Zepto etc

3. BackBone.js Features
• Minimalistic
• Modular
• Perfect OOP design
• Over 100 available extensions:
https://github.com/documentcloud/backbone/wiki/Exte
nsions,-Plugins,-Resources
• Community

4. Main Concepts
• Model
• Collection
• View
• Router
• Events

5. Model
• Persist data
• Manipulate data
• Validate data
• Trigger an event on add, change data
• Create a new model by calling:
var SomeModel = Backbone.Model.extend({
defaults: {
SomeKey: ‘some value’
}
});

6. View
• Rendering logic
• Use template
• Act as controller
• Update model
• Create a new view by calling:
var SomeView = Backbone.View.extend({
initialize: function () {
// initialize content goes here
}
});

7. Model and View Binding
el : This is used to get the element of DOM
model : This is used to point/bind the view with model

8. Controller Collection
• It is a collection of models
• Manage ordered set of models
• Create a new collection by calling:

9. Router
• This is useful feature for JavaScript application which need URL routing.
• Router maps URL to actions
• Create a new collection by calling:
When URL matches with url-pattern it executes function actionFunction

10. Events
• Events is a module that can be mixed in to any object, giving the object the ability
to bind and trigger custom named events
• In the example below an event invokes a method/function in a view.