Backbone.js Interview Question and Answer

1) Explain what is backbone.js?

Backbone.js is a JavaScript client-side (front end) framework, which helps to organize your code and makes it easier to develop single page applications.  It allows you to structure JavaScript code in an MVC (Model, View, and Controller) fashion

• Model: It is a part of your code that populates  and retrieves the data

• View: It is the HTML representation of this model

• Controller:  It enables you to save your JavaScript application via a hash bang URL

2) What are the main components of Backbone.js?

The main component of Backbone.js are

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

3) Explain what is Backbone.js collections?

An ordered set of models are represented by Backbone.js collections. Any event in model will trigger an event in collection directly.  For example, you can bind “change” event to be notified in a case when any model in the collection has been modified.

4) Explain what is Backbone.js router is used for?

Whenever an application want to change their URL fragment in order to provide bookmark able and shareable URLs for an Ajax heavy application, backbone.js router is used.

5) What is Backbone events?

Backbone 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 are not declared before they are bound to any object. Events reflects the state of the model.

6) What are the key points of Backbone?

• It has hard dependency with underscore.js to make it more functional and supporting a range of useful collection based operations
• With jQuery it has a soft dependency
• When the model changes it can update the HTML of your application automatically
• It uses client-side rendering framework or JavaScript templating to render html which avoid you to embed HTML code inside JavaScript code
• For UI updates and DOM manipulations if offers a significantly clean and elegant way

7) Why you have to use Backbone? Advantages?

• By using JavaScript with the minimal set of data-structuring ( models & collections) and user interface (views & URLs) it enables you to develop a web application
• 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 HTML
• Provides key value binding and custom events
• API with tons of functions
• Robust event handling
• API connection over a RESTful JSON interface

8) What are the three js files that you require to setup a working environment for backbone?

You are required 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

9) Explain when you require Backbone.js?

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

10) Explain what is view in Backbone.js?

Backbone view is a JavaScript object that manages a specific DOM element and descendants.

• Views are not HTML
• It is a description of a model
• The HTML code comes from templates
• Works with any template system

11) Explain what is Backbone.js Models?

Backbone.js models are object and core of backbone.js. It contains an array of attributes and listens for events. To represent your data, Backbone provides a model object.  For example, you have a to do list, you would have a model representing each item on that list.

12) Explain how you can use backbone.js for multiple page web app?

For multiple page web app in backbone.js there are lots of consideration but here are two which can be useful

• Serving the page: In this, where you want to have your web server route everything to the server route everything to serve the same static page. That means that everything in http://guru99.com/* will serve /var/www/guru99.com/index.html. once the static page is loaded, the JS on that page will decide what to do given the url
• Push State: You can still use backbone routing to do your routing, but don’t use hash bangs.  This will allow you to navigate to URLs without actually needing a page refresh.

13) Explain what is Model binder in Backbone.js?

To make synchronization process of views and models together, Model Binder class is used.

14) What is the most powerful capabilities of the Model Binder?

The most powerful capabilities of Model Binder class is that it enables you to define scope when you create your bindings using jQuery.

• If your views are simple, you can rely on default scoping rules that are based off of the html “name” attribute.
• You can define scoping with jQuery selectors if your views are complex.

15) Explain what is Converter in Backbone.js?

A function is called when model’s attribute is copied to an html element or when an html element value is copied into a model’s attribute, this function is referred as Converter in Backbone.js

16) What is model? Attributes?

The attributes property is the internal hash containing the model’s state, usually a form of the JSON object representing the model data on the server. It is often a straightforward serialization of a row from the database

17) What is the function of to JSON?

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

18) Explain when you can use Unbinding function 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.

For example: Backbone.Validation.Unbind (view)   [This will remove the validation binding]

19) What are the configuration options available?

The configuration options available are

• InitialCopyDirection
• modelSetOptions
• change Triggers
• bound Attribute
• suppress Throws
• converter

20) Mention what are the typical problems you might face with the Backbone view code?

• Application models don’t change very often
• Application pages are frequently refreshed from scratch from the server
• Between different view models are not shared

21) What is the function of escape?

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

22) Explain what is the function of parse?

Whenever a model’s data is returned by the server, in fetch and save, this data is called parse. It is called by Backbone whenever a collection’s models are returned by server, in fetch.

23)  What is Backbone? Sync is used for?

When Backbone wants to save or read a model to the server it calls out a function called as Backbone. Sync.

24) In Backbone View, what is the use of set Element?

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

25)  Explain what is model.cid?

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 the from c1, c2….

Ember.js Interview Question and Answer

1) Explain what Ember.js is and how it works?

Ember.js is used for creating web applications that eliminates boilerplate and at the same time provides a standard application architecture.

Ember helps to create applications, whose logic runs in browser and also it does not require server requests to functions. Ember update the DOM directly and instantly when any user interacts with things like button and text boxes on the browser page.

2) List out main components of Ember.js?

The main components of Ember.js are

• Models
• The Router
• Controllers
• Views
• Components
• Templates
• Helpers

3) Explain what is model in Ember.js?

Within an Ember application a model object is used to store persistent state.  These model object back the templates and provide data to be displayed within the HTML.

