Jump to content

User:Rosoni/sandbox

From Wikipedia, the free encyclopedia
Ember.js
Original author(s)Yehuda Katz
Developer(s)Ember Core Team
Initial release8 December 2011; 12 years ago (2011-12-08)
Stable release
2.0.2 / September 7, 2015; 9 years ago (2015-09-07)
Written inJavaScript
Operating systemCross-platform
LicenseMIT License
Websiteemberjs.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.[1]
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..[2] It is used to create single web page applications[3] like Discourse,[4] 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.[5]

History

[edit]

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.[6][7] 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?

[edit]

Following are the reasons why industry experts are adopting Ember:[8]

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.[9] 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.[10]

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.[11]

Basic concepts

[edit]

Ember consists of five key concepts:[12]

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.[13]
Models
Every route has an associated model, containing the data associated with the current state of the application.[14] For example, Suppose our application contains a collection of users who have different properties. These users and their information will serve as a model. [15]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.[16] 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.)[17]
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.[18]
Services
Services are just singleton objects to hold long lived data such as user sessions.[19]

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

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

Usage and Examples

[edit]

Below are examples for common functionalities used in Ember.[22]

Creating a Router:

[edit]

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

[edit]

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

[edit]

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

[edit]

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

[edit]

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

Ember CLI

[edit]

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

[edit]

Most Ember applications use Ember Data,[23] 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.[24]

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,[25] provided certain conventions are followed.[26] However it is also easily configurable and can work with any server through the use of adapters and addons.[27] JSON API has server library implementations for PHP, Node.js, Ruby, Python, Go, .NET and Java.[28] Connecting to a Java-Spring based server is also documented.[29]

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

Ember Inspector

[edit]

The Ember Inspector is an extension currently available for the Mozilla Firefox[31] and Google Chrome[32] 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.[33]

Fastboot

[edit]

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,[34] 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.[35]

Liquid Fire

[edit]

Liquid Fire provides animation support for Ember applications.[36] 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.[37]

Ember 2.0

[edit]

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.[38]

  • 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:[39]

  • 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

[edit]

Project status can be tracked via the core team meeting minutes.[40] However major changes to Ember go through the Request For Comment process.[41] This gives the Ember community a chance to give feedback on new proposals. Notable RFCs include:

  • Routeable Components.[42] The motivation is to eliminate Controllers. Likely to land in Ember 2.1 or 2.2.[43]
  • Component unification (Angle brackets).[44] 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.[45]
  • Engines.[46] 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.[47]
  • Release cycle improvements.[48] Among other things it proposes changes to Ember CLI to support "svelte builds", which will strip out deprecated and unused features.
  • Outlet Focusing.[49] Making Ember accessible by default. This RFC aims to improves the user experience for people using screen readers.

Legacy browser support

[edit]

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.[50] 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.[51]

Corporate sponsorship

[edit]

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!,[52] LinkedIn and Bustle which are all major users of the framework.[53]

References

