Ember 4.0 Update and Deprecation Warnings

Ares uses the Ember Javascript framework for its web portal UI. A new major version of Ember (4.0) will be coming out sometime in late 2021/early 2022. This looming upgrade is the cause of a number of “Deprecation Warnings” you may see on your browser console or web portal output.

If you’re using just the core code, you don’t need to worry about these warnings. I’m aware of them, and they’ll be taken care of before they become a problem.

If you have custom web portal code of your own, read on.

In 4.0, some things work a little differently and require code changes. The ‘new way’ works on the current version of Ember too. You can start getting your code ready ahead of time so that things don’t suddenly break on you whenever Ares starts using 4.0.

I’ve highlighted some of the common 4.0 pitfalls below, but this is not meant to be an exhaustive list. You’ll need to thoroughly test any custom code whenever 4.0 does come out.

Property References

Currently you can reference controller/component properties with things like {{model}} or {{currentUser}}.

In 4.0 this is not supported. You need to avoid ambiguity between local/global/component variables by specifying ‘this’ where appropriate. For example: {{this.model}} or {{this.currentUser}}.

Search for this-property-fallback on the Ember Deprecations List for more info.

Routing Transitions

Calling transitionTo or transitionToRoute from the controller or route directly is no longer supported. Instead you need to go through the routing service.

import { inject as service } from '@ember/service';

export default Controller.extend({
    router: service(),
    actions: {
        rejectChar() {

Search for routing.transition-methods on the Ember Deprecations List for more info.

Attribute Arguments

Currently you can use “@” arguments for some HTML properties of the built-in components. For example, to set the HTML attribute “class” on a link you can do:

<LinkTo @route="jobs" @class="btn btn-primary">

4.0 is stricter about what can be passed as an @-argument to certain components:

  • LinkTo
  • Input
  • Textarea

Some things use ‘@’ (@route, @value), some things can’t (class, rows). So the link above needs to change to:

<LinkTo @route="jobs" class="btn btn-primary">

Search for ember.built-in-components.legacy-attribute-arguments on the Ember Deprecations List for more info, including a complete list of which properties are still “@” and which are not.

Addon Deprecations

When you’re debugging your own deprecation warnings, be aware that some of them are being caused by 3rd-party Ember addons that haven’t been upgraded yet (such as simple auth and pikaday). There’s nothing you can do about these, so don’t fret about them.