What’s new in Ember Octane
Tags: ember, javascript, webdev
Published: 2020-05-11 13:06:55

---
title: What’s new in Ember Octane
published: true
date: 2020-04-14 13:00:56 UTC
tags: ember,javascript,webdev
canonical_url: https://blog.logrocket.com/whats-new-in-ember-octane/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/g18t65hmwox75ymr59ug.png
---
**Written by [Anjolaoluwa Adebayo-Oyetoro](https://blog.logrocket.com/author/anjolaoluwaadebayooyetoro/)**✏️

[Ember.js](https://emberjs.com/) 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](https://emberjs.com/) 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](https://emberjs.com/editions/octane/):

> 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.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Glimmer components

Ember used to have a [single component system](https://guides.emberjs.com/v1.10.0/components/) where you had to configure a “root element” using a JavaScript micro syntax:

```jsx
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:

```jsx
<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:

```jsx
<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](https://en.wikipedia.org/wiki/Reactive_programming):

> Is a [programming paradigm](https://en.wikipedia.org/wiki/Programming_paradigm) oriented around [data streams](https://en.wikipedia.org/wiki/Dataflow_programming) 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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
<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](https://guides.emberjs.com/v3.15.0/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:

![before octane](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/beforeoctane.png?resize=321%2C679&ssl=1)<figcaption id="caption-attachment-16978">Before Octane</figcaption>

After Octane:

![after octane](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/afteroctane.png?resize=415%2C833&ssl=1)<figcaption id="caption-attachment-16979">After Octane</figcaption>

## 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.

![component tooltip ember octane](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/improvedtooling.png?resize=730%2C332&ssl=1)

## 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](https://nodejs.org/en/download/) or higher
- [Yarn](https://yarnpkg.com/lang/en/) / [npm 5.2 or higher installed](https://www.npmjs.com/get-npm) on their PC

Install the [Ember-CLI](https://ember-cli.com/) tool, this toolkit is for Ember.js that helps you bootstrap Ember projects on the fly.

Install the CLI tool with the following command:

```jsx
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:

```jsx
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:

![ember quickstart](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/emberquickstart1.png?resize=730%2C625&ssl=1)

Change directory into the application directory:

```jsx
cd ember-quickstart
```

Start the development server:

```jsx
ember serve
```

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

![ember serve on local host](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/04/emberserve.png?resize=730%2C530&ssl=1)

## 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](https://blog.emberjs.com/2019/12/20/octane-is-here.html).

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

* * * 
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *

The post [What’s new in Ember Octane](https://blog.logrocket.com/whats-new-in-ember-octane/) appeared first on [LogRocket Blog](https://blog.logrocket.com).