BACKBONE.JSGiving backbone to your applications

About Me

Joseph KhanSMTS, Yodlee

Author, ISBN – 9781849694001

Open Source

@joseph_rialab

RoadmapTotal 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 structure4. Backbone dependencies – jQuery, Underscore5. Setup needed to code – local server, libraries, editor6. Backbone Core Components

ModelViewsCollectionsControllers?EventsRouters

7. Live Demo App – Employee Manager Single Page Application8. Questions and Quiz9. References – links and books

Tools needed

What do I need to code?

1. Local HTTP server – WAMP/MAMP2. Text/Code editor – I prefer Sublime Text3. JS libraries

1. Backbone.js2. jQuery.js3. Underscore.js

4. Some patience

What is MVC Pattern?

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

What is Backbone.JS?

Backbone.JS dependencies

• jQuery – DOM manipulations• Underscore JS – Utility functions

Backbone Components

Backbone – a global object• Model• Collection• View• Events• Router

ModelsModel 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()

CollectionsGroup 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()

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>

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

EventsTwo 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

Code LiveLet’s create an Employee Manager Application

Demo Application Structure

Adding a new employee

Removing an employee

Demo Application Structure

Edit

Folder Structure

Books and LinksOfficial 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

ThanksQ/A