- sandeep kamble

Download -  Sandeep Kamble

Post on 24-Feb-2016




0 download

Embed Size (px)


- Sandeep Kamble. Agenda. Single Page Applications (SPAs) Introduction to Backbone Why Backbone? Backbone MVC Model View Collections Backbone Sync Backbone Events Sample web app KinoEdu . Single Page Applications. Only one web page - PowerPoint PPT Presentation


The JavaScript Task Runner

- Sandeep Kamble

NextGen Technology upgrade Training @ Synerizip1AgendaSingle Page Applications (SPAs)Introduction to BackboneWhy Backbone?Backbone MVCModelViewCollectionsBackbone SyncBackbone Events

Sample web app KinoEdu

Synerzip Softech Pvt. Ltd.2Single Page ApplicationsOnly one web pageResources are dynamically loaded and added to the page as necessary, usually in response to user actionsThe page does not reload at any point in the process, nor does control transfer to another pageUse of JavaScript to generate content on the fly and quickly.Examples are Gmail, Twitter

Problems for developersLarge JS web apps became pretty messy really quickMore free-hanging and unrelated blocks of codeLacks of structure its hard to maintain

Synerzip Softech Pvt. Ltd.3Introduction to BackboneJavaScript library that adds structure to your client-side codeMVC framework (MV*)Models with key-value binding and custom events Collections with a rich API of enumerable functionsViews with declarative event handlingConnects it all to your existing API over a RESTful JSON interface

Synerzip Softech Pvt. Ltd.4Why Backbone?A MVC pattern to keep code cleanA client side template to easily render view elementsA better way to manage events and callbacksA way to preserve browsers back button

Light weightCode is more maintainableIs a mature, popular libraryLarge development community

Synerzip Softech Pvt. Ltd.5Backbone MVCSynerzip Softech Pvt. Ltd.6

& CollectionRESTful APIGet started with BackboneBackbone.js has dependency on underscoreJS and jQuery.

Add Backbone

Synerzip Softech Pvt. Ltd.7

ModelsRepresent your dataFor simplification it can be considered as single recordStores data in JSON formatData can be created, validated, destroyed, and saved to the serverAny change in data triggers a change eventSynerzip Softech Pvt. Ltd.8DefineSynerzip Softech Pvt. Ltd.9var courseModel = Backbone.Model.extend({// default default attribute values for model. defaults : {icon: " C ", name: "New Course Name", description : "New Course Description" }}); var course = new courseModel({name : "HTML5",description : "HTML5 Fundamentals"});MethodsSet

Set multiple attributes


toJSONSynerzip Softech Pvt. Ltd.10course.set(name, Backbone MVC);course.set({name: Backbone MVC , description: Backbone in details});course.get(name); // Backbone MVCcourse.toJSON(); // {name: Backbone MVC , description: Backbone in details}ViewsIt renders HTML [with the help of template as per need]Can be used with any JavaScript templating libraryManages DOM eventsActs like a ControllerConnected to data in Model or CollectionResponds to change event of Model to update itself

Synerzip Softech Pvt. Ltd.11DefineSynerzip Softech Pvt. Ltd.12var AppView = Backbone.View.extend({// el - stands for element. Every view has a element associate with it to render HTML content. el: '#container', //id of existing Element in the DOM

// It's the first function called when this view it's instantiated. initialize: function(){ this.render(); },events: {"click .clear":clearData"},render: function(){ this.$el.html("Hello World clear");},clearData: function(){ this.$el.html();} }); Basic Propertiesview.elReference a DOM at all times. view.el get created from the tagName e.g. tagName:span/liIt is possible to assign className, id and attributes properties to view.el.If none of these are specified, then this.el is an empty div since by default tagName is div. view.$el its a cached jQuery object of the views element (view.el).Initialize/construtorHere you have the option to pass parameters that will be attached to a model, collection or view.el.renderIn this function, you inject the markup into the elements.

Synerzip Softech Pvt. Ltd.13CollectionsOrdered sets of modelsCan fetch data from a given URLTriggers events like add/remove/resetCan sort models if you define a comparator functionSynerzip Softech Pvt. Ltd.14DefineSynerzip Softech Pvt. Ltd.15var courseCollection = Backbone.Collection.extend({model: courseModel,//url - restFul API url to get coursesurl: /courses,//parse success callback to fetch(), parse the JSON data and locate actual data array to be loaded in the collectionparse: function(data){ //data = {total:20, courses: [{..c1...},{c2}]} return data.courses;}}); var courses = new courseCollection; courses.fetch(); //load data from http://your-app .com/coursesBackbone SyncIs the function that Backbone calls every time it attempts to read or save a model to the serverBy default, it uses jQuery.ajax to make a RESTful JSON requestThe default sync handler maps CRUD to REST like so: create POST /collection ------ {your-app.com/courses}read GET /collection[/id] ------ {your-app.com/courses[/2]}update PUT /collection/id ------ {your-app.com/courses/2}delete DELETE /collection/id ------ {your-app.com/course/2}

Synerzip Softech Pvt. Ltd.16Backbone EventsEvents is a module that can be mixed in to any objectGives object the ability to bind and trigger custom named eventsEvents do not have to be declared before they are bound, and may take passed arguments.Synerzip Softech Pvt. Ltd.17var myObject = {};

_.extend( myObject, Backbone.Events);

myObject.on("alert", function(msg) {alert("Triggered " + msg);});

myObject.trigger("alert", "an event");Sample web app KinoEduCreate a sample web app KinoEdu using backboneJS, requireJS, underscroreJS and JQuery

StepsBasic setup with RequireJSCreate Course Model and ViewCourse Collection and display all coursesSearch functionalityToggle Course View to display all courses as Grid or as ListCreate CourseEdit Course

Synerzip Softech Pvt. Ltd.18Referenceshttp://backbonejs.org/http://underscorejs.org/http://backbonejs.org/examples/todos/http://ricostacruz.com/backbone-patterns/

Synerzip Softech Pvt. Ltd.19Synerzip Softech Pvt. Ltd.20Questions ???Thank You !!!Synerzip Softech Pvt. Ltd.21