Latest Ember.js Interview Questions

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, 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 ember

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, 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 LSAdapter 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 oject 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 templateName 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 serializer?

For turning a raw JSON ( JavaScript Object Notation ) payload returned from your server into a record object a serializer 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

MakeArray: This function is used when you want a given object in an array

Typeof: This is used to get the type of the passed argument

Compare: Used to compare two objects of possibly different types

isEqual: 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 Enumerables 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 is Ember.ArrayController 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.mixin class ?

Ember.mixin class can create objects, whose functions and properties can be shared among other instances and classes. This will help to share behaviour 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.TrackedArray can be useful ?

To track Array operations sn 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 its create() method. Any properties or methods you defined on the class will be available to instances.

26) Explain what is the use Ember.SortableMixin ?

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.