Ember.js

Ember.js
Original author(s)Yehuda Katz
Developer(s)Ember Core Team
Initial release8 December 2011; 11 years ago (2011-12-08)
Stable release
1.9.1[1] Edit this on Wikidata / 23 December 2014; 23 April 2014; 4 November 2014; 19 December 2016; 14 December 2016; 29 November 2016; 2 November 2016; 2 November 2016; 18 October 2016; 7 October 2016; 15 September 2016; 9 September 2016; 9 September 2016; 9 September 2016; 16 August 2016; 25 July 2016; 12 July 2016; 27 June 2016; 8 June 2016; 6 June 2016; 21 April 2016; 11 April 2016; 11 April 2016; 3 April 2016; 18 March 2016; 18 March 2016; 8 March 2016; 7 March 2016; 29 February 2016; 5 February 2016; 18 January 2016; 17 November 2015; 17 November 2015; 17 November 2015; 5 October 2015; 6 September 2015; 6 September 2015; 22 August 2015; 22 August 2015; 13 August 2015; 13 August 2015; 9 August 2015; 31 July 2015; 20 July 2015; 14 July 2015; 6 July 2015; 18 June 2015; 16 June 2015; 16 June 2015; 1 June 2015; 14 May 2015; 4 April 2015; 28 March 2015; 14 February 2015; 9 December 2014; 28 October 2014; 23 October 2014; 25 January 2017; 16 February 2017; 8 March 2017; 8 March 2017; 15 March 2017; 27 April 2017; 27 April 2017; 27 April 2017; 18 May 2017; 18 May 2017; 1 June 2017; 1 November 2017; 29 October 2017; 14 September 2017; 14 September 2017; 14 September 2017; 14 September 2017; 4 December 2017; 8 January 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 17 April 2018; 23 April 2018; 7 May 2018; 11 June 2018; 19 June 2018; 21 June 2018; 25 June 2018; 16 July 2018; 23 July 2018; 14 August 2018; 20 August 2018; 28 August 2018; 10 September 2018; 25 September 2018; 27 September 2018; 27 September 2018; 9 October 2018; 9 October 2018; 30 October 2018; 30 October 2018; 7 December 2018; 19 December 2018; 7 January 2019; 21 January 2019; 29 January 2019; 29 January 2019; 12 February 2019; 18 February 2019; 2 April 2019; 3 April 2019; 9 April 2019; 13 May 2019; 11 June 2019; 11 June 2019; 25 June 2019; 25 June 2019; 5 August 2019; 5 August 2019; 6 August 2019; 20 September 2019; 24 September 2019; 1 October 2019; 8 October 2019; 29 October 2019; 29 October 2019; 1 November 2019; 26 November 2019; 26 November 2019; 5 December 2019; 5 December 2019; 10 December 2019; 20 January 2020; 4 February 2020; 11 February 2020; 25 February 2020; 5 March 2020; 16 March 2020; 23 March 2020; 23 March 2020; 23 March 2020; 31 March 2020; 31 March 2020; 8 April 2020; 14 April 2020; 14 April 2020; 27 April 2020; 4 May 2020; 26 May 2020; 26 May 2020; 13 July 2020; 15 July 2020; 27 July 2020; 29 July 2020; 5 August 2020; 5 August 2020; 11 August 2020; 28 August 2020; 24 August 2020; 28 August 2020; 30 September 2020; 30 September 2020; 5 October 2020; 10 November 2020; 10 November 2020; 25 November 2020; 16 November 2020; 24 November 2020; 28 December 2020; 25 January 2021; 8 February 2021; 15 February 2021; 15 February 2021; 8 March 2021; 8 March 2021; 8 March 2021; 24 March 2021; 25 March 2021; 22 March 2021; 3 May 2021; 13 May 2021; 3 June 2021; 27 May 2021; 7 June 2021; 10 June 2021; 10 June 2021; 10 August 2021; 15 November 2021; 28 December 2021; 7 February 2022; 21 March 2022; 27 May 2022; 13 July 2022; 25 July 2022; 9 September 2022; 10 August 2021; 1 November 2021; 11 October 2021; 30 August 2021; 21 October 2021; 22 October 2021; 22 October 2021; 3 November 2021; 1 December 2021; 2 December 2021; 19 April 2022; 1 December 2021; 31 May 2022; 13 June 2022; 25 July 2022; 17 October 2022; 2 November 2022; 2 November 2022; 12 October 2022; 2 November 2022; 12 October 2022; 2 November 2022; 3 November 2022; 28 November 2022; 30 November 2022; 30 November 2022; 12 December 2022; 13 December 2022; 13 December 2022; 13 December 2022; 12 January 2023; 20 February 2023; 3 April 2023; Error: first parameter cannot be parsed as a date or time. (23 December 2014; 23 April 2014; 4 November 2014; 19 December 2016; 14 December 2016; 29 November 2016; 2 November 2016; 2 November 2016; 18 October 2016; 7 October 2016; 15 September 2016; 9 September 2016; 9 September 2016; 9 September 2016; 16 August 2016; 25 July 2016; 12 July 2016; 27 June 2016; 8 June 2016; 6 June 2016; 21 April 2016; 11 April 2016; 11 April 2016; 3 April 2016; 18 March 2016; 18 March 2016; 8 March 2016; 7 March 2016; 29 February 2016; 5 February 2016; 18 January 2016; 17 November 2015; 17 November 2015; 17 November 2015; 5 October 2015; 6 September 2015; 6 September 2015; 22 August 2015; 22 August 2015; 13 August 2015; 13 August 2015; 9 August 2015; 31 July 2015; 20 July 2015; 14 July 2015; 6 July 2015; 18 June 2015; 16 June 2015; 16 June 2015; 1 June 2015; 14 May 2015; 4 April 2015; 28 March 2015; 14 February 2015; 9 December 2014; 28 October 2014; 23 October 2014; 25 January 2017; 16 February 2017; 8 March 2017; 8 March 2017; 15 March 2017; 27 April 2017; 27 April 2017; 27 April 2017; 18 May 2017; 18 May 2017; 1 June 2017; 1 November 2017; 29 October 2017; 14 September 2017; 14 September 2017; 14 September 2017; 14 September 2017; 4 December 2017; 8 January 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 14 February 2018; 17 April 2018; 23 April 2018; 7 May 2018; 11 June 2018; 19 June 2018; 21 June 2018; 25 June 2018; 16 July 2018; 23 July 2018; 14 August 2018; 20 August 2018; 28 August 2018; 10 September 2018; 25 September 2018; 27 September 2018; 27 September 2018; 9 October 2018; 9 October 2018; 30 October 2018; 30 October 2018; 7 December 2018; 19 December 2018; 7 January 2019; 21 January 2019; 29 January 2019; 29 January 2019; 12 February 2019; 18 February 2019; 2 April 2019; 3 April 2019; 9 April 2019; 13 May 2019; 11 June 2019; 11 June 2019; 25 June 2019; 25 June 2019; 5 August 2019; 5 August 2019; 6 August 2019; 20 September 2019; 24 September 2019; 1 October 2019; 8 October 2019; 29 October 2019; 29 October 2019; 1 November 2019; 26 November 2019; 26 November 2019; 5 December 2019; 5 December 2019; 10 December 2019; 20 January 2020; 4 February 2020; 11 February 2020; 25 February 2020; 5 March 2020; 16 March 2020; 23 March 2020; 23 March 2020; 23 March 2020; 31 March 2020; 31 March 2020; 8 April 2020; 14 April 2020; 14 April 2020; 27 April 2020; 4 May 2020; 26 May 2020; 26 May 2020; 13 July 2020; 15 July 2020; 27 July 2020; 29 July 2020; 5 August 2020; 5 August 2020; 11 August 2020; 28 August 2020; 24 August 2020; 28 August 2020; 30 September 2020; 30 September 2020; 5 October 2020; 10 November 2020; 10 November 2020; 25 November 2020; 16 November 2020; 24 November 2020; 28 December 2020; 25 January 2021; 8 February 2021; 15 February 2021; 15 February 2021; 8 March 2021; 8 March 2021; 8 March 2021; 24 March 2021; 25 March 2021; 22 March 2021; 3 May 2021; 13 May 2021; 3 June 2021; 27 May 2021; 7 June 2021; 10 June 2021; 10 June 2021; 10 August 2021; 15 November 2021; 28 December 2021; 7 February 2022; 21 March 2022; 27 May 2022; 13 July 2022; 25 July 2022; 9 September 2022; 10 August 2021; 1 November 2021; 11 October 2021; 30 August 2021; 21 October 2021; 22 October 2021; 22 October 2021; 3 November 2021; 1 December 2021; 2 December 2021; 19 April 2022; 1 December 2021; 31 May 2022; 13 June 2022; 25 July 2022; 17 October 2022; 2 November 2022; 2 November 2022; 12 October 2022; 2 November 2022; 12 October 2022; 2 November 2022; 3 November 2022; 28 November 2022; 30 November 2022; 30 November 2022; 12 December 2022; 13 December 2022; 13 December 2022; 13 December 2022; 12 January 2023; 20 February 2023; 3 April 2023)
RepositoryEmber.js Repository
Written inJavaScript
Operating systemCross-platform
TypeJavaScript library
LicenseMIT License[2]
Websiteemberjs.com

Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.[3]

