Ember.js Octane vs Classic Cheat Sheet

This guide is a cheat sheet for using Ember.js Octane. It doesn't cover everything, but it should get you started!
PRs welcome at the GitHub repository

Component Templates

Angle Brackets Component Invocation

Angle brackets are a way to invoke components in a template file. There's no change in behavior. (Learn more | Automation)

Classic


          

Octane


          

Inline vs block components

Angle brackets components can be used as either inline or block components. There's no change in behavior. {{yield}} looks and works the same. (Learn more | Automation)

Classic


          

Octane


          

Nesting components in your file structure

You can nest components in your file structure, and use them in a template with Angle Brackets invocation. There's no change in behavior. (Learn more | Automation)

Classic


          

Octane


          

Using named arguments

If a property was received from a parent component, refer to it with an @. There's no change in behavior. (Learn more | Automation)

Classic


          

Octane


          

Using own properties

If a property is defined in the JavaScript file for this component's template, use a "this" when you refer to it. There's no change in behavior. (Learn more | Automation)

Classic


          

Octane


          

Passing named arguments

When you pass an argument to a component, use an `@` symbol on the left hand side. There's no change in behavior. (Learn more | Automation)

Classic


          

Octane


          

Passing arguments defined on "this" component

If a property is coming from a template's own JavaScript file, remember to put a "this." before it and wrap it in curly braces. (Learn more | Automation)

Classic


          

Octane


          

Specifying a default value for an argument

Because arguments are read only, their values cannot be changed so no default value can be set. To have a default-value-like experience, native getters may be used.

Classic

          

        
Octane

          

        

All components are tagless

In Octane, components don't have a default wrapper anymore, so you don't need tagName! Just put the tag right in the template.

Classic


            

          

Octane


            

          

Component Properties

Boilerplate

An Octane component imports from the @glimmer package namespace, and it uses Native Classes. Glimmer components have different API methods. (Learn more | Automation)

Classic


          

Octane


          

Declaring a property

Properties follow normal Native JavaScript Class syntax. Look ma, no commas!

Classic


          

Octane


          

Use @tracked instead of set, get, and computed

Label the properties that should be tracked to compute another property, which is a getter.

Classic


            
          

Octane


          

Computed decorators

Do you love that computed properties have to name their dependent keys? I don't. But you could use the @computed decorator instead of @tracked if you want.

Classic


          

Octane


          

Actions

Use @action, on, and fn instead of action

Use the @action decorator in your JavaScript to indicate functions that you want to be able to use in a template. Use those functions in the template with "on," and if you need to pass an argument to the function, use "fn" too. (Learn more)

Classic


          

Octane


          

Classic


          

Octane


          

Component Lifecycle

Using constructor instead of init.

constructor is a feature of JavaScript Native Classes, not something Ember made up. Use it instead of init. No more this.set! (Learn more | Automation)

Classic


          

Octane


          

Element Modifiers

There are three new element modifiers, {{did-insert}}, {{did-update}}, and {{will-destroy}}, that you may use to replace the classic component lifecycle hooks didInsertElement, willDestroy, and didUpdate.

In order for these modifiers to work, you need to install the @ember/render-modifiers package.


        

Use element modifiers instead of didInsertElement

Instead of writing a didInsertElement method in the JavaScript file, put the {{did-insert}} modifier in your template and say which function to call when that element is rendered. Label that function with the @action decorator. (Learn more)

Classic


            

          

Octane


            

          

Using willDestroy

willDestroy is called when the entire component's element will be destroyed, similar to willDestroyElement. You can use it as a method like below, or via a modifier similar to {{did-insert}} just above. (Learn more)

Classic


          

Octane