What’s new in Ember Octane

Ember.js is an open-source MVC-based JavaScript framework suited for building large scale client-side applications. It helps developers be more productive out of the box and comes preconfigured with almost all that you need to get an application up and running.

It’s official website describes Ember.js as:

A productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.

One of the good things about Ember.js is its backward compatibility. This makes it easy to integrate the latest features of the framework in your apps without having to deal with breaking changes.

In its latest release Ember Octane, which was introduced as Ember 3.15, comes with a lot of features and provides updates to Ember’s components and reactivity system, these changes include:

• Glimmer components
• Glimmer reactivity
• Reusable DOM behavior with modifiers
• Fully refreshed tutorials and component guides
• Improved tooling

What is Ember Octane?

According to its documentation:

Ember Octane describes a set of new features that, when taken together, represent a foundational improvement to the way you use Ember.js. It has modern, streamlined components, and state management that make it fun to build web applications. With seamless interoperability for existing apps, teams can migrate at their own pace, while developers building new apps start out with the best that Ember has to offer.

Let’s take a look at some of the newest features that got shipped in the latest version of the framework.

Glimmer components

Ember used to have a single component system where you had to configure a “root element” using a JavaScript micro syntax:

import Component from '@ember/component';

export default Component.extend({
  tagName: 'p',
  classNames: ["tooltip"],
  classNameBindings: ["isEnabled:enabled", "isActive:active"],
})

With Glimmer components, you can say goodbye to this as it allows you to create a component with no root element at all. This makes creating root components much easier and eliminates the special cases that come from having a second API just for working with the root element of a component.

Your components can now be rewritten like this:

<p class="tooltip {{if @isEnabled 'enabled'}} {{if @isActive 'active'}}">
  {{yield}}
</p>

You can also create a component with no root element at all to improve the performance and it will work, like this:

<p>{{yield}}</p>
<hr>

Glimmer reactivity

Reactivity is the way modern JavaScript frameworks detect state changes, and how they efficiently propagate the changes through the system. A very good example is how the DOM is automatically updated whenever data in our application changes.

Reactivity, according to Wikipedia:

Is a programming paradigm oriented around data streams and the propagation of change. This means that with this paradigm it is possible to express static or dynamic data streams with ease, and also communicate that an inferred dependency within the associated execution model exists, which facilitates the automatic propagation of the changed data flow

Ember Octane offers a simpler reactivity model called “tracked properties”, which is denoted with the @tracked annotation. Adding @tracked to the property of a class makes it reactive such that if there is any change to the property, any part of the DOM that uses that property will get updated automatically.

Reusable DOM behavior with modifiers

Another update to the Ember component model is element modifiers, a feature that allows you to build reusable DOM behavior that isn’t connected to any specific component, modifiers are similar to how mixins work and should replace classic mixins as you would not have to deal with issues such as naming conflicts.

For example, let’s say we have a third-party library that exposes activateTabs and deactivateTabs functions, both of which take an element. In classic Ember, you could write a mixin like this:

import Mixin from '@ember/object/mixin';

export default Mixin.create({
  didInsertElement() {
    this._super();
    activateTabs(this.element);
  }

  willDestroyElement() {
    this._super();
    deactivateTabs(this.element);
  }
})

And then you would use it in a component like this:

import Component from '@ember/component';

export default Component.extend(Tabs, {
  // ...
});

With element modifiers, this code block can be reimplemented. This is what our Tabs mixin looks like when reimplemented as a modifier:

import { modifier } from 'ember-modifier';
export default modifier(element => {
  activateTabs(element);
  return () => deactivateTabs(element);
});

You can use a modifier on any element using element modifier syntax:

<div {{tabs}}></div>

Element modifiers are really straightforward to use. We simply created a function that takes the element, activates it, and returns a destructor function that would run when Ember tears down the element.

Fully refreshed tutorial and component guides

The Ember team also overhauled the documentation with the Super Rentals Tutorial as a guide for teaching the Octane way to build Ember apps.

The guides also underwent a major refresh, elevating components and eliminating confusing organization (like the separation between templates and components). The new guides deemphasize controllers, which are less important in Octane.

Before Octane:

After Octane:

Improved tooling

For Octane, the Ember inspector has been updated to support Octane features in a first-class way, including tracked properties and Glimmer components.

The refreshed inspector eliminates duplicate concepts and outdated language (like “View Tree”). It also has numerous visual improvements, including a new component tooltip that better reflects Octane idioms. It also updates the component tooltip, which fixes a long-standing issue with physically small components.

Basic usage

Let’s take a look at how we can get started with Ember Octane.

This tutorial assumes the reader has the following:

• Node.js 10x or higher
• Yarn / npm 5.2 or higher installed on their PC

Install the Ember-CLI tool, this toolkit is for Ember.js that helps you bootstrap Ember projects on the fly.

Install the CLI tool with the following command:

npm install -g ember-cli

Installing the Ember CLI package globally gives us access to the ember command in our terminal, the ember new command helps us create a new application.

Next, create an ember project with the new command:

ember new ember-quickstart

This command will create a new directory called ember-quickstart and set up a new Ember application with all the necessary files and configurations for bootstrapping a project inside of it:

Change directory into the application directory:

cd ember-quickstart

Start the development server:

ember serve

You should get something similar to this running on http://localhost:4200  after running the ember serve command:

Conclusion

Ember Octane brings updates to help you build even more powerful applications. Good news – you do not need to change your whole app to use Octane’s features! All features are available for you to opt into, one piece at a time.

There are more amazing features not covered in this article. For a full list of the updates, read the release notes.

Which new features stand out to you? Let me know in the comments section.