Ember is used on many websites including HashiCorp, DigitalOcean, Apple Music, Square, Inc., Intercom, Discourse, Groupon, LinkedIn, Live Nation, Ghost, Nordstrom, and Twitch.[4][5][6][7] Although primarily considered a framework for the web, it is also possible to build desktop and mobile applications with Ember when utilizing a hybrid app pattern.[8][9][10] The most notable example of an Ember desktop application is Apple Music, a feature of the iTunes desktop application.[11]

The Ember trademark is owned by Tilde Inc.[12]

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.[13][14] The framework was created by Yehuda Katz, a member of the jQuery, Ruby on Rails and SproutCore core teams.

Design

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.
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 addons.[15][16]
Stability
This is the idea that backward compatibility is important and can be maintained while still innovating and evolving the framework.[17]
Future web standards
Ember was an adopter of standards around JavaScript and the web, including promises, web components and ES6 syntax.[18][19] 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.[20]

Like Ruby on Rails, Ember follows convention over configuration (CoC), and the don't repeat yourself (DRY) principle.[21] It has been described as a highly opinionated framework built to be very flexible.[22]

Concepts

According to the company, Ember consists of five key concepts:[23]

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.[24] 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.)[25]
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.[26]
Services
Services are just singleton objects to hold long-lived data such as user sessions.[27]
Ember also provides dependency injection, declarative one-way data-flow, tracked properties, and automatically updating templates.[28]

