Fundamental Concepts Within Ember.js

Ember.js, a client-side JavaScript web application framework. Ember.js (we simple call it Ember) helps in the development of Single-Page Applications (SPA) in a Reactive fashion.

Before moving on further, lets pose the below question:

Why develop a web app as supposed to a native GUI app?
Web application, technically means => The ability to bookmark and share URLs in as stateless fashion i.e. a superior shareability and collaboration as supposed to a native GUI app. Hence, the justification to develop web applications.

Ember as a SPA framework, its strengths are in combining tools and concepts of native GUI frameworks with support for URL. Therefore, making URL as a first-class citizen rather than an after thought.

To be an Ember literate, one has to deeply understand its native vocabulary-set/concepts, which can be abbreviated as TRC-MRC-VH and stands for:

T - Templates
R - Router
C - Components

M - Models
R - Route
C - Controllers

V - Views
H - Helpers



Below is my interpretation of the above concepts & their relationships to each other, as of Ember version 1.5.1.


Templates

Templates describe the apps user interface.

Features:
 a. Each template is backed by a model and automatically updates itself if the model changes.
 b. Templates are composed of one or more of the following: HTML, Expressions, Outlets, & Components. Where:
  i. Expressions: Refers to data-binding expressions, for e.g. {{firstName}}. Expressions once declared in the templates, it gets data-bound to respective model's/controller's properties.
  ii. Outlets: Refers to placeholders, into which templates are injected. Here, router is responsible for injecting templates into outlets.
  iii. Components: Refers to custom HTML elements, for e.g. {{#blog-post title=title}}. Which could to used for:
    1. Cleaning-up repetitive templates
    2. Creating reusable controls
 c. A template can optionally have a controller in addition to a model and can retrieve properties from both.
 d. Handlebars is used as the primary templating engine.
 e. On-demand pre-compilation of templates are possible. This allows organisation of the templates as separate .hbs or .handlebars files. Or directly declare following script tag => type="text/x-handlebars" in your HTML.

Example: JS Bin example of the above points (a, b.i, b.ii, c, d, e)


Router

A Router translates an URL into a series of nested templates. Which means, router is responsible for injecting templates into above mentioned outlets.


Components

Component is a custom HTML tag, which enables you to create reusable controls to the above mentioned templates.
  
Implementation aspects:
 a. Appearance is describe using Handlebars templates
 b. Behaviour is implemented using JavaScript

Example: Section on Showing confirmation modal-dialog in the tutorial Ember.js + Sails.js + PostgreSQL is an use case of components.


Models

Model is an object that stores persistent state.

Features:
 a. Models are not directly displayed to the users, however template takes care of displaying them in HTML format.
 b. Models are usually loaded/updated with data from/to the backend services asynchronously. However, model is agnostic to any backend/mockup adapters like Ember-Data, Ember-Model, Ember-Resource, etc.

Example: JS Bin example of the above points: (a, b)



Route

A route is an object that tells the template which model it should display.

Features:
 a. Route query's the model using model-hook, so that the model is available to template and its controller
 b. Route returns promise from model-hook, so one can implement a 'LoadingRoute' (i.e. a waiting state, which waits for the model to resolve asynchronously).
 c. Route can set controller properties
 d. Route can execute events and actions
 e. Route can connect any template to any controller

Example: JS Bin examples of the above points: (a, c), (b) & (d, e)


Controllers

A controller is an object that stores application state.

Features:
 a. A controller is in direct relation with a given template. However, controller is optional for a given template.
 b. Controller houses properties that are retrievable by its template.
 c. Receives a model from a Route
 d. Acts as a bridge between model and view/template
 e. Houses convenient methods (i.e. business-logic). For e.g. methods that switch between editing mode and normal mode. Methods such as 'goIntoEditMode()' and 'closeEditMode()'.
 f. Good to know! When a controller is not declared for a given template, then the Ember framework auto-generates a controller. For e.g. a user template with a 'UserRoute', without a 'UserController' implementation artifact (i.e. there is no need for a explicit business-logic), then the Ember will generate a controller internally (i.e. in memory). Ember Inspector extension for Chrome web-browser / Ember Inspector add-on for Firefox web-browser can enable you to track internally/explicitly created controllers.

Example: Tutorial covering Ember.js + Sails.js + PostgreSQL is an example of the above points: (a, b, c, d, e) & (f)


Views

Views represent visual elements of an application.

Features:
 a. Views are composition of Controller + Handlebars template + Route
 b. Views generate events and enable interactions with visual elements
 c. Views comes with a collection of native hooks, such as 'didInsertElement' hook, used for implementing complex interaction using jQuery
 d. View composition facilitates reusability, such as modals, popovers, date-pickers & autocomplete fields.

Example: Tutorial covering Ember.js + Sails.js + PostgreSQL is an example of the above points: (a, c) & (b, d)


Helpers 

Helpers refers to Handlebars helpers.

Features:
 a. A function that transform data just before rendering. For e.g., transformation of the following date/timestamp: Wed May 28 10:10:01 EEST 2014 => '28 May 2014'.

Example: JS Bin example of the above point: (a)


Reference:
 - An In-Depth Introduction To Ember.js
 - Alternatives to Ember Data
 - Emberjs (Offical Website)
 - Emberjs Core-concepts (Official Documentation)