1. Sayed Ahmed Computer Engineering, BUET, Bangladesh (Graduated on 2001) (1996 - 2001) MSc in Computer Science, U of Manitoba, Canada Linkedin: linkedin.com/in/sayedjustetclinkedin.com/in/sayedjustetc Personal: http://sayed.justetc.nethttp://sayed.justetc.net Email: sayed@justetc.netsayed@justetc.net

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

3.  Some JavaScript Frameworks  http://codebrief.com/2012/01/the-top-10- javascript-mvc-frameworks-reviewed/ http://codebrief.com/2012/01/the-top-10- javascript-mvc-frameworks-reviewed/  JavaScript MVC Frameworks  http://todomvc.com/ http://todomvc.com/

4.  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/the-future-of- web-apps-single-page-applications/ http://happyworm.com/blog/2010/08/23/the-future-of- web-apps-single-page-applications/  http://singlepageappbook.com/goal.html http://singlepageappbook.com/goal.html  http://venturebeat.com/2013/11/08/the-future-of-web- apps-is-ready-isomorphic-javascript/

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

6.  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

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

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

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

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

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

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

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

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

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

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

18.  // 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());  }  })

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

23.  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

24. http://jsfiddle.net/tBS4X/1/

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

26.  The Template

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

35.  Backbone collections are simply an ordered set of modelsmodels

37.  http://backbonetutorials.com/ http://backbonetutorials.com/