3 min read

Yesterday, the Ember project announced the release of version 3.4 of the three core sub-projects: Ember.js, Ember Data, and Ember CLI.

Ember is an open source JavaScript frontend framework, which is based on Model-View-Viewmodel (MVVM) pattern. It enables developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.

Ember.js 3.4

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

Angle bracket invocation

You can now use angle bracket invocation instead of the classic invocation syntax. For example:

Instead of using the following syntax:

classic invocation syntax

Source: Ember

You can use:

angular invocation syntax

Source: Ember

This release does not deprecate the classic invocation syntax, but using angle bracket invocation will provide more syntax clarity. As component invocation is often encapsulating important pieces of UI, a dedicated syntax would help visually distinguish them from other handlebars constructs, such as control flow and dynamic values.

Custom Component Manager

This version comes with the new Custom Component Manager feature enabled by default. This allows addon authors to access a low-level API for creating component bases classes which addon users can re-use and extend components from.

Deprecations

Use closure actions instead of sendAction

When using sendAction, the developer passes the name of an action. When sendAction is called, Ember.js would look up that action in the parent context and invoke if it exists. This poses a few problems, such as:

  • The action is looked up only when it is about to be invoked. This makes it easier for a typo in the action’s name to go undetected.
  • When you use sendAction you cannot receive the return value of the invoked action.

Closure actions solve these problems and are also more intuitive to use.

Ember 2 Legacy

This is the last version that will work with the polyfill addon for features that were deprecated in 2.x. If you have been using ember-2-legacy, it’s time to upgrade.

Ember Data 3.4

Ember Data is the data-persistence library that provides many of the facilities of an object-relational mapping (ORM).

Ember Data 3.4 is the first Ember Data LTS release. This release has received a ton of bug fixes to address many known issues that have been reported over the last several months. Some of them are listed here:

  • TrackableRequests for when async leakage is detected. This feature enables app developers to better use async… await while simultaneously detecting asynchronous test leaks in their data layer.
  • External partner testing is now enabled to run the tests of external apps and addons against commits in ember-data.
  • Transpilation issues with @ember/ordered-set are fixed.
  • Tests are added for createRecord+unloadRecord.
  • ember-inflector is upgraded to v3.3.0.
  • Added module-unification adapter and adapter-test blueprints.

Ember CLI 3.4

Ember CLI is the command line interface to create, develop, and build Ember.js applications. Ember CLI 3.4 is an LTS release candidate. It will receive critical bug fixes for the upcoming 6 release cycles, as well as security patches for the next 10 release cycles.

Added support for Node 10

Support has been added for Node 10 and support for Node 4 has been dropped from Ember CLI’s support matrix. When upgrading to Ember CLI 3.4, make sure to use it together with Node 6 and above.

Template linting

Automatic template linting is added to your application via ember-template-lint according to the recommended list of rules. Ember CLI will generate a TemplateLint test file for each of your templates to your test suite automatically to be run via ember test.

To run the linter you can also use the new command npm run lint:hbs or yarn run lint:hbs respectively.

Read the full list of changes on Ember’s official website and also check out its GitHub repository.

Read Next

Ember project releases v3.2.0 of Ember.js, Ember Data, and Ember CLI

Getting started with Ember.js – Part 1

Getting started with Ember.js – Part 2