Emberjs Interview Questions and Answers

What Is Ember.js?

Ember.js is a free, open source, front-end technology based on MVC (Model View Controller) pattern and written in JavaScript.

Ember.js was developed by Yehuda Katz in Dec 08, 2011. Now upgraded versions are take care by Ember core team.

Ember.js allows developers to create scalable, single page applications by incorporating common practice.

In the Ember.js -

· Route is used as model

· Template as view and

· Controller manipulates the data in the model

Previously Ember.js is known as SproutCore MVC frameworks.

Why you use Ember.js?

1. Open source JavaScript framework

2. Flexible framework that embraces the concept of fast web page

3. It has smaller size as compare to other library

4. Data binding Support

What Are the Features of Ember.js?

1. Creating reusable modules

2. Easy to configure

3. Handlebars Templates

4. Automatic determines the route and controller during declaration of the route resources

5. Used routes

What Are the benefits of using Ember.js?

1. It is free and open-source.

2. Unlimited access

3. It doesn’t need server requests to perform its task

4. DOM can directly be updated

How to install Ember using npm?

npm install -g ember-cli

How to get to know the Version of Ember?

ember –v

What Is npm install?

NPM is a Node.js package manager. It is used to install the node programs.

How to Install NPM on windows?

Download for Windows (x64) by using the URL - https://nodejs.org/en/

Write the steps to create an app in Ember.js?

Steps -1, Install NPM are a Node.js package manager.

Install an ember-cli

Steps -2, Create a new application by using –

ember new projectName

Steps -3, Create components by using –

ember g component

Steps -4, Define your routes in router

What Are different commands available in ember-cli?

The below commands is use to display the list of -

ember g route about

What Are the core concepts of Ember.js?

1. Store - It is central repository and cache records which are available in the apps. It also can be accessed by controller.

2. Models - A model is a class which defines the data of properties and its behavior.

3. Records - A record is an instance of a model which contains information that is loaded from a server.

4. Adapter - It is responsible for translating requested records into the appropriate calls.

5. Serializer - Translating JSON data into a record object.

6. Automatic Caching – It is used for caching the records

What Are basic models of Ember.js?

1. Routes - State of application is represented by URL and each URL has a corresponding route object that.

2. Models- Use to load data from Server.

3. Templates - This is html of layout.

4. Components - It is custom tag.

5. Services - Services are just singleton objects to hold long-lived data such as user sessions

What Is Ember data?

Ember data is a data management library that retrieves records from a server, store them, and update them in the browser and save them back to the Server.

We can generate ember-data model using Ember CLI.

The main purpose of ember-data is -

1. Easily retrieve records from a server

2. Cache the data for increase the performance of apps.

3. Create new records on the client, if required.

What is Application Template?

Application Template is html of layout that contains the header, footer and body of page. A template can contain multiple templates.

What are different template components in Ember.js?

1. Partial

2. View

3. Render

4. Yield

5. Outlet

What Is Ember.Namespace.Class?

The Ember.Namespace.Class is used to define an object which contains other objects and data.

What Is ember.mixin class?

The Ember.mixin class can create objects that are methods and properties can be shared with other classes and instances.

Is it possible to define a new Ember class?

Yes, it is possible! We can define an extent () method to achieve this. There is no limit on defining the same in some special cases.

What Is the directory structure in Ember.js?

Directory structure of a project -

1. I-app - It contains models, components, routes, templates, and styles files.

2. I-bower_components/ bower.json - it used to manage front-end plugins and components.

3. I-config - This is the configure settings sections where store all environments related info.

4. I-dist - The output files are created here, when your app is build.

5. I-node_nodules/package.json - It is a directory and npm files.

6. Public - This directory contains assets such as image and fonts.

7. Vendor

8. Tests/testem.js - This is automated tests for our app.

9. Tmp - Ember CLI's temporary files.

10. Ember-cli-build.js - This file tell us how CLI should build our app.

What Is ember Router?

Router is basically a medium that connects the application with browser’s address.

In other words, Router takes the responsible for connecting point between browser’s address bar and our application.

The Router using a route and resource might look like -

App.Router.map(function() {

this.resource("posts", { path: "/" }, function() {

this.route("new", { path: "/new" });

});

this.route("another", { path: "/another" });

});

What Is ember route?

Route is a location where the request of a user reaches first after it is made or translated by a Router.

Route decides what data should be provided to the Template.

Example -

App.Router.map(function() {

this.resource("posts", { path: "/" }, function() {

this.route("new", { path: "/new" });

});

this.route("another", { path: "/another" });

});

Other example -

App.Router.map(function() {

this.resource("posts", { path: "/" }, function() {

this.resource("post", { path: "/:post_id" }, function() {

this.route("edit", { path: "/edit" });

});

this.route("new", { path: "/new" });

});

How to create multiple nested resources?

Example for multiple nested resources -

App.Router.map(function() {

this.resource("posts", { path: "/" }, function() {

this.route("new", { path: "/new" });

this.resource("comments", { path: "/comments" }, function() {

this.route("new", { path: "/new" });

});

this.route("another", { path: "/another" });

});

How can you generate a route in ember.js?

We can generate a route using Ember CLI.

Defining Your Routes -

ember generate route route-name

Steps -

1. Installing route

2. Create app/routes/about.hbs

3. Create app/templates/about.hbs

4. Updating router

5. Add route about

6. Installing route test

Ember CLI commands -

ember generate route about

//OR

ember g route about

//OR

//You can generate certain blueprints with a pods structure by passing the --pod option -

ember generate route about –pod

It looks like -

installing route

create app/routes/about.js

create app/templates/about.hbs

updating router

add route about

installing route-test

create tests/unit/routes/about-test.js

Other commands are -

ember g resource events

ember g route events/view

Example looks like -

App.Router.map(function() {

this.resource('events', function() {

this.route('view', { path: "/view/:id" });

})

});

What Are enumerable in ember.js?

An enumerable is any object in ember.js which contains a number of child objects and allows us to work with those children using “ember.enumerable” API.

What Are services in ember.js?

An Ember.Service is a class singleton object that holds on to state. It's never destroyed as long as the application runs.

Services are generated with the help of ember CLI service generator.

Services can be helpful in diffrents situations i.e.

1. Session Data

2. Server-sent events or notifications

3. APIs that talk to a server

4. Web Sockets

5. Geo Location data

6. Events pushed from a server

7. Third-party APIs

8. Logging