Ember 3.24 Released

Today the Ember project is releasing version 3.24 of Ember.js, Ember Data, and Ember CLI. This release of Ember.js is an LTS (Long Term Support) candidate. LTS candidates prioritize stability over the addition of new features, and have an extended support schedule.

This release kicks off the 3.25 beta cycle for all sub-projects. We encourage our community (especially addon authors) to help test these beta builds and report any bugs before they are published as a final release in six weeks' time. The ember-try addon is a great way to continuously test your projects against the latest Ember releases.

You can read more about our general release process here:

• Release Dashboard
• The Ember Release Cycle
• The Ember Project
• Ember LTS Releases

---

Ember.js

Ember.js is the core framework for building ambitious web applications.

Changes in Ember.js 3.24

Ember.js 3.24 is an incremental, backwards compatible release of Ember with bug fixes, performance improvements, and minor deprecations.

Bug Fixes

Ember.js 3.24 introduced 4 bug fixes.

1. When the router service is injected (e.g. into a component), the router service can automatically work in non-application tests. In other words, we no longer need to call this.owner.setupRouter(). (#19080)
2. When there is no template associated with a component class, the low-level API getComponentTemplate() now returns undefined instead of null. The return value of undefined is what had been specified in the Component Templates Colocation RFC. (#19253)
3. In an Ember Engines app, the <LinkTo> component once again supports linking within an engine. Please note, a fix was made possible through a breaking change in the private implementation of <LinkTo>. When you upgrade your app to v3.24 or above, you will want to upgrade Ember Engines to at least ember-engines@0.8.9 (see release notes here for details). (#19223) ⚠️
4. When a computed property has a dependent key that includes @each, followed by an aliased property, the computed property recomputes when the aliased property's value changes. (#19280)

Features

Ember.js 3.24 introduced 3 features.

1. When ember-page-title is installed, the blueprint for a route template creates a {{page-title}} helper invocation in addition to {{outlet}}. For more information, please see RFC #645 and ember-page-title documentation. (#19224)
2. The interface of DeprecationOptions, which can be passed to the deprecate() function, requires the keys for and since to exist. For more information, please see the Deprecation Staging RFC. (#19133)
3. Glimmer VM, the rendering engine, has been upgraded to version 0.65.0. The upgrade includes a bug fix and a few upstreams. (#19258, #19261, #19267)

Deprecations

Ember.js 3.24 introduced 4 deprecations.

1. Going back to the interface of DeprecationOptions (see Features above), forgetting to pass for or since will trigger a deprecation message. (#19133)
2. Ember.String.loc function, @ember/string#loc function, and {{loc}} helper have been deprecated in favor of a dedicated localization solution like ember-intl. For more information, please see the Deprecations Guide. (#19211)
3. Calling camelize, capitalize, classify, dasherize, decamelize, underscore, or w—these are Ember.String methods—on a string is deprecated. Instead of calling the method on the string, you can import the function from @ember/string:

// Before
let mascot = 'Empress Zoey';

console.log(mascot.camelize());  // empressZoey

// After
import { camelize } from '@ember/string';

let mascot = 'Empress Zoey';

console.log(camelize(mascot));  // empressZoey

For more information, please see the Deprecations Guide. (#19234)

1. tryInvoke from @ember/utils module has been deprecated in favor of JavaScript's optional chaining ?..

// Before
import { tryInvoke } from '@ember/utils';

let today = new Date('01/07/2021');

tryInvoke(today, 'getTime');              // 1609974000000
tryInvoke(today, 'setFullYear', [2014]);  // 1389049200000
tryInvoke(today, 'noSuchMethod', [2014]); // undefined

// After
let today = new Date('01/07/2021');

today.getTime?.();          // 1609974000000
today.setFullYear?.(2014);  // 1389049200000
today.noSuchMethod?.(2014); // undefined

/*
  Note, `today` is used in the context of `tryInvoke`.
  As a result, we can assume that `today` is an object
  and write `today.getTime` instead of `today?.getTime`.

  The examples exist only to illustrate how to refactor
  `tryInvoke`. Please don't write `today.getTime?.()`
  in practice. :)
*/

For more information, please see the Deprecations Guide.

Deprecations are added to Ember.js when an API will be removed at a later date. Each deprecation has an entry in the deprecation guide describing the migration path to a more stable API. Deprecated public APIs are not removed until a major release of the framework.

Consider using the ember-cli-deprecation-workflow addon if you would like to upgrade your application without immediately addressing deprecations.

Last but not least, Ember.js 3.24 removed a few feature flags and an experimental API called expandLocalLookup. For more details on changes in Ember.js 3.24, please review the Ember.js 3.24.0 release page.

---

Ember Data

Ember Data is the official data persistence library for Ember.js applications.

Changes in Ember Data 3.24

Bug Fixes

Ember Data 3.24 introduced 1 bug fix.

1. In a production environment, an attempt to set something on a deleted record no longer shows the value in the error message. This was done to prevent leaking sensitive data. (#7370)

Features

Ember Data 3.24 introduced 0 features.

Deprecations

Ember Data 3.24 introduced 0 deprecations.

For more details on changes in Ember Data 3.24, please review the
Ember Data 3.24.0 release page.

---

Ember CLI

Ember CLI is the command line interface for managing and packaging Ember.js applications.

Upgrading Ember CLI

You may upgrade Ember CLI using the ember-cli-update project:

npx ember-cli-update

This utility will help you to update your app or addon to the latest Ember CLI version. You will probably encounter merge conflicts, in which the default behavior is to let you resolve conflicts on your own. For more information on the ember-cli-update project, see the GitHub README.

While it is recommended to keep Ember CLI versions in sync with Ember and Ember Data, this is not required. After updating ember-cli, you can keep your current version(s) of Ember or Ember Data by editing package.json to revert the changes to the lines containing ember-source and ember-data.

Changes in Ember CLI 3.24

Bug Fixes

Ember CLI 3.24 introduced 1 bug fix.

1. When Embroider v2 addons are present, prevent forming a cycle in the build process. (#9402)

Features

Ember CLI 3.24 upgraded the packages that are present in the package.json blueprint to their latest version. There are 4 notable changes to the package.json blueprint:

1. ember-page-title has been added to the blueprint. For more information, please see RFC #645 and ember-page-title documentation. (#9372, #9382)
2. ember-qunit has been upgraded to v5 (a major version change). Following the migration guide, the package.json blueprint includes @ember/test-helpers and qunit. The blueprints for tests/index.html and tests/test-helper.js have been updated as well. (#9340, #9371)
3. eslint-plugin-ember has been upgraded to v10 (a major version change), which promoted octane rules to recommended and enabled several additional rules as recommended. To learn more about these linting rules, please check the eslint-plugin-ember documentation. (#9403)
4. prettier (along with eslint-config-prettier and eslint-plugin-prettier) has been added to the blueprint. To learn more, please see RFC #628 and Prettier documentation. (#9391, #9407, #9410)

Deprecations

Ember CLI 3.24 introduced 0 deprecations.

For more details on the changes in Ember CLI 3.24 and detailed upgrade
instructions, please review the Ember CLI 3.24.0 release page.

Thank You!

As a community-driven open-source project with an ambitious scope, each of these releases serves as a reminder that the Ember project would not have been possible without your continued support. We are extremely grateful to our contributors for their efforts.

Comments

[Justin]

How is Ember.js different then other frame works ?

[Isaac Lee]

Hi, Justin. Thanks for checking the article and taking an interest in learning more about Ember.js. 👋

I think it can be difficult to do a compare-and-contrast of frameworks in a short comment. To learn more, when you have time, I recommend visiting emberjs.com/ and trying out the Super Rentals tutorial (click on Read the Tutorial button in the homepage). If you have questions, feel free to ask them on Ember Discord!

[Justin]

Thanks Isaac I'll check the Discord out :D