User:Rosoni/sandbox

Ember.js

Original author(s)	Yehuda Katz
Developer(s)	Ember Core Team
Initial release	8 December 2011 (2011-12-08)
Stable release	2.0.2 / September 7, 2015 (2015-09-07)
Written in	JavaScript
Operating system	Cross-platform
License	MIT License
Website	emberjs.com

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.

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.

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.

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:

<script type = “text/x-handlebars” id=’A’ >
	#TemplateCode
</script> 

A is the name of the route.

Example:

<script type = “text/x-handlebars” id=’first_route’ >
	 This is my First Route in ember.js 
</script>

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:

<script type = “text/x-handlebars” id=’first_route’ >
	<h1 {(action ‘onClick’ )}> This is my First Route in ember.js </h1>
</script> 

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 ember new <app-name> generates a new Ember app with the default stack.

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.

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.

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.

Further reading

• Builes, Adolfo (2015). "Ember-cli 101". Leanpub. Regularly updated.
• Erdi, Balint (2015). "Rock and Roll with Ember.js". balinterdi.com. Regularly updated.
• White, Matthew (2015). Deliver Audacious Web Apps with Ember 2. The Pragmatic Programmers, LLC. ISBN 978-1-68050-078-3.

External links

• "Ember Guides". The official guide to learn Ember.
• "Getting Started with Ember.js using Ember CLI".
• Hanchett, Erik. "Top 5 Best Beginner Ember.js Tutorials".
• Chan, Godfrey. "Ember.js: An Antidote To Your Hype Fatigue".
• Erdi, Balint. "Animations in Ember.js with liquid-fire".
• "Ember Watch". Collection of links to Ember resources.
• "Ember Weekly". Weekly newsletter on Ember.
• "Ember screencasts". Short screencasts covering various Ember features.
• "Ember Land Podcast". Bi-weekly podcast.
• "Ember Weekend Podcast". Weekly podcast.

Category:JavaScript libraries Category:Rich Internet application frameworks Category:Ajax (programming) Category:Software using the MIT license