Upgrading a modern Ember.js app to Octane

12 April 2019

The Ember.js community has been lately buzzing about the first edition, Octane, and for good reason. In my view, it's going to change the programming model and will make the developer experience of building Ember apps even better.

Sac Sac Mate is my chess project that I'm developing with the latest and greatest tools of what's available in Ember. It thus seemed a natural choice to try the Octane upgrade process on. The project had already used a few of the goodies that Octane includes (most notably, decorators).

I recorded a screencast about the process that you can watch below.

Here are my notes for the screencast that might also give you a frame while you're watching it:

• To upgrade an app to Octane, use ember init -b @ember/octane-app-blueprint. ember new -b @ember/octane-app-blueprint creates a new app skeleton with the Octane blueprint.
• Remove ember-decorators from your project if it's a dependency. Ember Octane supports decorators out-of-the-box and that add-on would be conflicting.
• To import what you use as decorators, you should keep using the same import path. So for example, import { or } from '@ember/object/computed' will keep working. With decorators you use it as @or('x', 'y') myProp whereas without decorators you'd write myProp: or('x', 'y')
• Tracked properties are the bee's knees and can replace computed properties. A good way to think about them is that you flip computed properties around. With CPs, you specify which properties each of your CPs depends on. With tracked properties, you mark the properties in your class that should cause a re-render or re-calculation.
• If you hit weird errors, try upgrading to the latest Octane version. As "stable Octane" hasn't been released yet, they keep fixing errors so there's a chance what you bumped into had been fixed. Trust me, I lost several hours over this.
• You need to explicitly call the decorator functions to define Ember Data attributes. So it's @attr() firstName and not @attr firstName. This will change in the future so that @attr (without the parentheses) will also work.

I hope you'll find this useful when upgrading your app to Octane. If you do, let me know in the comments how it went.