ember.js

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.{{cite web |date=13 Dec 2011 |title=SproutCore 2.0 becomes Ember.js |url=http://www.h-online.com/open/news/item/SproutCore-2-0-becomes-Ember-js-1394362.html |publisher=The H}}{{cite web |date=12 Dec 2011 |title=Amber.js (formerly SproutCore 2.0) is now Ember.js |url=http://yehudakatz.com/2011/12/12/amber-js-formerly-sproutcore-2-0-is-now-ember-js/ |publisher=yehudakatz.com}} The framework was created by Yehuda Katz, a member of the jQuery, Ruby on Rails and SproutCore core teams.

{{Puffery|section|date=September 2020}}

According to the company, Ember was designed around four key ideas:

; Web applications

: Ember sets out to provide a solution to the client-side application problem.{{Citation needed|date=January 2024}}

; More productivity

: Ember is one component of a set of tools to provide a development stack. Ember CLI provides an application structure and build pipeline with an add-on.{{cite web |url=https://cli.emberjs.com/ |title=Ember CLI |access-date=15 Dec 2018}}{{cite web |url=https://www.emberobserver.com/ |title=Ember Addons |access-date=15 Dec 2018}}

; Stability

: Ember aims to prioritize backward compatibility and allow it to be maintained while still evolving the framework.{{cite web |url=http://readwrite.com/2014/11/04/emberjs-javascript-framework-we-dont-need-to-break-the-web |title=Innovating Fast And Slow: EmberJS Insists, "We Don't Need To Break The Web" |website=ReadWrite |last=Asay |first=Matt |date=4 November 2014 |access-date=18 Jun 2015}}

; Future web standards

: Ember was an adopter of standards around JavaScript and the web, including promises, web components and ES6 syntax.{{cite web |url=https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise |website=Mozilla |title=JavaScript Promises|access-date=18 Jun 2015}}{{cite web |url=http://webcomponents.org/ |title=Web Components |website=WebComponents |access-date=18 Jun 2015}} Yehuda Katz, one of Ember's co-founders, is a member on TC39, which is the committee responsible for future versions of the JavaScript language.{{cite web |url=http://tc39wiki.calculist.org/about/people/ |title=TC39: Members |website=TC39Wiki |access-date=18 Jun 2015}}

Like Ruby on Rails, Ember follows convention over configuration (CoC), and the don't repeat yourself (DRY) principle.{{cite web |url=http://getsolid.io/blog/what-weve-learn-from-ember-js-after-2-months-developing-our-new-product-a-solid-story/ |website=Solid|title=What we've learned from Ember.js after 2 months developing our new product.|date=16 December 2014| access-date=3 November 2015}} It has been described as a highly opinionated framework built to be very flexible.{{cite web |url=http://www.talentbuddy.co/blog/top-reasons-why-industry-experts-use-ember-js-and-how-you-can-adopt-it-yourself/ |website=TalentBuddy|title=Top Reasons Why Industry Experts Use Ember.js And How You Can Adopt It Yourself|access-date=14 October 2015}}

{{Puffery|date=September 2020|section}}

According to the company, Ember consists of five key concepts:{{cite web |url=http://emberigniter.com/5-essential-ember-2.0-concepts/ |title=5 Essential Ember 2.0 Concepts You Must Understand |website=EmberIgniter |author=Frank Treacy |access-date=31 August 2015 |archive-url=https://web.archive.org/web/20160727201740/http://emberigniter.com/5-essential-ember-2.0-concepts/ |archive-date=27 July 2016 |url-status=usurped }}

; 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.

; Models

: Every route has an associated model, containing the data associated with the current state of the application.{{cite web |url=http://emberjs.com/guides/models/ |title=Ember.js - Models: Introduction |website=Emberjs |access-date=21 Jan 2014}} While one can use window.fetch 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

: 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.){{cite web|last1=Jackson|first1=Robert|title=HTMLBars|url=https://github.com/tildeio/htmlbars|website=GitHub|access-date=18 February 2015}}

; Components

: A component is a custom HTML tag. Its 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.{{cite web |url=http://www.programwitherik.com/how-to-add-polymer-to-your-ember-project/ |title=How To Add Polymer To Your Ember Project |website=ProgramWithErik |date=27 March 2015 |access-date=11 Aug 2015}}

; Services

: Services are just singleton objects to hold long-lived data such as user sessions.{{cite web |url=http://www.programwitherik.com/ember-services-tutorial/ |title=Ember Services Tutorial |website=ProgramWithErik |date=26 July 2015 |access-date=27 July 2015}}

: Ember also provides dependency injection, declarative one-way data-flow, tracked properties, and automatically updating templates.{{cite web |url=http://net.tutsplus.com/tutorials/javascript-ajax/getting-into-ember-js/ |title=Getting Into Ember.js |last=Bango |first=Rey |publisher=Nettuts+ |date=14 Mar 2013}}

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

Ember-CLI aims to bring convention over configuration to build tools. A command line utility based on broccoli, running the command ember new generates a new Ember app with the default stack.{{cite web|url=https://cli.emberjs.com |title=Ember CLI |access-date=15 Dec 2018}} This provides:

• Standard file and directory structure
• Development server with live reload
• Testing framework{{cite web|url=https://guides.emberjs.com/release/testing/ |title=Ember testing |access-date=15 Dec 2018}}
• Dependencies managed via npm.{{cite web|url=https://cli.emberjs.com/release/basic-use/assets-and-dependencies/ |title=Ember CLI-managing dependencies |access-date=15 Dec 2018}}
• ES6/ES7+ syntax support (using Babel)
• Asset management (including combining, minifying, and versioning){{cite web|url=https://cli.emberjs.com/release/advanced-use/asset-compilation/ |title=Ember CLI asset compilation |access-date=15 Dec 2018}}

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.{{cite web|url=https://cli.emberjs.com/release/advanced-use/blueprints/ |title=Ember CLI Blueprints |access-date=15 Dec 2018}}
• Addons, which provide the ability to extend the features of Ember CLI,.{{cite web|url=https://cli.emberjs.com/release/writing-addons/ |title=Ember CLI Writing Addons |access-date=15 Dec 2018}} Addons are installed by typing ember install . Around two thousand add-ons are currently available (as of 2018){{cite web|url=https://www.emberobserver.com/ |title=Ember Addons directory|publisher=emberobserver.com |access-date=15 Dec 2018}} including add-ons for CoffeeScript, LESS, Sass, Compass and Mocha.{{cite web|url=https://cli.emberjs.com/release/ |title=Ember CLI Overview |access-date=15 Dec 2018}}

Most Ember applications use Ember Data, a data-persistence library providing many of the facilities of object-relational mapping (ORM).{{cite web |url=https://github.com/emberjs/data/blob/master/README.md |title=Ember Data README |website=GitHub |access-date=4 Dec 2013}} However it is also possible to use Ember without Ember Data.{{cite web |url=http://eviltrout.com/2013/03/23/ember-without-data.html |title=Ember without Ember Data |date=23 March 2013 |publisher=Evil Trout |access-date=2 Jan 2014}}

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,{{cite web |url=http://jsonapi.org/ |title=JSON API specification |access-date=16 Jun 2015}} provided certain conventions are followed.{{cite web |url=http://guides.emberjs.com/v1.12.0/models/ |title=Ember.js Models |website=Emberjs |access-date=26 Jun 2015}} However it is also configurable and can work with servers through the use of adapters and addons.{{cite web |url=http://emberobserver.com/categories/data |title=Ember Observer-Data |website=EmberObserver |access-date=16 Jun 2015}} JSON API has server library implementations for PHP, Node.js, Ruby, Python, Go, .NET and Java.{{cite web |url=http://jsonapi.org/implementations/ |title= JSON API implementations |website=JSON API |access-date=26 Jun 2015}} Connecting to a Java-Spring-based server is also documented.{{cite web |url=http://springember.blogspot.com.au/2014/08/using-ember-data-restadapter-with.html |title=Integrating Ember.js with the Spring Framework |website=SpringEmber |date=20 August 2014 |access-date=26 Jun 2015}}

The first stable version of Ember Data (labeled 1.13 to align with Ember itself) was released on June 18 June 2015.{{cite web |url=http://emberjs.com/blog/2015/06/18/ember-data-1-13-released.html |title=Ember Data 1.13 release |date=18 June 2015 |access-date=18 Jun 2015}}

The Ember Inspector is an extension currently available for the Mozilla Firefox and Google Chrome web browsers for debugging Ember applications.{{cite web |url=https://addons.mozilla.org/en-us/firefox/addon/ember-inspector/ |title=Firefox Addons - Ember Inspector |publisher=Mozilla |access-date=5 August 2015}}{{cite web |url=https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi |title=Chrome Web Store - Ember Inspector |publisher=Chrome Web Store |access-date=18 Feb 2014}} 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 one's application's objects from the console.{{cite web |url=http://guides.emberjs.com/v1.13.0/ember-inspector/installation/ |title=Ember Inspector |publisher=Ember.js |access-date=28 Jun 2015}} If Ember Data is used, one can also see the records loaded for each model.

• The Object Inspector allows viewing and editing of 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 shows the models in the application and the records loaded for each model.
• The Info tab displays dependency versions.
• The Deprecations tab allows for stack traces of deprecation warnings that do not trigger exceptions.
• The Promises tab allows for the tracing of code through asynchronous operations.
• The Container tab is used to check which objects have been loaded.
• The Render Performance tab is for determining what is slowing down an Ember application.

Fastboot is an Ember CLI add-on created by the Ember core team that gives Ember developers the ability to run their apps in Node.js. This feature allows end users to see HTML and CSS right away, with JavaScript downloading in the background and taking over once it has fully loaded.{{cite web |url=http://emberjs.com/blog/2015/01/08/inside-fastboot-faking-the-dom-in-node.html|title=Inside Fastboot. Faking the DOM in node|website=Emberjs |date=8 January 2015|access-date=19 June 2015}}

Liquid Fire provides animation support for Ember applications.{{cite web |url=https://ember-animation.github.io/liquid-fire/|title=Liquid Fire: Animations & Transitions for Ember Apps|website=GitHub |access-date=19 June 2015}} Features include animated transitions between routes and between models within a single route. It provides a DSL for solidifying spatial route relationships, cleanly separated from view-layer implementation details. An example would be to animate a screen transition so that the new screen appears to slide in from one edge of the browser.{{cite web|url=https://www.airpair.com/ember.js/posts/animations-in-emberjs-with-liquidfire|title=Animations in Ember.js with liquid-fire|publisher=airpair.com|access-date=10 July 2015|archive-date=8 November 2020|archive-url=https://web.archive.org/web/20201108135538/https://www.airpair.com/ember.js/posts/animations-in-emberjs-with-liquidfire|url-status=dead}}

See the releases blog for the full list of releases and detailed changelog.

Ember follows a six-week release cycle, inspired by the rapid release cycle of Google Chrome.{{cite web |url=http://emberjs.com/blog/2013/09/06/new-ember-release-process.html |title=New Ember release process |date=6 September 2013 |access-date=19 June 2015}}

Starting with Ember 2.0, related projects supported by the core team have their releases coordinated, and share a version number with Ember itself.{{cite web |url=http://emberjs.com/blog/2015/06/16/ember-project-at-2-0.html |title=Ember Project at 2.0 |date=16 June 2015 |access-date=19 June 2015}}

Ember follows the semantic versioning convention.{{cite web |url=http://emberjs.com/blog/2013/01/18/this-week-in-ember-js-4.html#toc_api-freeze |title=Ember API Freeze |date=18 January 2013 |access-date=19 June 2015}} In particular, breaking changes are only introduced at significant 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 APIs are introduced. Tooling was also under development in 2015 to help streamline the upgrade process.{{cite web |url=https://www.npmjs.com/package/ember-watson |title=Ember Watson Addon |access-date=19 June 2015}}

In addition to this process, several steps were taken to mitigate issues around upgrading to the 2.0 release:

• All major 2.0 features were introduced early and spread out over several releases to reduce many of the issues caused by upgrades.
• Most features that were removed are still available through add-ons.

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.{{cite web |url=http://jaxenter.com/angular-2-0-announcement-backfires-112127.html

|title=Angular 2.0 announcement |date=29 October 2014 |access-date=19 June 2015}}

Project status can be tracked via the core team meeting minutes.{{cite web |url=https://github.com/emberjs/core-notes/tree/master/ember.js|title=Ember core team meeting minutes|website=Emberjs |access-date=5 Jul 2015}} However, major changes to Ember go through the Request For Comment process.{{cite web |url=https://github.com/emberjs/rfcs|title=Ember RFC process|website=Emberjs |access-date=18 Jun 2015}} This gives the Ember community a chance to give feedback on new proposals. Notable RFCs include:

• Engines. Engines allow multiple logical applications to be composed together into a single application from the user's perspective. Currently released as an experimental add-on.{{cite web |url=https://www.npmjs.com/package/ember-engines|title=Ember Engines|website=EmberAddons.com |access-date=19 Jan 2016}}{{cite web |url=http://emberjs.com/blog/2016/01/23/core-team-face-to-face-january-2016.html#toc_engines|title=Engines|website=Emberjs |access-date=3 Feb 2015}}
• Release cycle improvements. Among other things, it proposes changes to Ember CLI to support "svelte builds", which will strip out deprecated and unused features.{{cite web|url=https://github.com/emberjs/rfcs/blob/master/text/0056-improved-release-cycle.md|title=Refining the Release Process RFC|website=Emberjs|access-date=26 Jan 2025}}
• Outlet Focusing. Making Ember accessible by default. This RFC aims to improve the user experience for people using screen readers.{{cite web|url=https://github.com/nathanhammond/rfcs/blob/master/text/0000-outlet-focusing.md|archive-url=http://webarchive.loc.gov/all/20160924214534/https://github.com/nathanhammond/rfcs/blob/master/text/0000-outlet-focusing.md|url-status=dead|archive-date=24 September 2016|title=Outlet Focusing RFC|website=Emberjs|access-date=18 Jun 2015}}

Unlike other projects such as AngularJS (Google) and React (Facebook) which have the backing of one main company, Ember.js has a variety of sponsors and backers. These include users of the framework such as Yahoo!, LinkedIn and Bustle.{{cite web |url=http://emberjs.com/sponsors/ |title=Ember sponsors |website=Emberjs |access-date=18 Jun 2015}}{{cite web |url=https://emberweekend.com/episodes/componentize-all-the-things |title=Interview with Mike North, Principal Software Engineer, Yahoo |website=Emberweekend |access-date=10 Aug 2015}}

{{Reflist|30em}}

• {{cite book| author=Builes, Adolfo|url= https://leanpub.com/ember-cli-101 |title= Ember-cli 101|date=2015|publisher= Leanpub }} Regularly updated.
• {{cite web| author=Erdi, Balint|url= http://balinterdi.com/rock-and-roll-with-emberjs/ |website=balinterdi.com|title= Rock and Roll with Ember.js|date=2015}} Regularly updated.
• {{cite book |url= |title=Deliver Audacious Web Apps with Ember 2 |date=2015 |author=White, Matthew |publisher=The Pragmatic Programmers, LLC |isbn=978-1-68050-078-3}}

• {{Official website}}

{{JS templating |state=autocollapse}}

{{Application frameworks}}

{{ECMAScript}}

{{Authority control}}

Category:JavaScript libraries

Category:Ajax (programming)

Category:Software using the MIT license

Category:Web frameworks

Category:JavaScript articles needing attention