Backbone.JS Interview Questions and Answers

Backbone.js is a JavaScript framework or JavaScript library for creating single page web application by MVC model and connecting the whole of it to existing API over the RESTful JSON interface. Or Backbone.js is a client-side (Model, View, and Controller) MVC-based JavaScript framework. It purely is written in Javascript.Backbone.js is used for creating single page applications using a RESTful service for persisting data.

• Models with key-value binding and custom events.
• Views with declarative event handling.
• Collections with a rich API of enumerable functions.

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.

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.

The main component of Backbone.js are

• Model
• View
• Collection
• Router
• Event class object

Backbone Models offer you a way to organize your domain specific code. Just like models in other MVC frameworks like Ruby on Rails, models in Backbone.js manage the domain data, validations etc. Using Backbone. Sync, they also take care of saving and fetching data from the server.

Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. This tutorial will not be addressing how to bind models and collections to views but will focus on view functionality and how to use views with a JavaScript templating library, specifically Underscore.js’s _. template.

Backbone Collections are ordered set of Models. Most single page applications need at least one (and often more) collections. It handles the loading and saving of new models to the server. It provides helper functions to perform aggregation and computation against a list of models.

Backbone.Router provides methods for routing client-side pages and connecting them to actions and events.

Sync is responsible for all the server integrations. Whenever you save a model or fetch a collection, Backbone. Sync is involved. The Backbone documentation gives a great overview and if you are building a typical web-app that talks to a RESTful API, you will hardly have to fiddle with Backbone Sync.

Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events. Events do not have to be declared before they are bound, and may take passed arguments

The Backbone. ModelBinder class contains all of the logic to facilitate View-Model binding. ModelBinder is a class in Backbone.js to bind backbone model attributes to:

Read-only html elements such as <span>, <div> etc.

Html element attributes such as enabled, displayed, style etc.

Editable form elements such as <input>, <textarea> etc. This type of binding is bidirectional between the HTML elements and the Model’s attributes.

Model.cid works as a unique identifier. It is a special property of models, the cid or client id is automatically assigned to all models when they are first created. This property is useful when the model is not saved to the server, but needs to be visible in the UI. It takes from c1, c2…

In Backbone.js models attributes stored in a hash.

It returns a shallow copy of the model’s attribute for JSON stringification. This function is used for persistence, serialization and for augmentation before being sent to the server. This does not return a JSON string.

If you are working with Backbone, Backbone models follow traditional REST. As mentioned in the docs for Backbone. Sync ():

Create → POST /collection

Read → GET /collection [/id]

Update → PUT /collection/id

Patch → PATCH /collection/id

Delete → DELETE /collection/id

If you need to modify what verbs and endpoints are used for methods fetch (), save (), and destroy (), you can override Backbone.sync on a per model basis to accomodate custom endpoints and HTTP verbs.

The following three js files to setup a working environment for backbone

• JQuery
• Backbone
• Underscore

In your application put these files within js folder and use it in your index.html page

setElement function is used when Backbone view has to be applied to a different DOM element.

Unbinding function is used to remove the validation binding on the model and removing all events hooked up on the collection

• InitialCopyDirection
• ModelSetOptions
• Change Triggers
• Bound Attribute
• SuppressThrows
• Converter

It gets the current value of an attribute from the model but returns the HTML-escaped version of a model’s attribute.  It is helpful in preventing XSS attacks, if you are interpolating data from the model into HTML

Whenever data of a model is returned by the server while fetching or storing, this data is called parse. It is called by Backbone whenever a collection’s models are returned by server.

In order to access a model’s data from a view in backbone.js you have to initialize your Model:

var author= Backbone.Model.extend({

      initialize: function(){

        console.log(‘intailized’);

      },

      defaults:{

          names:[‘Bob’,’Sim’,’Dart’]

      }

    })

var person_view = Backbone.View.extend({

    initialize: function() {

        this.model = new author();

    },

    output: function(){

        console.log(this.model.get(‘names’))

    }

});

In Backbone.js, when you want to remove the validation binding on the model or all models, removing all events hooked up on the collection, you can use Unbinding function.

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

• Backbone is best useful to develop MVC like web applications, single page web applications or complex JavaScript web applications in an organized and structured manner without JavaScript code mixing with HTM
• It allows you to develop small Web applications, using the jQuery framework.
• Backbone.js alleviates the cluttered code by implementing an event-driven communication between models and views.
• It allows you to sync with the back-end to provide an amazing support for RESTful APIs.
• It allows you to provide less code if you are more attached to the backbone conventions.
• No more JavaScript Spaghetti.
• Does not require jQuery. Data.