How do I upgrade my Durandal.js app to Aurelia?

Question

I have an existing Durandal.js app that takes advantage of all of the ES5 features but I want to upgrade it to the new Aurelia platform. What is the proper upgrade path and what is the simplest way to upgrade up front with as least pain as possible? Is there a doc with the upgrade path?

Answer 1

(Please feel free to make this a community answer by contributing)

Module Loading

1. Aurelia supports using AMD modules and require.js as a module loader. If you are using require.js with Durandal and want to convert your modules over to Aurelia they should be almost identical, depending on any future changes to require.js.

2. The lifecycle callbacks remain the same meaning that activate, attached, detached, deactivate, canActivate, canDeactivate, and any others should stay the same. They also still accept returning a promise.

3. If you choose not to stick with require.js, you can convert the AMD modules over from the AMD format to ES6+ format. This requires removing the first line or two and last line in the AMD module and replacing it with a class export similar to this -

   define([], function (){
       // stuff
   ]);
   

   becomes

   import {inject} from 'aurelia-framework';
   @inject()
   export class TheClassName{
       // stuff
   }
   

Where the inject piece is aurelia's DI system.

Data-binding

1. Aurelia provides the developer the ability to use whichever data-binding libraries you wish, including but not limited to the default aurelia-binding, handlebars, knockout, etc...

2. Some of these libraries may still need plugins to properly update when value changes occur, but this is a work-in-progress to find which do. If you are using Durandal 2.1 and knockout it is advised to leave the data-binding in place as-is and take a step-by-step approach to upgrading, one view model at a time. This is a work in progress and will be explained better moving forward

3. Aurelia data-binding tries to make use of the newest technology available but will gracefully fallback to dirty-checking. This enables the developer to build for the future but support the present.

Answer 2

The following article explains a possible upgrade path "Upgrading to Aurelia from Durandal.js":

https://github.com/aurelia/framework/blob/master/doc/article/drafts/durandal-to-aurelia.md

And the durandal extension "Durelia" helps with the migration:

https://github.com/josundt/Durelia