Transition fluide de Durandal vers Aurelia

Durandal a évolué pour devenir la nouvelle génération de frameworks : Aurelia. Projet disponible à l'adresse suivante : https://gitcode.com/gh_mirrors/du/Durandal

Durandal était autrefois un cadre puissant pour développer des applications monopage (SPA) multiplateformes. Cependant, son développement s'est arrêté, et la communauté recommande désormais de migrer vers Aurelia, qui offre une architecture moderne, plus performante et mieux adaptée aux besoins actuels du développement frontend.

Pourquoi choisir Aurelia ?

Bien que Durandal ait marqué une ère dans le développement SPA, ses limites techniques sont devenues évidentes avec l’évolution des standards. Aurelia reprend les principes fondamentaux de Durandal tout en introduisant une architecture modulaire, une injection de dépendances robuste, une gestion de routing native et une meilleure intégration avec les outils modernse.

Prépartaifs avant migration

Avant toute modification, assurez-vous d’avoir :

• Compris les concepts clés d’Aurelia : composants, bindings, injection de dépendances.
• Sauvegardé votre projet Durandal complet.
• Mis à jour votre environnement : Node.js ≥14, npm ou yarn installés.

Étapes principales de la migration

1. Réorganisation structurelle du projet Aurelia préfère une séparation nette entre le framework et le code applicatif. Procédez comme suit :

• Créez un dossier framework contenant durandal, plugins, transitions.
• Déplacez require.js, text.js, almond-custom.js vers lib/third-party.
• Supprimez l’ancien dossier App/durandal.
• Mettez à jour index.html pour pointer vers les nouveaux chemins.
• Configurez main.js avec les chemins corrects :

requirejs.config({
    paths: {
        'text': '../lib/third-party/text',
        'durandal': '../framework/durandal',
        'plugins': '../framework/durandal/plugins',
        'transitions': '../framework/durandal/transitions'
    }
});

2. Gestion des dépendances externes Contrairement à Durandal 1.x, Aurelia ne suppose pas jQuery ou Knockout globaux. Deux options s’offrent à vous :

Option A : Configuration via shim et chemins

requirejs.config({
    paths: {
        'jquery': '../lib/third-party/jquery-1.9.1',
        'knockout': '../lib/third-party/knockout-2.3.0',
        'bootstrap': '../lib/third-party/bootstrap'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jQuery'
        }
    }
});

Option B : Définition manuelle des modules

define('jquery', function () { return jQuery; });
define('knockout', function () { return ko; });

3. Mise à jour des noms de modules Plusieurs modules ont été renommés ou déplacés dans Aurelia :

Effectuez une recherche globale et remplacez tous les imports concernés.

4. Mise à jour des callbacks de composition Les méthodes cycliques ont changé de nom :

Mettez à jour vos classes de modèle de vue selon ces nouvelles signatures.

5. Migration du système de routage Le routage n’utilise plus SammyJS. Remplacez les configurations par :

define(['plugins/router'], function (router) {
    return {
        router: router,
        activate: function () {
            return router.map([
                { route: '', moduleId: 'hello/index', title: 'Bonjour le monde', nav: true },
                { route: 'composition', moduleId: 'viewComposition/index', title: 'Composition de vues', nav: true }
            ])
            .buildNavigationModel()
            .mapUnknownRoutes('hello/index', 'not-found')
            .activate();
        }
    };
});

6. Adaptation des dialogues et composants

• Remplacez app.showModal() par app.showDialog().
• Utilisez dialog.close(self, result) au lieu de self.modal.close(result).
• Renomemz controller.js → viewmodel.js.
• Passez les paramètres via activate() plutôt que dans le constructeur.

Tests et optimisation après migration

Après la migration :

• Testez toutes les fonctionnalités critiques.
• Évaluez les performances : temps de chargement, latence UI.
• Vérifiez la compatibilité sur différents navigateurs et appareils.
• Appliquez les bonnes pratiques d’Aurelia : utilisation de @inject, @computedFrom, etc.

Conclusion

La migration vers Aurelia est une étape stratégique pour moderniser votre application, améliorer sa performance, sa maintenabilité et son évolutivité. Bien que nécessitant un effort initial, elle se révèle rentable à long terme grâce à une architecture plus solide et à un support communautaire actif.

Pour toute difficulté, consultez la documentation officielle d’Aurelia ou les ressources du forum communautaire.