Skip to main content

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?
emberv


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 aboutpod


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

Example - Services must extend the Ember.Service base class
import Ember from 'ember';

export default Ember.Service.extend({
});


Is it possible for the users to modify the objects without changing the model of model under concern?
Yes, it is possible!

What Are the common functions that you can find in the Ember Package?
1.      Empty
2.      isEqual
3.      Compare
4.      Typeof
5.      isArray
6.      Inspect
7.      Log Binding - It is a Boolean function in Ember.js
8.      And many more

What Is the use of Ember.TrackedArray?
The Ember.TrackedArray is used for tracking Array operations.
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS