INTRODUCTION TO BACKBONE.JS

Sayed AhmedComputer Engineering, BUET, Bangladesh (Graduated on 2001) (1996 - 2001)MSc in Computer Science, U of Manitoba, Canada

Linkedin: linkedin.com/in/sayedjustetcPersonal: http://sayed.justetc.netEmail: sayed@justetc.net

I do not know everything about Backbone.js

But Backbone.Js is not Rocket Science

SOME TOP JAVASCRIPT FRAMEWORKS Some JavaScript Frameworks

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

JavaScript MVC Frameworks http://todomvc.com/

WHY BACKBONE.JS? Why BackBone.js

single page applications are the future

Esp for mobile, tablet, and similar devices And such devices are pushing the trend http://happyworm.com/blog/2010/08/23/th

e-future-of-web-apps-single-page-applications/

http://singlepageappbook.com/goal.html http://venturebeat.com/2013/11/08/the-

future-of-web-apps-is-ready-isomorphic-javascript/

WHY BACKBONE Why Backbone

enforces that communication to the server should be done entirely through a RESTful API

The web is trending such that all data/content will be exposed through an API

Why? browsers are no longer the only clients Other clients such as mobile devices, tablet devices,

Google Goggles and electronic fridges etc. are increasing very rapidly

BENEFITS OF BACKBONE Benefits of Backbone

incredibly small library Provide a significant amount of functionality

and structure Essentially an MVC for the client Allows you to make your code modular

MODELS IN BACKBONE.JS Models in Backbone.js

According to Backbone.js Team Models are

the heart of any JavaScript application, containing

the interactive data as well as a large part of the logic surrounding it:

conversions, validations, computed properties, and access control.

MODELS IN BACKBONE.JS Person = Backbone.Model.extend({

initialize: function(){ alert("Welcome to this world");

} }); var person = new Person;

SETTING ATTRIBUTES IN MODEL Person = Backbone.Model.extend({

initialize: function(){ alert("Welcome to this world");

} });

var person = new Person({ name: "Thomas", age: 67

}); // or we can set afterwards, these operations are equivalent var person = new Person(); person.set({ name: "Thomas", age: 67});

GETTING/RETRIEVING ATTRIBUTES var age = person.get("age"); // 67 var name = person.get("name"); //

"Thomas“ var child = person.get("child"); //

'Ryan'

SETTING MODEL DEFAULTS

Person = Backbone.Model.extend({ defaults: {

name: 'Fetus', age: 0, child: ''

}, initialize: function(){

alert("Welcome to this world"); }

});

SETTING MODEL DEFAULTS var person = new Person({

name: "Thomas", age: 67, child: 'Ryan‘

}); var age = person.get("age"); // 67 var name = person.get("name"); //

"Thomas" var child = person.get("child"); // 'Ryan'

MANIPULATING MODEL ATTRIBUTES

Person = Backbone.Model.extend({ defaults: {

name: 'Fetus', age: 0, child: ''

}, initialize: function(){

alert("Welcome to this world"); }, adopt: function( newChildsName ){

this.set({ child: newChildsName }); }

});

MANIPULATING MODEL ATTRIBUTES

var person = new Person({ name: "Thomas", age: 67, child: 'Ryan‘

}); person.adopt('John Resig'); var child = person.get("child"); // 'John

Resig'

LISTENING FOR CHANGES TO THE MODEL

Person = Backbone.Model.extend({ defaults: {

name: 'Fetus', age: 0 }, initialize: function(){

alert("Welcome to this world"); this.on("change:name", function(model){

var name = model.get("name"); // 'Stewie Griffin' alert("Changed my name to " + name );

}); }

});

INTERACTING WITH THE SERVER Notice:

urlRoot: '/user‘ Assume: The server has implemented a RESTful

URL /user which allows us to interact with it Assume there is a user table in the DB side /user url interacts with the user table

var UserModel = Backbone.Model.extend({ urlRoot: '/user',

defaults: { name: '', email: '' } });

CREATING A NEW MODEL

GETTING/RETRIEVING A MODEL (I.E USER) // Here we have set the `id` of the model var

user = new Usermodel({id: 1}); // The fetch below will perform

In the url: [GET] /user/1 // The server should return the id, name and

email from the database user.fetch({

success: function (user) { alert(user.toJSON()); }

})

UPDATING A MODEL

DELETING A MODEL

GET ALL THE CURRENT ATTRIBUTES var person = new Person({ name: "Thomas", age: 67}); var attributes = person.toJSON(); // { name: "Thomas",

age: 67} /* This simply returns a copy of the current attributes. */ var attributes = person.attributes; /* The line above gives a direct reference to the

attributes and you should be careful when playing with it. Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */

VALIDATE DATA BEFORE YOU SET OR SAVE IT

VIEW IN BACKBONE.JS Backbone views

are used to reflect what your applications' data models look like

They are also used to listen to events and react accordingly.

Our Focus on Views view functionality and how to use views with a JavaScript templating

library, specifically Underscore.js's _.template.

BACKBONE VIEWhttp://jsfiddle.net/tBS4X/1/

VIEWS IN BACKBONE var search_view = new SearchView({ el: $("#search_container") }); With el, backbone view becomes the owner of the

div#search_container

LOADING/RENDERING A TEMPLATE

The Template

RENDER VIEW USING THE TEMPLATE

LISTENING FOR EVENTS

USING TEMPLATE VARIABLES

USING TEMPLATE VARIABLES

ROUTERS IN BACKBONE Backbone routers are used for routing

your applications URL's when using hash tags(#).

ROUTERS IN BACKBONE

DYNAMIC ROUTING

DYNAMIC ROUTING CONT. ":PARAMS" AND "*SPLATS"

COLLECTIONS IN BACKBONE Backbone collections are simply an

ordered set of models

COLLECTIONS IN BACKBONE

REFERENCES http://backbonetutorials.com/