Ember software / Addons

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.[29] This provides:

  • A standard file and directory structure
  • Development server with live reload
  • A testing framework[30]
  • Dependencies managed via npm.[31]
  • ES6/ES7+ syntax support (using Babel)
  • Asset management (including combining, minifying, and versioning)[32]

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.[33]
  • Addons which provide the ability to extend the features of Ember CLI.[34] Addons can be installed by typing ember install <addon-name>. Over two thousand addons are currently available[35] including add ons for CoffeeScript, LESS, Sass, Compass and Mocha.[36]

Ember Data

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

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

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

Ember Inspector

The Ember Inspector is an extension currently available for the Mozilla Firefox and Google Chrome web browsers for debugging Ember applications.[45][46] 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.[47] 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

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. This feature allows end users to see HTML and CSS right away, with the JavaScript downloading in the background and taking over once it has fully loaded.[48]

Liquid Fire

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

Release process

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

Release cycle

Ember follows a six-week release cycle, inspired by the rapid release cycle of Google Chrome.[51]

Starting with Ember 2.0, related projects supported by the core team have their releases coordinated, and share a version number with Ember itself.[52]

Upgrading and backward compatibility

Ember follows the semantic versioning convention.[53] 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.[54]

In addition to this process a number of steps were taken to mitigate issues around upgrading to the 2.0 release:

  • All major 2.0 features were in fact introduced early and spread out over a number of releases in order to reduce many of the issues caused by upgrades.
  • Most features that were removed are still 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.[55]

