EmberJS - Overview

What is Ember.js?

Ember.js is an open source JavaScript client-side framework for developing the web applications and uses the MVC(Model-View-Controller) architecture pattern. In Ember.js, route is used as model, handlebar template as view and controller manipulates the data in the model.

EmberJS - Environment Setup

It's easy to configure Ember.js, by including the JavaScript library files into the <script> tag in the HTML file; this can be done in two ways as follows:

• You can download the latest version of Ember.js JavaScript library files from its official website.
• You can include the latest version of CDN's from the official website.
  

EmberJS - Application

Architecture

The below figure show the architecture of an Ember.js which illustrates an interaction between routes, controllers, views, templates and models.

EmberJS - Object Model

Object oriented analysis and design technique is called as object modeling. In Ember.js, all objects are derived from the Ember.Object.

EmberJS - Template

A template is used to create a standard layout across multiple pages. When you change a template, the pages that are based on that template automatically get changed. Templates provide standardization controls.

EmberJS - Router

Introduction

This is the core feature of the EmberJs. The router is used to translate URL into the series of templates and also it represents the state of an application. The EmberJs uses the Hashchange event that helps to know change of route, this can be done by implementing HashLocation object.

EmberJS - Component

Introduction

The Ember.js components uses the W3C web component specification and these components provides true encapsulation UI widgets. It contains the three main specification as templates, shadow DOM and custom elements.

EmberJS - Model

Models

In Ember.js, every route has an associated model. The {{link-to}} or transitionTo() methods takes an argument as model which implements the route's model hook. The model helps to improve application robustness and performance. Ember.js uses the Ember Data which manipulates with the stored data in the server and also easy to work with streaming APIs like socket.io and Firebase or WebSockets.

EmberJS - Views

Introduction

A view in an Ember.js is used for to handle user events and also creates the re-usable component. The UI will be developed by using the views.
The below figure shows how event handling occurs:

EmberJS - Controller

You can make more attractive of your display logic of model by using controllers in which, the models properties are saved to the server where as the controllers properties will not save to the server.

EmberJS - Testing

Introduction

Testing is a development cycle of Ember.js framework. It provides user interactions such as login, creating post etc for writing an Ember application.
There are two types for testing the Ember application:

EmberJS - Resources

The following resources contain additional information on EmberJS. Please use them to get more in-depth knowledge on this.

Discuss EmberJS

Ember.js is an open source JavaScript client-side framework for developing the web applications and uses the MVC(Model-View-Controller) architecture pattern. In Ember.js, route is used as model, handlebar template as view and controller manipulates the data in the model. This tutorial covers most of the topics required for a basic understanding of EmberJS and to get a feel of how it works.