Ember 4.0 released

– By Jen Weber, Matthew Beale

Today the Ember project is releasing version 4.0 of Ember.js, Ember Data, and Ember CLI. Ember's 4.0 release focuses the framework by removing long-deprecated APIs and support for legacy platforms. This blog post will help you understand how to upgrade and navigate any breaking changes.

Although Ember "Octane" APIs have been the default for new applications since Ember 3.15, the framework has continued to support "Classic" framework features in accordance with our semantic versioning commitment. Ember 4.0 takes a step forward and drops already-deprecated classic APIs, however the foundational EmberComponent and EmberObject/computed APIs are not removed in this release.

Additionally, today we're promoting Ember 3.28 to become Ember's latest Long-Term Support (LTS) release. Ember's LTS release process provides bugfix support for about 36 weeks, and security patches for about 54 weeks. See the 3.28 release post and LTS documentation for more details.

For applications using LTS releases, upgrading directly to 4.0 is not encouraged. Best practice for those applications is to upgrade to Ember 3.28 LTS as soon as possible, then wait for the first LTS of the 4.0 series to be released. Ember 4.4 will be the first candidate.

Major Releases in Ember

Starting with Ember 2.0, major versions of Ember have been about removal of deprecated APIs, and not about the introduction of new features or development styles. Ember 4.0 follows that tradition, and will contain no new features.

Our plans for Ember 4.0 were originally announced in July 2021 in The Road to Ember 4.0.

Trying Ember for the first time

If you're interested in trying Ember for the first time today, get started by running:

# Make sure you are on the latest npm version, 8.x
npm --version
npx ember-cli@latest new my-project
cd my-project
npm start
# Then visit http://localhost:4200

How to upgrade your project to Ember 4

If your app or addon runs with no deprecations in the latest release of 3.28 you should be able to upgrade to Ember 4 with no additional changes. Depending on how up to date your dependencies are, you may want to upgrade several of those before the jump including ember-data, ember-auto-import, and ember-cli-htmlbars

Follow these steps in order:

  1. Upgrade your project to the latest patch version of Ember 3.28. Many developers can do this by running npx ember-cli-update --to 3.28. The general Ember upgrade guide has more details about how to upgrade your Ember app/addon.
  2. Upgrade the ember-cli-htmlbars dependency (if present) to the latest patch release of 6.x. The final patch releases of the 5.x and 6.x series include important fixes for how deprecations are presented.
  3. Install ember-auto-import. If your app does not already have it as a dependency, follow the ember-auto-import installation documentation. The short version is: npm i --save-dev ember-auto-import webpack. If you are already using ember-auto-import, make sure you are using release 2.x or better. You can follow this upgrade guide if you are on an earlier version.
  4. Make sure your app builds successfully.
  5. Resolve all deprecation warnings. Deprecated APIs are removed in Ember 4.0. You may need to upgrade some of your dependencies if they are using deprecated APIs. See the Ember Deprecation Guide for more details about specific deprecations and how to resolve them. Applications that need to upgrade through several versions may want to consider isolating individual deprecations by using ember-cli-deprecation-workflow.
  6. Make sure your app builds successfully and your test suite passes with no deprecations.
  7. Upgrade your app to Ember 4.0. Again, many developers can do this by running npx ember-cli-update --to 4.0. Refer to the general Ember upgrade guide for more details about how to upgrade your Ember app/addon.

Notable changes

Browser Support in Ember 4

Ember 4.0 supports two classes of browsers: Evergreen (those on a weeks-long, auto-upgrade release cycle) and non-evergreen. This classification system allows us to create a rolling minimum version for evergreen browsers, while using a more traditional, pinned minimum version for non-evergreen browsers.

Specifically, the Ember 4.x release policy includes support for Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari on desktop and mobile. It does not include support for any version of Internet Explorer.

Supported browser ranges:

  • Chrome >= 92
  • Edge >= 93
  • Firefox >= 91
  • iOS >= 12
  • Safari >= 12
  • Chrome Android >= 96
  • Firefox Android >= 94

Read more about this change in the deprecation guide and at Ember's browser support policy page.

ember-auto-import is a required dependency

Using Ember 4.x requires that your project depends on version 2.0+ of the ember-auto-import addon. Follow the "How to upgrade" steps above to learn how to upgrade.

Why is this dependency required? ember-auto-import implements support in Ember CLI for something we call the v2 addon format. This specification describes how to publish an Ember CLI addon that has minimal build overhead and better compatibility with modern build and analysis tooling (ala Webpack). Later in Ember's 4.x release cycle, we intend to release framework libraries as v2 addons to take advantage of those improvements. Mandating the library is installed for 4.0 prepares Ember projects for that eventual change.

