What is backbone.js


Published on

What is Backbone.js?

Backbone.js is a JavaScript library which uses a RESTful JSON interface. Backbone is very lightweight as it is designed to build single page web apps

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

What is backbone.js

  1. 1. What is Backbone.js?
  2. 2. Backbone.js is a JavaScript library which uses a RESTful JSON interface. Backbone is very lightweight as it is designed to build single page web apps
  3. 3.  Representational State Transfer  Used for interacting with content on remote systems  Create, Read, Update and Delete using HTTP Requests GET, POST and PUT  Because REST is an architectural concept and not a standard, there are no set rules for how a client and service should use the set of HTTP verbs  RESTful message formats include JSON & XML
  4. 4.  When using Backbone correctly, your data is structured into “Models” with key-value binding. Models can be created, updated, validated and destroyed.  Elements in the UI are used to trigger a change event to your models  When a change in the model is triggered, your views respond accordingly
  5. 5.  Backbone models are for encapsulating entities that are associated with data  You extend Backbone.Model to provide a basic set of functionality for managing changes in data  They provide accessor and mutator access to the data through get() and set() methods.
  6. 6. User = Backbone.Model.extend({ initialize: function(){ alert(“User Created"); }, login: function(){ //Login code } }); //Instantiate and set attributes var user= new User({username: “johndoe”, email: “john@yahoo.com”}); //To get attributes var name = user.get(„username‟);
  7. 7.  Collections are ordered sets of models  Collections get all of the Underscore array/collection methods for convenient set manipulations. // Create an array of models that can be passed in to a collection var models = [ ] for (var i=0; i < 5; i++) { models.push(new Backbone.Model({ num: i }) } // Create collection containing the models var collection = new Backbone.Collection(models)
  8. 8.  Events can be used with virtually any object  This allows the object to have the ability to bind and trigger custom named events  Similar to JQuery Event Binding
  9. 9. var object = {}; _.extend(object, Backbone.Events); object.on("alert", function(msg) { alert("Triggered " + msg); }); object.trigger("alert", "an event"); //Can use namespaced if there are a large number on one page book.on("change:title change:author", ...);
  10. 10.  Views are tied to the data/models that needs to be displayed to the user  In Backbone, views act like controllers as well, which is different than conventional MVC  Controllers and views are interactive  Views listen to events and act accordingly  Underscore.js is used for templating
  11. 11. <div id=“userdiv"></div> <script type="text/javascript"> UserView = Backbone.View.extend({ initialize: function(){ alert(“Welcome to the user view"); } }); var user_view = new UserView({ el: $("#userdiv") }); </script>
  12. 12. <script type="text/template" id=“user_template"> <ul> <li>Username:<%= user.get(„username') %></li> <li>Email: <%= user.get('email') %></li> </ul> </script> render: function(){ // Compile the template using underscore var template = _.template( $("#user_template").html(), {} ); // Load the compiled HTML into the Backbone "el" this.$el.html( template ); }
  13. 13. THAT‟S IT!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.