4) Explain how ember applications are structured?

The application ember.js is based on MVC (Model, View, and Controller) structure

• Models: It defines the data that is used in an application
• Controllers: It modifies query and edit the data and provide user interactions
• Views: It display the data and capture user actions

5) What controller does in Ember.js?

Controller does two thing in Ember.js

• First it can decorate the model returned by the route
• It can listen to actions performed by users

6) Explain how is ember.js is different than traditional web application?

In Ember.js, instead of majority of your application’s logic living on the server, an ember.js application downloads everything it required to run in the initial page load. So user does not have to load a new page while using the app and UI will responds quickly. The advantage of this architecture is that your web application uses the same REST API as your native App.

7) Explain how Router and {{outlet}} tag can be useful in ember.js?

• Router allows you to specify all the possible states of an app and map them to urls
• To build a hierarchy of sections by providing a mean for a container template to include a child template the {{outlet}} tag is used

8) Explain what is the difference between Router and Route in ember.js?

Router:  It is the connecting point between browser’s address bar and our application.  It translates address into Route

Route: It is where a user request will land after it was translated by a Router.  Route decides what data should be provided to the Template

9)   Explain what is Ember-data?

Ember-Data is a library that retrieve records from a server, store them, and update them in the browser and save them back to the server.

10) Explain the role of adapter and types of adapters?

Adapter queries the back end, each adapter is made up of particular back end.  For example Rest adapter deals with JSON APIs and LS Adapter deals with local storage.

11) Explain what are the two ways of defining and inserting a view?

First way

• By extending the Em.View class, you have to create an object in your JavaScript to define a view. You can declare your functions and variables inside that.
• Now to insert a view in your template,  you have to follow the write the handlebar script {{ #view App.ViewName}}

Second Way

• In this technique, the name of the view object is not required, while inserting into the template. But inside the object you have another property called as template Name which should be initialized with the value same as data template name attribute in handlebar’s script tag, in your template

12) Explain what is controller in ember.js?                  

When you have to handle a business logic you can use controller, a controller can represent a section of a page or entire part of it.  It is like a block of logical functionality.

13) Mention the template components used in ember.js?

The template components used in ember.js are

• Partial
• View
• Render
• Yield
• Outlet

14) Explain what is serialize?

For turning a raw JSON (Java Script Object Notation) payload returned from your server into a record object a serialize is responsible.  JSON APIs may represent attributes and relationship in many different ways.

15) How you can define a new ember class?

You can use call the extend () method on Ember. Object to define a new ember class

16) Explain how you can create an Ember. Handlebars template?

Call Ember.Handlebars.Compile () to create an ember. Handlebars template.  It will return a function which can be used by ember. View for rendering.

17) Explain how you can add data using fixture into an application?

In order to put sample data into an application before connecting the application to long term persistence, fixtures are used.

• First update js/application.js to indicate that your application’s application adapter is an extension of the DS.FixtureAdapter.  Adapters are used for communicating with a source of data for your application.  Usually, this will be a web service API.
• Next, update the file at js/models/todo.js

18) Mention some of the functions used in ember packages/ember run-time/lib and packages/ember metal/lib/utils.js?

• None : Returns tur if argument is null or undefined
• Empty: Utility function constrains the rules on ember. None by returning false for empty string and empty arrays
• isArray: Use this to check whether the value is an array
• Make Array: This function is used when you want a given object in an array
• Type of: This is used to get the type of the passed argument
• Compare: Used to compare two objects of possibly different types
• is Equal: It checks whether the passed two arguments are logically equal
• Inspect: While debugging this function is useful. For a given object it returns the string description
• Log Binding:  Log binding is not a function but a Boolean function. If set true ember will log all the activity that is happening on the bindings

19) Explain what is Enumerable in ember.js?

In Ember.js an enumerable is any object that contains a number of child objects, and enables you to work with those children using the Ember. Enumerable API. Native JavaScript array is the most common enumerable in majority of Apps.

20) Explain what Ember.ArrayController is and what is the advantage of it?

Ember.ArrayController is a controller that wraps an underlying array and adds additional functionality for the view layer.  The advantage is that you have to set up your view binding only once.

21) Explain Application Template?

In Ember.js, Application Template is a default template that is used when your application starts.  In template application, you have to put your header, footer and any other decorative item that you want to display on web page.

22) Explain what is ember. Mixing class?

Ember.mixin class can create objects, whose functions and properties can be shared among other instances and classes.  This will help to share behavior between objects as well as design objects.

23) What is Ember.Namespace.Class?

A Namespace. Class is usually used to define an object which contains other objects or methods such as an application or framework.

24) When Ember. Tracked Array can be useful?

To track Array operations an Ember.TrackedArray can be used.  It can be more useful in a condition when you want to compute the indexes of items in an array after they have been shifted by subsequent operations

25) Explain how you can create instances in ember.js?

You can create a new instances once you have defined the class by calling it’s create () method.  Any properties or methods you defined on the class will be available to instances.

26) Explain what is the use Ember. Sortable Mixing?

For array proxies Ember.SortableMixin provides a standard interface to specify a sort order and maintain this sorting when objects are updated, removed or added without changing the order of the underlying model array.