Ember.js 2.3 and 2.4 Beta Released


Ember.js 2.3, a minor version release of Ember with backwards compatible
changes, is released today.
Ember.js 2.4 beta, the branch of Ember that will be released as stable in
roughly six weeks, is also being released today.
Changes in Ember.js 2.3
Ember.js 2.3 introduces a number of features we're excited to see in a stable
release.
ember-qunit 0.4.16+ is required for your codebase's test suite to be
compatible with Ember 2.3.
See "Introducing Owners and Deprecating Containers"
below for more detail.
visit API
Ember FastBoot and new testing
APIs motivated the addition of a visit method for Ember.Application and
Ember.ApplicationInstance objects. Called on Ember.Application this
method accepts several configuration options.
For example, you might use this API to manually boot an Ember application
and then instruct it to visit a URL:
import MyApp from 'my-app';

$(function() {
let App = MyApp.create({ autoboot: false });
let options = {
// Prevent this application from updating the URL in the address bar
location: 'none',
// Override the default `rootElement` to render into a specific `div`
// on the page
rootElement: '#demo'
};
App.visit('/demo', options).then((/* appInstance */) => {
$('#loading').fadeOut(); // Or any other logic after rendering
});
});

Importantly, the addition of this API means FastBoot
is now usable with Ember.js 2.3 stable
. FastBoot itself remains experimental,
however this is the first time you can use it with a release build of Ember.js.
The README.md for ember-cli-fastboot
is the best place to start if you want to try FastBoot.
You can read more about the visit API and its use cases in the
visit API documentation.
Reviewing the main implementation PR at emberjs/emberjs #12394 and the integration into FastBoot at
tildeio/ember-cli-fastboot #71
may also be helpful.
Many thanks to @tomdale and
@chancancode for their work implementing
this API and for their continued work on FastBoot.
Hash Helper
The (hash helper creates an object from arguments passed to it during
invocation, and then returns that object. For example this usage would create an object with
the property name:
{{#with (hash name='Bob') as |person|}}
Hello, my name is {{person.name}}
{{/with}}

This helper is introduced to make the new contextual components feature
more convenient, and it will often be used with the {{yield helper. For
example:
{{!-- app/templates/components/nice-person.hbs --}}
{{yield (hash name='Bob')}}

{{!-- app/templates/index.hbs --}}
{{#nice-person as |person|}}
Hello, my name is {{person.name}}
{{/nice-person}}

See the hash API documentation for
for details on this helper, and read the contextual components section below
for further context.
Thanks to @Serabe for his implementation of this
feature and to @MiguelCamba for his fantastic
ember-hash-helper-polyfill
addon. Using the polyfill you can start using (hash with Ember.js 1.13 or
later.
Contextual Components
The new contextual components feature allows for multiple components to
privately share data, but be invoked in a flexible manner. For example,
this {{alert-box}} component yields a contextual component composed
of the alert-box-button component and the attribute onclick:
{{!-- app/templates/components/alert-box.hbs --}}

{{yield (hash
close-button=(component 'alert-box-button' onclick=(action 'close'))
)}}


{{!-- app/templates/index.hbs --}}
{{#alert-box as |box|}}
Danger, Will Robinson!

{{#box.close-button}}
It's just a plain old meteorite.
{{/box.close-button}}

{{/alert-box}}

Contextual components are created using the nested form of the
component helper, and may be passed attrs and positional params. Contextual
components must be invoked with a . in their path, unless they are being
passed to the invoking {{component helper.
This new feature is a powerful tool for addon authors, allowing them to
yield components without having arguments to those components become de-facto
public API. In addition, when the local lookup feature of Ember's pods
architecture arrives the combination of these features will permit
completely private components to be yielded.
For more information about contextual components see the component helper
API documentation
.
Further details about the API design decisions can be found in
RFC #64.
Thanks again to @Serabe for his implementation
of this feature as well as @mixonic and
@_mmun for their efforts on the RFC and design.
Introducing Owners and Deprecating Containers
Ember's container API is one of the more commonly used private APIs still
exposed. In Ember.js 2.1, a major refactor of application
boot removed access to the container from initializers and instance initializers,
creating public API alternatives.
In Ember 2.3, accessing the container property on a framework-generated
object is deprecated in favor of a public owner API.

For example, this component will dynamically lookup an audio service based
on the audioType of its model:
import Ember from 'ember';
const {
Component,
computed,
getOwner
} = Ember;

// Usage:
//
// {{play-audio model=audioModel}}
//
export default Component.extend({
audioService: computed('model.audioType', function() {
let owner = getOwner(this);
let serviceName = this.get('model.audioType');
return owner.lookup(`service:audio-${serviceName}`);
}),
click() {
let player = this.get('audioService');
player.play(this.get('model.file'));
}
});

The return value of getOwner will be an Ember.ApplicationInstance
for objects generated by the framework.
ember-qunit 0.4.16+ includes important compatability patches for Ember
2.3. Please upgrade ember-qunit to ensure your test suite continues to work
properly and without deprecation warnings.
Specifically 0.4.16+ includes
PR #119 to ember-test-helpers
adding getOwner compatibilty.
For more information about migrating code from using container to getOwner,
see the deprecation guide.
Further details about the API design decisions can be found in
emberjs/emberjs #11874
and emberjs/emberjs #12555.
The ember-getowner-polyfill addon
provides compatibility for getOwner back to Ember.js 1.10.
Many thanks to @dgeb for his tireless efforts
implementing this feature, and for his time buildling consensus around
improvements to the Ember dependency injection API. Additionally credit is
due to @rwjblue for his polyfill and upgrade PRs to
Ember Data, Liquid-Fire, and Ember-i18n.
These provide a good example of how to upgrade any addon or app codebase.
Removing the jQuery version assertion
Ember has long had an assertion that ensured only supported versions of jQuery
were present. With the introduction of Ember-CLI and ability to use package
managers for client-side code, this assertion is redundant.
Recent releases of jQuery have triggered the outdated assertion. Since it is
not really required any longer, we've removed it.
Ember remains compatible with jQuery 1.7+.
Ember.js 2.3.0+, 2.2.2, and 1.13.12 have this assertion removed.
For more details on changes landing in 2.3, review the
Ember.js 2.3.0 CHANGELOG.
Ember.js 2.4 beta
No new features are slated for Ember 2.4. During the canary cycle leading to
this beta, the core team and community have been primarily focused on
performance improvements or feature work still behind a feature flag.
For more details on changes landing in 2.4, review the
Ember.js 2.4.0-beta.1 CHANGELOG.