Future development

Project status can be tracked via the core team meeting minutes.[56] However, major changes to Ember go through the Request For Comment process.[57] 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 addon.[58][59]
  • Release cycle improvements. Among other things it proposes changes to Ember CLI to support "svelte builds", which will strip out deprecated and unused features.[60]
  • Outlet Focusing. Making Ember accessible by default. This RFC aims to improves the user experience for people using screen readers.[61]

Sponsorship

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.[62][63]

References

  1. ^ https://github.com/emberjs/ember.js/releases/tag/v1.9.1.
  2. ^ "ember.js/LICENSE". GitHub. Retrieved 27 April 2017.
  3. ^ Aghassipour, Alexander; Chacko, Shajith (30 Nov 2012). "Enterprise Apps Are Moving To Single-Page Design". TechCrunch.
  4. ^ "Best sport bet sites in India 2021 | Bet on sport ONLINE".
  5. ^ "Building With Ember.js at Groupon". TalentBuddy. Retrieved 15 Oct 2015.
  6. ^ "Discourse-Built with Ember.js". GitHub. Retrieved 15 Jul 2015.
  7. ^ "Intercom".
  8. ^ "Ember-Write Once, Run Everywhere". GitHub. 5 Jul 2015.
  9. ^ "Build better desktop apps with Ember". SpeakerDeck. 5 Jul 2015.
  10. ^ "Wicked Good Ember 2015 talk - Build better desktop apps with Ember, video". 5 Jul 2015.
  11. ^ "Built with ember - Apple Music". BuiltWithEmber. Retrieved 21 Jul 2016.
  12. ^ "Ember.js: Legal". emberjs.com. Retrieved 2019-02-14.
  13. ^ "SproutCore 2.0 becomes Ember.js". The H. 13 Dec 2011.
  14. ^ "Amber.js (formerly SproutCore 2.0) is now Ember.js". yehudakatz.com. 12 Dec 2011.
  15. ^ "Ember CLI". Retrieved 15 Dec 2018.
  16. ^ "Ember Addons". Retrieved 15 Dec 2018.
  17. ^ Asay, Matt (4 November 2014). "Innovating Fast And Slow: EmberJS Insists, "We Don't Need To Break The Web"". ReadWrite. Retrieved 18 Jun 2015.
  18. ^ "JavaScript Promises". Mozilla. Retrieved 18 Jun 2015.
  19. ^ "Web Components". WebComponents. Retrieved 18 Jun 2015.
  20. ^ "TC39: Members". TC39Wiki. Retrieved 18 Jun 2015.
  21. ^ "What we've learnt from Ember.js after 2 months developing our new product". Solid. 16 December 2014. Retrieved 3 November 2015.
  22. ^ "Top Reasons Why Industry Experts Use Ember.js And How You Can Adopt It Yourself". TalentBuddy. Retrieved 14 October 2015.
  23. ^ Frank Treacy. "5 Essential Ember 2.0 Concepts You Must Understand". EmberIgniter. Archived from the original on 27 July 2016. Retrieved 31 August 2015.
  24. ^ "Ember.js - Models: Introduction". Emberjs. Retrieved 21 Jan 2014.
  25. ^ Jackson, Robert. "HTMLBars". GitHub. Retrieved 18 February 2015.
  26. ^ "How To Add Polymer To Your Ember Project". ProgramWithErik. 27 March 2015. Retrieved 11 Aug 2015.
  27. ^ "Ember Services Tutorial". ProgramWithErik. 26 July 2015. Retrieved 27 July 2015.
  28. ^ Bango, Rey (14 Mar 2013). "Getting Into Ember.js". Nettuts+.
  29. ^ "Ember CLI". Retrieved 15 Dec 2018.
  30. ^ "Ember testing". Retrieved 15 Dec 2018.
  31. ^ "Ember CLI-managing dependencies". Retrieved 15 Dec 2018.
  32. ^ "Ember CLI asset compilation". Retrieved 15 Dec 2018.
  33. ^ "Ember CLI Blueprints". Retrieved 15 Dec 2018.
  34. ^ "Ember CLI Writing Addons". Retrieved 15 Dec 2018.
  35. ^ "Ember Addons directory". emberobserver.com. Retrieved 15 Dec 2018.
  36. ^ "Ember CLI Overview". Retrieved 15 Dec 2018.
  37. ^ "Ember Data README". GitHub. Retrieved 4 Dec 2013.
  38. ^ "Ember without Ember Data". Evil Trout. 23 March 2013. Retrieved 2 Jan 2014.
  39. ^ "JSON API specification". Retrieved 16 Jun 2015.
  40. ^ "Ember.js Models". Emberjs. Retrieved 26 Jun 2015.
  41. ^ "Ember Observer-Data". EmberObserver. Retrieved 16 Jun 2015.
  42. ^ "JSON API implementations". JSON API. Retrieved 26 Jun 2015.
  43. ^ "Integrating Ember.js with the Spring Framework". SpringEmber. 20 August 2014. Retrieved 26 Jun 2015.
  44. ^ "Ember Data 1.13 release". 18 June 2015. Retrieved 18 Jun 2015.
  45. ^ "Firefox Addons - Ember Inspector". Mozilla. Retrieved 5 August 2015.
  46. ^ "Chrome Web Store - Ember Inspector". Chrome Web Store. Retrieved 18 Feb 2014.
  47. ^ "Ember Inspector". Ember.js. Retrieved 28 Jun 2015.
  48. ^ "Inside Fastboot. Faking the DOM in node". Emberjs. 8 January 2015. Retrieved 19 June 2015.
  49. ^ "Liquid Fire: Animations & Transitions for Ember Apps". GitHub. Retrieved 19 June 2015.
  50. ^ "Animations in Ember.js with liquid-fire". airpair.com. Retrieved 10 July 2015.
  51. ^ "New Ember release process". 6 September 2013. Retrieved 19 June 2015.
  52. ^ "Ember Project at 2.0". 16 June 2015. Retrieved 19 June 2015.
  53. ^ "Ember API Freeze". 18 January 2013. Retrieved 19 June 2015.
  54. ^ "Ember Watson Addon". Retrieved 19 June 2015.
  55. ^ "Angular 2.0 announcement". 29 October 2014. Retrieved 19 June 2015.
  56. ^ "Ember core team meeting minutes". Emberjs. Retrieved 5 Jul 2015.
  57. ^ "Ember RFC process". Emberjs. Retrieved 18 Jun 2015.
  58. ^ "Ember Engines". EmberAddons.com. Retrieved 19 Jan 2016.
  59. ^ "Engines". Emberjs. Retrieved 3 Feb 2015.
  60. ^ "Refining the Release Process RFC". Emberjs. Retrieved 18 Jun 2015.[permanent dead link]
  61. ^ "Outlet Focusing RFC". Emberjs. Archived from the original on 24 September 2016. Retrieved 18 Jun 2015.
  62. ^ "Ember sponsors". Emberjs. Retrieved 18 Jun 2015.
  63. ^ "Interview with Mike North, Principal Software Engineer, Yahoo". Emberweekend. Retrieved 10 Aug 2015.

Further reading

  • Builes, Adolfo (2015). Ember-cli 101. Leanpub. 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