introduction to backbone.js
DESCRIPTION
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 E mail: [email protected]. Introduction to Backbone.Js. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/1.jpg)
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: [email protected]
![Page 2: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/2.jpg)
I do not know everything about Backbone.js
But Backbone.Js is not Rocket Science
![Page 3: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/3.jpg)
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/
![Page 4: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/4.jpg)
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/
![Page 5: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/8.jpg)
MODELS IN BACKBONE.JS Person = Backbone.Model.extend({
initialize: function(){ alert("Welcome to this world");
} }); var person = new Person;
![Page 9: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/9.jpg)
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});
![Page 10: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/10.jpg)
GETTING/RETRIEVING ATTRIBUTES var age = person.get("age"); // 67 var name = person.get("name"); //
"Thomas“ var child = person.get("child"); //
'Ryan'
![Page 11: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/11.jpg)
SETTING MODEL DEFAULTS
Person = Backbone.Model.extend({ defaults: {
name: 'Fetus', age: 0, child: ''
}, initialize: function(){
alert("Welcome to this world"); }
});
![Page 12: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/12.jpg)
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'
![Page 13: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/13.jpg)
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 }); }
});
![Page 14: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/14.jpg)
MANIPULATING MODEL ATTRIBUTES
var person = new Person({ name: "Thomas", age: 67, child: 'Ryan‘
}); person.adopt('John Resig'); var child = person.get("child"); // 'John
Resig'
![Page 15: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/15.jpg)
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 );
}); }
});
![Page 16: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/16.jpg)
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: '' } });
![Page 17: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/17.jpg)
CREATING A NEW MODEL
![Page 18: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/18.jpg)
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()); }
})
![Page 19: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/19.jpg)
UPDATING A MODEL
![Page 20: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/20.jpg)
DELETING A MODEL
![Page 21: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/21.jpg)
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. */
![Page 22: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/22.jpg)
VALIDATE DATA BEFORE YOU SET OR SAVE IT
![Page 23: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/23.jpg)
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.
![Page 25: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/25.jpg)
VIEWS IN BACKBONE var search_view = new SearchView({ el: $("#search_container") }); With el, backbone view becomes the owner of the
div#search_container
![Page 26: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/26.jpg)
LOADING/RENDERING A TEMPLATE
The Template
![Page 27: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/27.jpg)
RENDER VIEW USING THE TEMPLATE
![Page 28: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/28.jpg)
LISTENING FOR EVENTS
![Page 29: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/29.jpg)
USING TEMPLATE VARIABLES
![Page 30: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/30.jpg)
USING TEMPLATE VARIABLES
![Page 31: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/31.jpg)
ROUTERS IN BACKBONE Backbone routers are used for routing
your applications URL's when using hash tags(#).
![Page 32: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/32.jpg)
ROUTERS IN BACKBONE
![Page 33: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/33.jpg)
DYNAMIC ROUTING
![Page 34: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/34.jpg)
DYNAMIC ROUTING CONT. ":PARAMS" AND "*SPLATS"
![Page 35: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/35.jpg)
COLLECTIONS IN BACKBONE Backbone collections are simply an
ordered set of models
![Page 36: Introduction to Backbone.Js](https://reader033.vdocuments.mx/reader033/viewer/2022061412/56816624550346895dd97d14/html5/thumbnails/36.jpg)
COLLECTIONS IN BACKBONE