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?

Emergent

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.

Emergent

Hi, I see your recommendation about using your modules from durandal, supposing that you are using AMD loading, but I was not able to wire it properly with Aurelia. – Jardine

@R.DarioDuarte There are plenty of community samples showing how to use AMD loading, in a nutshell it is up to the developer to decide how to load but AMD is supported. For instance if you are using require.js it should be fairly straight-forward how to use AMD loading. – Emergent

some specific AMD examples that use Aurelia can be found here: github.com/cmichaelgraham/aurelia-typescript – Potentate

The lifecycle callbacks actually were updated to "activate, deactivate, canActivate, canDeactivate" as in Aurelia's DOCs :) – Harbaugh

Attached and detached are still available on all elements. – Emergent

Thanks for this, just caught up with you on the gitter about this! Will be keeping an eye on it! Thanks again! – Wommera

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

Evaluate