Introduction to Backbone.Js

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

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/ • JavaScript MVC Frameworks • http://todomvc.com/ Some Top JavaScript Frameworks

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://singlepageappbook.com/goal.html • http://venturebeat.com/2013/11/08/the-future-of-web-apps-is-ready-isomorphic-javascript/ Why Backbone.Js?

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? • browsersare no longer the only clients • Other clients such as mobile devices, tablet devices, Google Goggles and electronic fridges etc. are increasing very rapidly Why Backbone

6. Benefits of Backbone • incredibly small library • Provide a significant amount of functionality and structure • Essentiallyan MVC for the client • Allows you to make your code modular Benefits of Backbone

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. Models in Backbone.js

8. Person = Backbone.Model.extend({ • initialize: function(){ • alert("Welcome to this world"); • } • }); • var person = new Person; Models in Backbone.js

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}); Setting Attributes in Model

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

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

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' Setting model defaults

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 }); • } • }); Manipulating model attributes

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

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 ); • }); • } • }); Listening for changes to the model

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 • varUserModel = Backbone.Model.extend({ • urlRoot: '/user', • defaults: { name: '', email: '' } • }); Interacting with the server

17. Creating a new model

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()); • } • }) Getting/Retrieving a Model (i.e user)

19. Updating a model

20. Deleting a model

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. */ Get All the Current Attributes

22. Validate data before you set or save it

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. View in Backbone.js

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

25. varsearch_view = new SearchView({ el: $("#search_container") }); With el, backbone view becomes the owner of the div#search_container Views in Backbone

26. The Template Loading/Rendering a template

27. Render View using the template

28. Listening for Events

29. Using Template Variables

30. Using Template Variables

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

32. Routers in Backbone

33. Dynamic Routing

34. Dynamic Routing Cont. ":params" and "*splats"

35. Backbone collections are simply an ordered set of models Collections in Backbone

36. Collections in Backbone

37. http://backbonetutorials.com/ References