BackboneJS Training PPT Slides. Giving Backbone to your applications. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

1. BACKBONE.JS
Giving backbone to your applications

2. About Me
Joseph Khan
SMTS, Yodlee
Author, ISBN – 9781849694001
Open Source
@joseph_rialab

3. Roadmap
Total Time: 3 hours
1. What is MVC?
2. What are SPA’s?
3. Discuss about developing web applications, separation of concerns, traditional way
of developing and how Backbone gives structure
4. Backbone dependencies – jQuery, Underscore
5. Setup needed to code – local server, libraries, editor
6. Backbone Core Components
Model
Views
Collections
Controllers?
Events
Routers
7. Live Demo App – Employee Manager Single Page Application
8. Questions and Quiz
9. References – links and books

4. Tools needed
What do I need to code?
1. Local HTTP server – WAMP/MAMP
2. Text/Code editor – I prefer Sublime Text
3. JS libraries
1. Backbone.js
2. jQuery.js
3. Underscore.js
4. Some patience

5. What is MVC Pattern?

6. What is a Single Page Application?
Once the application loads, majority of the functionality is handled client side only.
Calls are made to the server for data feeds.
Eg. Gmail, Our Demo App

7. What is Backbone.JS?

8. Backbone.JS dependencies
• jQuery – DOM manipulations
• Underscore JS – Utility functions

9. Backbone Components
Backbone – a global object
• Model
• Collection
• View
• Events
• Router

10. Models
Model data for a real world entity. Its like a database row. They contain data for an
application as well as the logic around the data.
Eg. Todo Item, an Employee
var EmployeeModel = Backbone.Model.extend({});
var employeeModel = new EmployeeModel();
• Initialization
• Setting default values
• Getters and Setters
• Data Validation
• Handling change events
• Some other very useful model properties – toJSON(), attributes, save()

11. Collections
Group or set of models. Its like the database table
Eg. Todo List, Employee List
var EmployeeCollection = Backbone.Collection.extend({
url: “…”,
model: EmployeeModel,
initialize: function() {
},
parse: function(response) {
}
});
var employees = new EmployeeCollection();
• Creating a collection class
• url property
• model property
• parse() method
• Creating a collection instance
• Adding and removing models
• Add, remove, reset events
• fetch() method
• Other useful properties – get(),
forEach()

12. Templates (basics)
• Makes life easier. Converts user data into HTML markup
• We will use Underscore templates _.template()
<script type="text/template" id="todoTemplate">
<p class='todo-title'><%= title %></p>
<p><%= completed %></p>
</script>
JSON data/Model Data
HTML markup
{
title: ‘Get Eggs’,
completed: false
}
<p class='todo-title’>Get Eggs</p>
<p>false</p>

13. Views
• Views in Backbone don’t contain the HTML markup for your application; they contain the
• logic behind the presentation of the model’s data to the user.
• They use templates to do so
var EmployeeView = Backbone.View.extend({
tagName: 'li',
className: 'employeeItem row’,
events: {
'click #removeBtn' : 'removeEmployee'
},
initialize: function() {
console.log("Employee View initialized");
},
render: function() {
},
removeEmployee: function() {
}
});
var employee1 = new EmployeeView();
• Creating a View class
• Associating views with DOM elements –
el, tagName
• initialize() method
• render() method
• Events hash map – DOM events
• Listening to model changes
• Creating a view object
• Passing model to a view
• Converting model data into HTML markup
• el, $el properties

14. Events
Two ways to handle events
• DOM level events – hashmap
• Object level events – one object listening to another object
var EmployeeView = Backbone.View.extend({
tagName: 'li',
className: 'employeeItem row’,
events: {
'click #removeBtn' : 'removeEmployee'
},
initialize: function() {
this.listenTo(this.model, ‘change’,
someFunc)
},
removeEmployee: function() {
}
});
var employee1 = new EmployeeView();
• on()
• off()
• trigger()
• listenTo()
• stopListening()
• events: {} object

15. Code Live
Let’s create an Employee Manager Application

16. Demo Application Structure
Adding a new employee
Removing an employee

17. Demo Application Structure
Edit

18. Folder Structure

19. Books and Links
Official Site - http://backbonejs.org/
Tutorial - https://backbonetutorials.com/
Free ebook - http://addyosmani.github.io/backbone-fundamentals/
Backbone Todo App - http://todomvc.com/examples/backbone/
Developing Backbone.js Applications by
Addy Osmani

20. Thanks
Q/A