8 Essential Backbone.js Interview Questions *

Toptal sourced essential questions that the best Backbone.js developers and engineers can answer. Driven from our community, we encourage experts to submit questions and offer feedback.

Hire a Top Backbone.js Developer Now
Toptal logois an exclusive network of the top freelance software developers, designers, finance experts, product managers, and project managers in the world. Top companies hire Toptal freelancers for their most important projects.

Interview Questions

1.

What are some alternatives to Backbone.js’s dependencies?

View answer

Backbone.js has only one hard dependency: Underscore.js. However, you often need to include jQuery and json2.js to support certain features. Sometimes it is possible to use Lo-Dash and Zepto (two more lightweight alternatives to Underscore.js and jQuery) when it comes to using Backbone.js.

2.

Why would you want to bind event handlers using “listenTo()” instead of “on()”?

View answer

There are two advantages to using “listenTo()” instead of using “on()”. Typically, the way they are used is a bit different:

listener.listenTo(object, event, callback)
object.on(event, callback)

With “listenTo()”, the object whose events you want to listen to is passed as the first argument. In the case of “on()”, it is actually a method on that object.

The advantages of “listenTo()” over “on()” are:

  • The listener keeps track of all the event handlers, making it easier to remove them all at once when needed.
  • The callback’s context is always set to the listener itself.
3.

How do you sort a collection? When is it important to explicitly invoke “sort()” on a collection?

View answer

With Backbone.js, collections can be sorted by defining comparator on the collection object. By default, collections are not explicitly sorted. By defining a comparator, a collection is sorted whenever a model is added or the “sort()” method is invoked on a collection:

var Fruits = Backbone.Collection.extend({
	comparator: function(a, b) { /* .. */ }
})
// Or
var Fruits = Backbone.Collection.extend({})
var fruits = new Fruits()
fruits.comparator = function(a, b) { /* .. */ }

The comparator property can be a function with one argument (similar to one used in “sortBy”) or two arguments (similar to one used in “sort”), or a string identifying the attribute by name to sort on.

When an attribute of a model in a collection changes, the collection doesn’t sort itself. This is a scenario where sort must be invoked explicitly to update the order of models in the collection.

Apply to Join Toptal's Development Network

and enjoy reliable, steady, remote Freelance Backbone.js Developer Jobs

Apply as a Freelancer
4.

What function would you change to override Backbone.js’s default support for REST APIs?

View answer

To override the default behavior on a per-model basis, you can set a custom function to “Model.sync”. To make the change global, you can set the custom function to “Backbone.sync”. Ideally, the “sync” function should handle four methods: “create”, “read”, “update”, and “delete”. The function receives the CRUD method name, the model itself, and an object with some additional options. Sometimes setting “Backbone.emulateJSON” to true can often do the job, in which case all you need to do is submit requests as “application/x-www-form-urlencoded” instead of “application/json”.

5.

How can you watch for changes on a single attribute of a model?

View answer

Model objects fire the “change” event whenever some data changes within the model. However, the object fires another event with a name specific to the attribute that has changed: “change:[attribute]”. For example:

var Fruit = Backbone.Model.extend({})
var fruit = new Fruit({
	weight: 3.25
})
fruit.on(‘change:weight, function() {
	// Event “change:weight” will fire whenever the weight attribute of fruit changes.
})
6.

How do you define a model that when you try to fetch or save uses the URL “/api/records/{timestamp}”? Where “{timestamp}” is the number of seconds elapsed since epoch.

View answer

URLs for models are defined by setting the “url” attribute. The attribute can be set as a string or a function. We can set a function that returns a string satisfying the URL pattern in question:

var Record = Backbone.Model.extend({
	url: function() {
		return ‘/api/records/’+Math.round(new Date().getTime()/1000)
	}
})

Another less recommended approach to this would be to use an appropriately generated URL whenever and wherever you invoke “fetch()”.

7.

Why is it not recommended to change the “el” property of a view directly? How should it be done instead?

View answer

Attempting to change the “el” property may lead to inconsistent behavior from the Backbone view. This is because changing the “el” property directly doesn’t automatically update the cached jQuery object property corresponding to it, which is “$el”. The correct way to do this is to use “setElement()” on the view:

view.setElement(otherElement)
8.

What is the difference between the properties “id” and “cid” on a model object?

View answer

The “id” property on a model is automatically assigned based on the “id” set in the model’s attributes hash. Ideally, this is the ID that you receive from the rest API for the resource that you are querying. On the other hand, “cid” is an ID temporarily assigned to each model and is useful until an actual ID is determined for the object. For example, a model pushed to a collection that has not yet been persisted can be addressed using “cid”, until it is saved in the database and an actual ID is generated for it.

There is more to interviewing than tricky technical questions, so these are intended merely as a guide. Not every “A” candidate worth hiring will be able to answer them all, nor does answering them all guarantee an “A” candidate. At the end of the day, hiring remains an art, a science — and a lot of work.

Why Toptal

Tired of interviewing candidates? Not sure what to ask to get you a top hire?

Let Toptal find the best people for you.

Hire a Top Backbone.js Developer Now

Our Exclusive Network of Backbone.js Developers

Looking to land a job as a Backbone.js Developer?

Let Toptal find the right job for you.

Apply as a Backbone.js Developer

Job Opportunities From Our Network

Submit an interview question

Submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.

* All fields are required

Looking for Backbone.js Developers?

Looking for Backbone.js Developers? Check out Toptal’s Backbone.js developers.

Álvaro Lázaro Gallego

Freelance Backbone.js Developer
Spain
Toptal Member Since January 2, 2017

For over the past eleven years, Álvaro has worked as a software developer specializing in back-end development with Python. He also has a good knowledge base of Angular, Backbone.js, and React. In Álvaro's free time, he likes to play with machine learning and iOS apps.

Show More

Felipe Esposito

Freelance Backbone.js Developer
Argentina
Toptal Member Since November 7, 2016

Felipe has worked as a software developer for the last ten years using Python and Django as his primary tools, though he has used them for much longer. He also has experience with many popular JavaScript frameworks such as Vue, React, Ember, and Backbone.js, using them in most of his projects. Felipe is a team player and has good communication skills.

Show More

Boyan Filipov

Freelance Backbone.js Developer
Austria
Toptal Member Since July 23, 2021

Boyan is a full-stack developer, an agile team player, and a clean code advocate with 20+ years of experience, including 15+ years as a freelance developer. He enjoys working on both the back and front ends of a good stack. After focusing on Java in his early career, he expanded into web technology with PHP and MySQL; then added Perl, PostgreSQL, Visual Basic, and JSP; and, most recently, shifted toward JavaScript, jQuery, and TypeScript with frameworks like React, Backbone.js, and Vue.js.

Show More

Toptal Connects the Top 3% of Freelance Talent All Over The World.

Join the Toptal community.

Learn more