User:Rohawk/sandbox

Ember is an open source, front-end Javascript framework, which as described by its creators is used for creating ambitious web-applications. It is built around the Model-view-controller (MVC) pattern. Web applications built by using ember are generally free from clutter with a clear separation between different layers of the application. Ember, like Ruby on Rails incorporates the principles of Convention over configuration (CoC) and Don't Repeat Yourself (DRY). Another important principle of Ember is stability without stagnation, which focuses on backward compatibility while still focusing on developing and evolving the framework.. It is used to create single web page applications like Discourse, Vine, Live Nation, Nordstrom, and Chipotle. It can also be used for making desktop applications like Apple's iTunes.

Ember averages over 400,000 downloads per month from its npm repository.

Why Ember.js?
Following are the reasons why industry experts are adopting Ember:
 * Standardization and flexibility
 * Ember is a highly opinionated framework which has a set of norms and conventions. Developers find it easy to get on-board and produce homogeneous codes owing to the established patterns. At the same time, it offers great flexibility to extend and implement complex custom requirements.


 * Adaptiveness and responsiveness
 * It has a fast iteration cycle of just 6 weeks. Thus, it is highly responsive in catering to the evolving needs of web application development by incorporating user feedback.


 * Front-end first!
 * The Ember CLI has a feature called http-mock. You can create dummy data for the testing environment with just a simple command. This serves as the fixture data similar to a real back-end saving a lot of efforts on creating a test back-end manually.


 * Sharing of reusable components
 * It has a community which provides reusable components and tools for the programmers to make development easier. Ember Addons works as a repository maintaining a growing list of Ember CLI addons.


 * It works great on mobile platform
 * Ember.js solves some common performance bottlenecks such as initial loading of the app in browser. Techniques such as reducing file size by minifying JavaScript and CSS files and rendering applications from a server helps achieve this.


 * Upgrading and backward compatibility
 * Ember follows the semantic versioning convention. In particular this means that breaking changes are only introduced at major version numbers such as 1.0, 2.0 etc. While new features can be added at point releases (1.1, 1.2...), and features deprecated, no breaking changes to the public API's are introduced and upgrading within a major version is designed to be as simple as possible. Tooling is also under development to help streamline the upgrade process.

In addition to this process a number of steps have been taken to mitigate issues around upgrading to the 2.0 release:
 * All major 2.0 features have in fact been introduced early and spread out over a number of releases in order to reduce many of the issues caused by big bang upgrades.
 * Most features that will be removed will still be available through addons.

The process follows the core Ember principle of Stability without Stagnation and is in marked contrast to the upgrade plans of similar projects such as AngularJS.

Basic concepts


Ember consists of five key concepts:
 * Routes
 * In Ember, the state of an application is represented by a URL. Each URL has a corresponding route object that controls what is visible to the user. Ember’s Router will automatically keep the URL up to date as the corresponding templates or models change.


 * Models
 * Every route has an associated model, containing the data associated with the current state of the application. For example, Suppose our application contains a collection of users who have different properties. These users and their information will serve as a model. While one can use jQuery to load JSON objects from a server and use those objects as models, most applications use a model library such as Ember Data to handle this.


 * Templates
 * A Template describes the user interface of the application. They are updated automatically when the model changes. Templates are used to build the application's HTML and are written with the HTMLBars templating language. (HTMLBars is a variation of Handlebars that builds DOM elements rather than a String.)


 * Components
 * A component is a custom HTML tag. Behavior is implemented using JavaScript and its appearance is defined using HTMLBars templates. Components "own" their data. They can also be nested and can communicate with their parent components through actions (events). Other component libraries such as Polymer can also be used with Ember.


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

Note: In Ember 2.0, components and services implement the functionality previously handled by views and controllers.

Ember also provides dependency injection, declarative two-way data binding, computed properties, and automatically-updating templates.

Installation
Below are the steps for installation:

Step 1: Make sure node or npm is installed.


 * https://nodejs.org/download/

Step 2: Run below command using npm


 * This will install ember.
 * This will install ember.

