Sayed Ahmed Computer Engineering, BUET, Bangladesh (Graduated on 2001) ( ) MSc in Computer Science, U of Manitoba, Canada Linkedin: linkedin.com/in/sayedjustetclinkedin.com/in/sayedjustetc Personal:

I do not know everything about Backbone.js But Backbone.Js is not Rocket Science

 Some JavaScript Frameworks  javascript-mvc-frameworks-reviewed/ javascript-mvc-frameworks-reviewed/  JavaScript MVC Frameworks 

 Why BackBone.js  single page applications are the future  Esp for mobile, tablet, and similar devices  And such devices are pushing the trend  web-apps-single-page-applications/ web-apps-single-page-applications/   apps-is-ready-isomorphic-javascript/

 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  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  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.

 Person = Backbone.Model.extend({  initialize: function(){  alert("Welcome to this world");  }  });  var person = new Person;

 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});

 var age = person.get("age"); // 67  var name = person.get("name"); // "Thomas“  var child = person.get("child"); // 'Ryan'

 Person = Backbone.Model.extend({  defaults: {  name: 'Fetus',  age: 0,  child: ''  },  initialize: function(){  alert("Welcome to this world");  }  });

 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'

 Person = Backbone.Model.extend({  defaults: {  name: 'Fetus',  age: 0,  child: ''  },  initialize: function(){  alert("Welcome to this world");  },  adopt: function( newChildsName ){  this.set({ child: newChildsName });  }  });

 var person = new Person({  name: "Thomas", age: 67, child: 'Ryan‘  });  person.adopt('John Resig');  var child = person.get("child"); // 'John Resig'

 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 );  });  }  });

 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: '', '' }  });

 // 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 from the database  user.fetch({  success: function (user) {  alert(user.toJSON());  }  })

 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. */

 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.Underscore.js's _.template

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

 The Template

 Backbone routers are used for routing your applications URL's when using hash tags(#).

 Backbone collections are simply an ordered set of modelsmodels

