Ember.js Octane vs Classic Cheat Sheet

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)

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)

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)

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)

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)

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)

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)

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.

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.

Boilerplate

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

Declaring a property

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

Use @tracked instead of set, get, and computed

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

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.

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)

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)

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)

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)