Step 3: Install phantomjs to run tests from the command line.



Step 4: Test the installation by running below command.


 * This creates the file structure for your new_app.
 * This creates the file structure for your new_app.

Step 5: Run the ember server


 * Visit the URL http://localhost:4200 to see the new app.
 * Visit the URL http://localhost:4200 to see the new app.

Usage and Examples
Below are examples for common functionalities used in Ember.

Creating a Router:
Let us assume that the user wants to go to a specific URL in the web application. For this purpose, routers need to be defined in the app.js file. Syntax:

this.route(‘A’, {path: ‘B’}) A is the Name of the route and B is the corresponding name in the URL.

Example:

Router.map(function {
 * this.route(‘first_route’);

this.route(‘second_route’, { path: ‘/sec_route’ }); });

Creating a Template
Now suppose the user wants to render a page when he clicks on a link. For this we create a template which corresponds to a particular route. This is defined in the index.html file.

Syntax:

 #TemplateCode A is the name of the route.

Example:

 This is my First Route in ember.js

Creating a Controller
Controllers are created in the app.js file.

Syntax: App.NameOfRouter = Ember.controller.extend ({	#controller code })

Example: App.FirstRouteController = Ember.Controller.extend ({   actions : {	onClick: function{ alert(“ Display the alert message”); }} }); Also we need to make below change in the template:   This is my First Route in ember.js

When the user clicks on “This is my First Route in ember.js” it will display an alert message

Creating a Model
Controllers are created in the app.js file Syntax : App.NameOfModel = Ember.Route.extend({		#modelCode	}); Example: App.FirstModelRoute = Ember.route.extend({	model function {		return [‘Bread’,’Eggs’,’Milk’]	} 	}); Also we need to change the template to render the corresponding model. The above model will display the contents on the array.

Ember Software Stack
Ember.js is one component of a complete front end stack built and supported by the Ember core team.

Ember CLI
Ember-cli aims to bring convention over configuration to build tools. A command line utility based on broccoli, running the command  generates a new Ember app with the default stack. This provides:
 * A standard file and directory structure.
 * Development server with live reload. Out of the box this will automatically rebuild apps incrementally whenever files are changed, and then reload the app in any open browser tabs.
 * A complete testing framework.
 * Dependencies managed via bower and npm.
 * ES6 modules.
 * ES6/ES7+ syntax support (using Babel).
 * Asset management (including combining, minifying, and versioning).

Other features include:
 * Blueprints, which are code generators for creating models, controllers, components, and so on that are needed in an application. Custom blueprints can also be created.
 * Addons which provide the ability to extend the features of Ember CLI. Addons can be installed by typing . Fourteen hundred addons are currently available including addons for CoffeeScript, LESS, Sass, Compass and Mocha.

Ember CLI replaces the deprecated Ember App Kit.

Ember Data
Most Ember applications use Ember Data, a data persistence library providing many of the facilities of an object-relational mapping (ORM). However it is also possible to use Ember without Ember Data.

Ember Data maps client-side models to server-side data. It can then load and save records and their relationships without any configuration via a RESTful JSON API that implements the JSON API specification, provided certain conventions are followed. However it is also easily configurable and can work with any server through the use of adapters and addons. JSON API has server library implementations for PHP, Node.js, Ruby, Python, Go, .NET and Java. Connecting to a Java-Spring based server is also documented.

The first stable version of Ember Data (labelled 1.13 to align with Ember itself) was released on 18 June 2015.

Ember Inspector
The Ember Inspector is an extension currently available for the Mozilla Firefox and Google Chrome web browsers that claims to make debugging Ember applications easier. Features include the ability to see which templates, components, and views are currently rendered, see the properties of any Ember object with a UI that computes bindings and computed properties, and access your application's objects from the console. If Ember Data is used, one can also see the records loaded for each model.


 * The Object Inspector allows you to view and edit the runtime contents of Ember Objects and Classes.
 * The View Tree visually displays the structure of the rendered Ember application.
 * The Routes tab allows one to determine and follow the router state and the urls used to represent routes.
 * The Data tab can show you the models in your application and records loaded for each model.
 * The Info tab displays versions of your dependencies.
 * The Deprecations tab allows for getting stacktraces of deprecation warnings that do not trigger exceptions.
 * The Promises tab allows for tracing of code through asynchronous operations.
 * The Container tab is useful for checking which objects have been loaded.
 * The Render Performance tab is for determining what is slowing down your Ember application.

Fastboot
Fastboot is an Ember CLI addon created by the Ember core team that gives Ember developers the ability to run their apps in Node.js. Currently in alpha, once complete, this feature will allow end users to see HTML and CSS right away, with the JavaScript downloading in the background and taking over once it has fully loaded.

Liquid Fire
Liquid Fire provides animation support for Ember applications. Features include animated transitions between routes and between models within a single route. It provides a DSL for laying out spatial route relationships, cleanly separated from view-layer implementation details. A simple example would be to animate a screen transition, so that the new screen appears to slide in from one edge of the browser.

Ember 2.0
Ember 2.0 was released on 13th August 2015. It focused on removing deprecated features instead of introducing new ones. This meant that all the apps which could run on Ember 1.13 without any deprecation warnings would run without any issue on ember 2.0.


 * Use cases for Views has been completely removed and has been replaced by components. However, there is an ember-legacy-views addon which has been included to help with the migration.
 * Similarly use cases for Controllers has been removed and been replaced with an ember-legacy-controller addon. Both theses addons will be supported till ember 2.6 while some features of controllers will be supported till ember 3.0 after which it will be completely removed.
 * ReduceComputed and ArrayComputed which were used for array operations has been removed. This follows after the introduction of the Glimmer rendering engine in ember 1.13 which made the use of these obsolete.
 * Support for IE8 has been removed. For the future releases IE9 will be supported.
 * Context shifting in templates has been removed.
 * Legacy Handlebars helpers has been removed and replaced with Ember.Helper API.

Below are some of the steps taken to improve future release processes:
 * Introduced a feature called LTS(Long Term support) Releases which provides a way for users to upgrade less frequently than the six stipulated weeks.
 * No features would be added to Ember 2.0 without documentation
 * Deprecations will contain information like which release they will be removed in, along with a link which would help the developer transition to the new API.
 * Svelte Builds was introduced. It enables us to tell ember CLI to not include deprecated features. This will helps during future releases.

Future development
Project status can be tracked via the core team meeting minutes. However major changes to Ember go through the Request For Comment process. This gives the Ember community a chance to give feedback on new proposals. Notable RFCs include:
 * Routeable Components. The motivation is to eliminate Controllers. Likely to land in Ember 2.1 or 2.2.
 * Component unification (Angle brackets). In addition to nicer syntax, they serve as an opt-in for features such as default one-way bindings. Likely to land in Ember 2.2.
 * Engines. Engines allow multiple logical applications to be composed together into a single application from the user's perspective. Work likely to begin on this soon.
 * Release cycle improvements. Among other things it proposes changes to Ember CLI to support "svelte builds", which will strip out deprecated and unused features.
 * Outlet Focusing. Making Ember accessible by default. This RFC aims to improves the user experience for people using screen readers.

History
In December 2011, the SproutCore 2.0 framework was renamed to Ember.js, to reduce confusion between the application framework and the widget library of SproutCore 1.0. The framework was created by Yehuda Katz, a member of the jQuery, Ruby on Rails and SproutCore core teams. Like many of Katz's other projects, it advocates for convention over configuration.

Legacy browser support
Support for Internet Explorer 8 is available up to version 1.13, but will be dropped from release 2.0 onwards. Internet Explorer 9 and later will continue to be supported. The core team will continue to periodically publish point releases in the 1.13 series to patch security bugs and browser compatibility issues, including issues in IE8.

Corporate sponsorship
Unlike other projects such as AngularJS (Google) and React (Facebook) which have the backing of one main company, Emberjs has a variety of sponsors. These include Yahoo!, LinkedIn and Bustle which are all major users of the framework.