This document provides an introduction and overview of Backbone.js. It outlines the agenda which includes what Backbone is, its dependencies, getting started with a basic setup and "Hello World" example, and an explanation of Backbone's MVC components including models, views, collections, routers, and events. Specific topics covered are defining models and collections, creating and rendering views, routing URLs, and handling events. The presenter aims to explain the structure, reuse, and separation of concerns that Backbone provides for building richer client-side applications.

1. Introduction to Backbone js
Presenter: Debasish Mohanty, Mindfire Solutions
Date: 12/05/2013

2. Presenter: Debasish Mohanty, Mindfire Solutions
Agenda
What, Why and who
Dependencies of Backbone
Getting started(Backbone setup and Hello World exp)
Backbone MVC(Models, Views , Collections)
Models and Collections
Views
Routers
Events

3. Presenter: Debasish Mohanty, Mindfire Solutions

4. Presenter: Debasish Mohanty, Mindfire Solutions
What
- Backbone js is a Model, view, collection framework.
- Javascript for building richer client side application.
- Data driven.

5. Presenter: Debasish Mohanty, Mindfire Solutions
Why
- Structure
- Reuse
- Separation of roles of concerns

6. Presenter: Debasish Mohanty, Mindfire Solutions
Who

7. Presenter: Debasish Mohanty, Mindfire Solutions
Controller
Model
View
MVC

8. Presenter: Debasish Mohanty, Mindfire Solutions
Adding Backbone
//Jquery
<script src="/jquery.min.js" type="text/javascript"></script>
//Underscore
<script src="underscore.js/1.3.3/underscore-min.js"
type="text/javascript"></script>
//backbone
<script src="backbone-min.js" type="text/javascript"></script>

9. Presenter: Debasish Mohanty, Mindfire Solutions
Model
- Data behind the application
- object or entity.
- provides a basic set of functionality for managing changes.

10. Presenter: Debasish Mohanty, Mindfire Solutions
Define
Person = Backbone.Model.extend();
First Person = new Person({
Name: 'Lincoln'
})

11. Collections
-Ordered set of Models
- Model: Student, Collection: ClassStudents
- Model: Todo Item, Collection: Todo List
- Model: Animal, Collection: Zoo
Presenter: Debasish Mohanty, Mindfire Solutions

12. Define
Person = Backbone.Model.extend();
Persons = Backbone.Collection.extend({
Model: Person,
url: '#'
})
Presenter: Debasish Mohanty, Mindfire Solutions

13. Presenter: Debasish Mohanty, Mindfire Solutions
View
- reflect what your applications' data models look like.
- listen to events and react accordingly.
Define
AppView = Backbone.View.extend({
})

14. Presenter: Debasish Mohanty, Mindfire Solutions
render
AppView = backbone.View.extend({
render: function() {
this.$el.append('Hello World');
return this;
}
});

15. Presenter: Debasish Mohanty, Mindfire Solutions
Router
- way of maintaining state of the application
- routes interpret anything after "#" tag in the URL
define
var AppRouter = Backbone.Router.extend({
routes: {
"": "defaultRoute"
}
});
var app_router = new AppRouter;
app_router.on('route:defaultRoute', function(actions) {
alert(actions);
})
// Start Backbone history a necessary step for bookmarkable URL's
Backbone.history.start();

16. Presenter: Debasish Mohanty, Mindfire Solutions
events
AppView = Backbone.View.extend({
Events {
“click #addBtn”: “add”
...
},
add: function(e) {
Alert('added');
}
})

17. Presenter: Debasish Mohanty, Mindfire Solutions
Question and
Answer

18. Presenter: Debasish Mohanty, Mindfire Solutions
Thank you