Changes in Ember.js 4.0

Ember.js is the core of the Ember framework. It provides routing, rendering, and dependency injection features.

Ember.js 4.0 introduces no new public API. Instead, it is comprised of bug fixes and the removal of previously deprecated public API from the 3.x cycle.

Ember 4.0 does not remove the EmberComponent API or the core parts of the EmberObject system. These APIs are widely used, even after the release of Octane, by existing application and addon code.

APIs Removed in 4.0

Below we've listed some of the most significant API removals in Ember.js 4.0. For a complete list of removals, see the Ember.js 3.x deprecation guide.

  • Ember.Logger is removed in favor of native console APIs. Guide here.
  • Copyable mixin is removed in favor of the ember-copy addon. Guide here.
  • sendAction is removed in favor of calling closure actions like any other callback. Guide here.
  • willTransition and didTransition are removed in favor of router service events. Guide here.
  • Computed Property volatile() calls are removed in favor of native getters. Guide here.
  • this.$() and other jQuery APIs have been removed in favor of native browser equivalents. Guide here. An optional feature which restored jQuery-specific features is also removed. Guide here.
  • {{partial}} is removed in favor of template-only components. Guide here.
  • Using the built-in global resolver (App.FooController anyone?) is deprecated in favor of using ember-resolver, already the default for Ember CLI generated apps. Guide here.
  • Ambiguous references to a component's properties are removed. You must now write {{this.someProp}}. Guide here.
  • renderTemplate is removed in favor of {{in-element}} or other rendering target redirection like ember-wormhole. Guide here.
  • Support for the Ember global on window is removed in favor of importing the Ember object or using the module-based API. Guide here.
  • Support for certain features of the <LinkTo>, <Input>, and <Textarea> components are removed. See guides on positional arguments, legacy arguments, legacy HTML attributes, and importing legacy built-in components.
  • The internal APIs of <LinkTo>, <Input>, <Checkbox>, and <Textarea> are now private, and subclassing them is no longer supported. An example of subclassing looks like this: export class MyLinkComponent extends LinkTo. Apps or addons that subclass can install the library @ember/legacy-built-in-components as a stepping stone, following this deprecation guide.
  • …and additional uncommon deprecations found in the Ember.js 3.x deprecation guide

Many of these removed APIs date back to Ember 1.x, and are rarely used now (or should be rarely used).

For more details on the changes in Ember.js 4.0, please review the Ember.js 4.0.0 release page.

Deprecations added in 4.0

The following public API, marked as deprecated in Ember 4.0, will be removed in Ember 5.0:

Changes in Ember Data 4.0

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

This release removes APIs that were deprecated in the 3.x cycle. Examples include:

For more details on the changes in Ember Data 4.0, please review the Ember Data 4.0.0 release page.

Changes in Ember CLI 4.0

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

Some notable changes in Ember CLI 4.0 include:

  • When generating a new Ember app (ember new appname) or addon (ember addon addonname) the option --ci-provider is now available. This can be passed travis or github to generate the appropriate CI configuration files. See ember-cli/ember-cli#9579 for more details.
  • Additionally, the default CI provider for newly generated apps and addons is now GitHub Actions (replacing TravisCI).
  • Ember CLI's EmberApp accepts an option addons to manually control which installed addons will be run during the build. The properties exclude and include on this option have been introduced to replace the properties blacklist and whitelist. The replaced properties will continue to function until they can undergo a full deprecation and major release cycle. This change is in support of RFC 639.

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

Need help?

Are you stuck on something? Do you have questions? Visit one of our community chat groups.

What next?

Want to help make Ember 4 a success? Here are some things you can do!

  • Blog about your experience.
  • If someone helps you with a question, consider posting both the question and answer to a public place like Stack Overflow or the Ember Discourse forums, so that others can learn from it.
  • Help your favorite addons to upgrade to Ember 4!
  • Stay tuned via the Ember Times for new features and requests for help implementing them.

Thank You!

We want to offer a heart-felt "thank you" to our the amazing Ember 4.0 contributors. This release was a wide-ranging effort with over 50 API removals in the ember-source package alone, and required coordination of timelines and execution across all Ember's core libraries and teams. Ember is a project maintained largely by volunteers, and this release is the result of sustained contribution across many codebases, timezones, and interests.

We deeply appreciate the support of our contributors and user community. Thank you.