[edit]
  1. ^ "Ember - Application framework for the future". Retrieved 13 September 2015.
  2. ^ Asay, Matt. "Innovating Fast And Slow: EmberJS Insists, "We Don't Need To Break The Web"". ReadWrite. Retrieved 18 Jun 2015.
  3. ^ Aghassipour, Alexander; Chacko, Shajith (30 Nov 2012). "Enterprise Apps Are Moving To Single-Page Design". TechCrunch.
  4. ^ "Discourse-Built with Ember.js". GitHub. Retrieved 15 Jul 2015.
  5. ^ "Ember-cli NPM repository". npmjs. Retrieved 5 Jul 2015.
  6. ^ "SproutCore 2.0 becomes Ember.js". The H. 13 Dec 2011.
  7. ^ "Amber.js (formerly SproutCore 2.0) is now Ember.js". yehudakatz.com. 12 Dec 2011.
  8. ^ "Top reasons why industry experts use Ember.js". Retrieved 13 September 2015.
  9. ^ "Ember API Freeze". Retrieved 19 June 2015.
  10. ^ "Ember Watson Addon". Retrieved 19 June 2015.
  11. ^ "Angular 2.0 announcement". Retrieved 19 June 2015.
  12. ^ Frank Treacy. "5 Essential Ember 2.0 Concepts You Must Understand". EmberIgniter. Retrieved 31 August 2015.
  13. ^ "Basics-Router". Retrieved 13 September 2015.
  14. ^ "Ember.js - Models: Introduction". Emberjs. Retrieved 21 Jan 2014.
  15. ^ "Basics-Models". Retrieved 13 September 2015.
  16. ^ "Basics-Template".
  17. ^ Jackson, Robert. "HTMLBars". GitHub. Retrieved 18 February 2015.
  18. ^ "How To Add Polymer To Your Ember Project". ProgramWithErik. Retrieved 11 Aug 2015.
  19. ^ "Ember Services Tutorial". ProgramWithErik. Retrieved 27 July 2015.
  20. ^ "Routeable Components". Emberjs. Retrieved 18 Jun 2015.
  21. ^ Bango, Rey (14 Mar 2013). "Getting Into Ember.js". Nettuts+.
  22. ^ "Ember.js Tutorials". Retrieved 14 September 2015.
  23. ^ "Ember Data README". Retrieved 4 Dec 2013.
  24. ^ "Ember without Ember Data". Evil Trout. Retrieved 2 Jan 2014.
  25. ^ "JSON API specification". Retrieved 16 Jun 2015.
  26. ^ "Ember.js Models". Emberjs. Retrieved 26 Jun 2015.
  27. ^ "Ember Observer-Data". EmberObserver. Retrieved 16 Jun 2015.
  28. ^ "JSON API implementations". JSON API. Retrieved 26 Jun 2015.
  29. ^ "Integrating Ember.js with the Spring Framework". SpringEmber. Retrieved 26 Jun 2015.
  30. ^ "Ember Data 1.13 release". Retrieved 18 Jun 2015.
  31. ^ "Firefox Addons - Ember Inspector". Mozilla. Retrieved 5 August 2015.
  32. ^ "Chrome Web Store - Ember Inspector". Chrome Web Store. Retrieved 18 Feb 2014.
  33. ^ "Ember Inspector". Ember.js. Retrieved 28 Jun 2015.
  34. ^ "Fastboot status". Emberjs. Retrieved 19 June 2015.
  35. ^ "Inside Fastboot. Faking the DOM in node". Emberjs. Retrieved 19 June 2015.
  36. ^ "Liquid Fire: Animations & Transitions for Ember Apps". GitHub. Retrieved 19 June 2015.
  37. ^ "Animations in Ember.js with liquid-fire". airpair.com. Retrieved 10 July 2015.
  38. ^ "Ember.js 2.0 Released". Retrieved 14 September 2015.
  39. ^ "Change in Release processes". Retrieved 14 September 2015.
  40. ^ "Ember core team meeting minutes". Emberjs. Retrieved 5 Jul 2015.
  41. ^ "Ember RFC process". Emberjs. Retrieved 18 Jun 2015.
  42. ^ "Routeable Component RFC". Emberjs. Retrieved 18 Jun 2015.
  43. ^ "Routeable Components status". Emberjs. Retrieved 18 Jun 2015.
  44. ^ "Angle bracket RFC". Emberjs. Retrieved 18 Jun 2015.
  45. ^ "Angle brackets status". Emberjs. Retrieved 18 Jun 2015.
  46. ^ "Engine RFC". Emberjs. Retrieved 18 Jun 2015.
  47. ^ "Engine status". Emberjs. Retrieved 18 Jun 2015.
  48. ^ "Release cycle improvements RFC". Emberjs. Retrieved 18 Jun 2015.
  49. ^ "Outlet Focusing RFC". Emberjs. Retrieved 18 Jun 2015.
  50. ^ "IE8 support update". Emberjs. Retrieved 18 Jun 2015.
  51. ^ "1.13 with Extended Browser Support". Emberjs. Retrieved 18 Jun 2015.
  52. ^ "Interview with Mike North, Principle Software Engineer, Yahoo". Emberweekend. Retrieved 10 Aug 2015.
  53. ^ "Ember sponsors". Emberjs. Retrieved 18 Jun 2015.

Further reading

[edit]
[edit]

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