A presentation at Ember Chicago August Meetup in in Chicago, IL, USA by Melanie Sumner
Hands-on with Ember Octane A practical look at the latest from Ember.js
Timeline August 5th No new features LTS Candidate 3.13 Beta September 16th 3.12 becomes LTS 3.14 Beta First release of Ember that defaults to Octane Ember Inspector First release that contains all of Octane’s features 3.12 3.13 3.14
Classic vs. Octane
Application Template Wrapper Classic Mode Octane Mode $ ember feature:disable application-template-wrapper
jQuery Classic Mode Octane Mode • jQuery is included by default. • Ember components have a this.$ method. • jQuery is not included by default $ ember feature:disable jquery-integration
Template-only Components Classic Mode Octane Mode • Template-only components get an implicit component class. • Template-only components have no (implicit or otherwise) component class. $ ember feature:enable template-only-glimmer-component
Observers Classic Mode Octane Mode • Observers fire synchronously by default • Observer fire asynchronously by default $ ember feature:enable default-async-observers
Idiom Changes
Ember vs. Standard Class Syntax Classic Mode Idiom Octane Mode Idiom • subclass from framework classes • subclass from framework classes using JavaScript class syntax Route.extend({ … }) Controller.extend({ … }) class extends Route {…} class extends Controller {…} Migration Guide: https://tinyurl.com/octane-migration
Computed vs. @tracked Classic Mode Idiom Octane Mode Idiom • State that could influence the output (“mutable state”) is marked using .set or Ember.set and use computed from @ember/object to describe derived state. Computed properties enumerate their dependent keys explicitly. • State that could influence the output is marked as @tracked. No other annotations are needed. Migration Guide: https://tinyurl.com/octane-migration
Components Classic Mode Idiom Octane Mode Idiom • Components subclass from @ember/component. They use APIs like classNameBinding to configure the root element, and use lifecycle hooks on the component class to interact with the DOM. • Components subclass from @glimmer/component. They describe all elements, including the root element, in the template. They use modifiers to interact with the DOM. Migration Guide: https://tinyurl.com/octane-migration
{{action}} vs. {{on}} Classic Mode Idiom Octane Mode Idiom • To handle events on a component’s root element, create a method on the component that corresponds to the event. To handle events on another element, use the {{action}} helper and put the action in the actions hash in your component. • To handle events on an element, use the {{on}} helper. Migration Guide: https://tinyurl.com/octane-migration
Curly Braces vs. Angle Brackets Classic Mode Idiom Octane Mode Idiom • Components are invoked using {{component-name}} and {{#component-name}} syntax. • You invoke components using <ComponentName> syntax. Migration Guide: https://tinyurl.com/octane-migration
Implicit vs. required this Classic Mode Idiom Octane Mode Idiom • You can refer to properties on the component as {{propertyName}} • References to properties on a component must be {{this.propertyName}} Migration Guide: https://tinyurl.com/octane-migration
File Layout Classic Mode Idiom Octane Mode Idiom • A component’s files are in two places: • A component’s files are in the same place: app/components/componentname.js app/components/componentname.js app/templates/components/co mponent-name.hbs app/components/componentname.hbs Migration Guide: https://tinyurl.com/octane-migration
Migration A reasonable approach
Recommended Migration Order 1. Migrate away from observers before migrating to @tracked
Recommended Migration Order 2. The template codemods are generally easier and more automatable, so they should be done first: • ember-angle-brackets-codemod • ember-no-implicit-this-codemod
Recommended Migration Order 3. Classic Component Changes Step 3.1: remove use of implicit this
Recommended Migration Order 3. Classic Component Changes Step 3.2: migrate to tagName:’’
Recommended Migration Order Step 3.2: migrate to tagName:’’ 1. 2. 3. 4. 5. wrap your component in a root element Change classNames to class=”…” Change classNameBindings to class={{…}} Change attributeBindings becomes attr={{…}} Change methods like click to {{on “click”}} 6. move DOM manipulation logic to modifiers (or at least emberrender-modifiers)
Recommended Migration Order 3. Classic Component Changes Step 3.3: migrate {{action}} and the actions hash to {{on}} in the template and @action in the component.js file
Recommended Migration Order 3. Classic Component Changes Step 3.4: migrate to native class syntax
Recommended Migration Order 3. Classic Component Changes Step 5: migrate .set and computed properties to @tracked
Codemods Native class codemod Angle bracket codemod No implicit this codemod https://github.com/ember-codemods
Reference Materials • https://ember-learn.github.io/ember-octanevs-classic-cheat-sheet/ • https://codingitwrong.com/2019/07/23/em ber-component-cheat-sheet.html
Extra Support • ember-template-lint • Updates for Octane support • New a11y rules • #topic-octane-migration
Thank you!
We’ll look at the Octane preview documentation, try out some of the new syntax, and discuss some of the practical aspects of how to update your code to give you the latest and greatest from Ember.
This presentation’s content is the result of work by the entire Ember.js core framework team (emberjs.com/team).
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
