BackboneJS - Interview Questions

Backbone.js is a light weight JavaScript library that allows developing and structuring client side applications that run in a web browser.

Creating application using tons of lines code using JavaScript or jQuery, the application may become complicated. Backbone.js library that provides good functionality for developing application, so that you won't end up the application in mess. Your code will be cleaner, nicer and more maintainable.

Backbone.js allows developing web applications in well organized and structured manner without JavaScript code mixing with HTML. It decouples application between models and views that renders the model's data.

The main components of Backbone.js are:

• Model

• View

• Collection

• Router

• Events

Features include easier front end development, assembles client side web applications, and creates client side applications in organized format.

JavaScript

It supports three types of js files −

• jQuery

• Underscore

• Backbone

Some of key points of the Backbone.js are −

• It develops applications and front end much easier using JavaScript functions.

• It has hard dependency with Underscore.js and soft dependency with jQuery.

• When model changes, it automatically updates the HTML of your application.

• It acts like a backbone for your project and helps to organize your code.

• It is free and open source library and contains over 100 available extensions.

Following are the benefits of Backbone.js −

• It organizes your code properly and makes your code modular.

• It is light weight library allows well structured manner for developing your application.

• Backbone communicates via events, so that you won't end up the application in mess. Your code will be cleaner, nicer and more maintainable.

• It 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.

It is core of Backbone.js which contain dynamic data and its logic. To represent your data, Backbone.js provides a model object.

Views are used to reflect "how your data model looks like". They represent model's data to the user.

Collections are ordered sets of Models. We just need to extend the backbone's collection class to create your own collection. Any event that is triggered on a model in a collection will also be triggered on the collection directly.

Router is used for routing client side applications and defines URL representation of application's object. Router is required when web applications provide linkable, bookmarkable, and shareable URL's for important locations in the app.

Events are capable of binding objects and trigger custom events i.e. you can bind the custom events by using desired name of your choice.

Following are the events used with Backbone.js:

• On

• Off

• Trigger

• One

• listenTO

• stopListening

• listenToOnce

http://backbonejs.org/

It is a client id which is auto generated by Backbone, so that model can be uniquely identified on the client. The cid or client id is automatically assigned to all models when they are first created.

It returns copy of the attributes as an object for JSON stringification.

It can be used to communicate with server and to represent the state of a model.

It is used by the server and returns the model's data by passing the through the response object and represents the data in JSON format.

It is used to retrieve the model from a collection by using specified index.

Push adds a model at the end of a collection and pop take array of models and removes the models from the collection.

Unshift add specified model at the beginning of a collection and shift removes the first item from the collection.

It returns the shallow copy of the elements from the collection model.

It retrieves the attributes from each model in the collection.

It returns a new instance of the collection with an identical list of models.

It defines URL representation of application objects on router and contains the incoming route value from the URL.

The el defines which element to be used as the view reference and $el represents a cached jQuery object for the view's element.

To apply a Backbone view to a different DOM element, then use setElement, which create the cached $el reference and move the views delegated events from the old element to the new one.

While rendering the view, template creates reusable copies of markup and provides access to instance data.

It contains the logic for rendering the template which constructs the view.

It is a function that Backbone calls every time to read or save the model to the server. It represents the state of the model.

It is used to manipulate the BackboneJS-History. It starts listening to routes and manages the history for bookmarkable URL's.

It displays the original value of Backbone object and allows storing reference to a backbone.

October 13, 2013

Jeremy Ashkenas

The following are some of the web applications built with Backbone.js:

• BitTorrent.com

• DocumentCloud

• Flixster

• Foursqaure

• LinkedIn Mobile

• Sony Entertainment Network

• Pinterest

• The Climate Corporation

1.1.2 / February 20, 2014

It invokes the callback functions for the given events.

A listenTo event tells an object to listen to a particular event on another object and listenToOnce event causes the listenTo occur only once before the callback function is being removed.

It can be used to stop listening to events on the other objects.

It gets the current value of an attribute from the model but returns the HTML-escaped version of a model's attribute.

It returns true if attribute gets changed since the last set.

There is no comparator for a collection. In order to maintain the collection in sorted order, we use the comparator property.

It directly returns only the first model in the collection that matches the passed attributes.

Backbone.js is a light weight library which gives better functionality and structure for your application. It helps to write code in organized way and reduce the development time by providing built in functions.

It allows Backbone to use particular object as DOM/Ajax library.

In model, to create your own model class use Backbone.Model.extend. In collection, to create your own collection class use Backbone.Collection.extend. In router, to create custom router class use Backbone.Router.extend and in views, create your custom class by using Backbone.View.extend.

It returns a hash of only the model's attributes that have changed since the last set or else becomes false, if there are no attributes.

It is used for the instance of the model and returns url where model's resource is located.