Google News
logo
Backbone Interview Questions
Backbone.js is a light weighted client-side (front-end) web framework based on JavaScript. It is used to develop client-side applications which run on a web browser. Developing client-side applications in Backbone.js is pretty easy and consumes a lesser amount of time. It makes developing single-page applications also easier. It supports MVC (Model, View, and Controller) architecture.
 
Model : Model is a part of the code that populates and retrieves the data

View : View is nothing but the HTML representation of this model. If you make any model changes, this will instantly reflect in the View.

Controller : The controller makes you able to save your JavaScript application via an URL.
Backbone.js is mostly used in building single-page web apps or complicated user interfaces will get extremely difficult by simply using jQuery or MooTools. The problem is standard JavaScript libraries are great at what they do – and without realizing it you can build an entire application without any formal structure. You will with ease turn your application into a nested pile of jQuery callbacks, all tied to concrete DOM elements.
Main components of Backbone.js :
 
Model : It performs various types of action on the data like validation, conversion, computed properties, access control.

View : It specifies how your data looks like.

Collection : It handles the loading and saving of new models to the server.

Router : It is used for routing client-side applications and connecting them to actions and events.

Event class object : It facilitates the objects to bind and trigger the custom events by using the desired name of our choice.
Backbone.js is required in following conditions :
 
* When you are developing a web application that requires a lot of JavaScript.
* It is required when you want to give structure to your code if your application needs to be scalable.
* Backbone is useful when a web application has to work with jQuery to traverse the DOM or give animations.
* When model changes and you want to update the HTML application automatically.
Some feature of Backbone.js are:
 
* It makes your code simple, systematic and organized. It acts like a backbone for your project.
* Backbone also works to taunt DOM manipulation libraries, templates and router together.
* It is used while building a web application with complex liftings for view rendering as well as database interaction.
* It allows developers to develop one-page applications and front-end much easier and better using JavaScript functions. 
* It creates client-side web applications or mobile applications in well-structured and organized format.
* It provides different types of building blocks like models, views, events, routers and collections for assembling client-side web applications.
* It is a simple library used to separate business and user interface logic.
* It is a free and open source library and contains over 100 available extensions.
* Backbone.js manages the data model which includes the user data and display that data at the server side with the same format written at client side.
A Collection can be defined as an ordered set of modules. In Backbone.js, there is a collection class which provides some useful methods to deal with the collections. We can extend the collection class to provide some additional functionalities. For example :
<script type="text/javascript">    
        //The model 'MyTeam' includes default values and  extended using the Backbone.Model class    
         var MyTeam = Backbone.Model.extend({    
            defaults: {    
               player: "Dhyanchand",    
               country: "India"    
            },    
         });    
    
         //'MyTeam1' is an instance of the collection    
         var MyTeam1 = Backbone.Collection.extend({    
            model: MyTeam  //model 'MyTeam' is specified for a collection by overriding the 'model' property    
         });    
    
         //The collection 'MyTeam1' is instantiated by using new keyword    
         var myval=new MyTeam1({});    
    
         //The JSON.stringify() method returns values of collection in the JSON format    
         document.write("The values in the collection are: ",JSON.stringify(myval));    
 </script>

 

Following are the three js files that we require to setup Backbone.js and make a working environment :
 
* jQuery
* Backbone
* Underscore

In our application, we have to put these files within the js folder and use it on our index.html page.

Backbone.js routers are used to route the application's URL to some particular actions and events. At least one route must be present for every defined router. It also defines the URL representation of the application's object when web applications provide linkable, bookmarkable, and sharable URL.
 
<script type="text/javascript">    
        var RouteMenu = Backbone.View.extend({    
           el: '#routemenu',  //'el' defines which element to be used as the view reference    
           events: {    
              'click a' : 'onClick'    
           },    
           onClick: function( e ) {    
              router.navigate('/');    
           }    
       });    
       var Router = Backbone.Router.extend({    
          routes: {    
             'route/:id' : 'defaultRoute'    
          },    
       });    
       var routemenu = new RouteMenu();    
       Backbone.history.start();    
</script>

 

Backbone.js event can be defined as the module which can be mixed with any object. There are following methods which are used to manipulate Backbone.js events,
 
on - It binds an event to an object and executes the callback whenever an event is fired.
off - It removes callback functions or all events from an object.
trigger - It invokes the callback functions for the given events.
once - It extends the backbone model class while creating your own backbone model.
listenTo - It informs one object to listen to an event on another object.
stopListening - It can be used to stop listening to events on the other objects.
listenToOnce - It causes the listener, to occur only once before the callback function is being removed.
Backbone.js is required in following condition
 
* When developing a web application that requires a lot of JavaScript
* It is required when you want to give structure to your code, if your application needs to be scalable
* Backbone is useful when a web application has to work with jQuery to traverse the DOM or give animations