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