Comment migrer une application Angular.Js vers Angular ?

Spread the love

Affluences propose deux applications web :

un portail d’administration à destination des établissements partenaires

et un site de réservation proposé aux visiteurs afin qu’ils puissent réserver en deux clics une salle de travail ou un atelier.

Ces deux applications ont commencés à être développées à partir de 2015. Nous avions fait le choix d’utiliser Node.Js pour le backend et l’API. Côté frontend, nous avions décidé d’utiliser Angular.Js. Ces deux outils nous semblaient être les plus adaptés à nos besoins mais également en adéquation avec nos affinités technologique.

Mais nos besoins ont évolué au fur et à mesure que nos utilisateurs se faisaient de plus en plus nombreux. Nous avions besoin d’outils plus robustes nous permettant de proposer toujours plus de nouvelles fonctionnalités tout en garantissant la stabilité et la montée en charge de nos applications.

Côté backend et API, nous avons traduit notre base de code Javascript en Typescript pour profiter des améliorations apportées par ce langage (compilation, typage fort, …). Ce changement étant invisible d’un point de vue utilisateur, nous avons pu l’opérer petit à petit en parallèle de la mise en production de nouvelles fonctionnalités. Côté frontend, nous avions décidé de passer sur Angular, l’évolution majeure d’AngularJs. Contrairement aux apparences, la migration vers Angular depuis Angular.Js n’est pas naturelle et implique plusieurs changements structurels comme le passage à des composants web qui a nécessité l’implémentation d’outils supplémentaires comme NgRx par exemple. C’est pourquoi nous avons élaboré un plan de migration pour chacune de nos applications.

Nous avons d’abord commencé par le site de réservation. Celui-ci représentant peu de pages par rapport au portail d’administration, nous avons décidé de réécrire complètement la base de code. Hormis le fonctionnement général de l’application, l’un des points sur lequel nous avons porté notre attention concernait la compatibilité des URL entre les deux versions. Angular proposant son propre routeur, nous avons dû assurer la redirection des anciens formats d’URL vers le nouveau. Cette problématique représentait un réel besoin puisque le service se base sur la vérification de l’adresse mail de l’utilisateur à travers un lien qui lui est envoyé lorsqu’il effectue sa réservation.

Le passage vers Angular a également été l’occasion de réactualiser le design général.

Forts de ce retour d’expérience, nous avons élaboré un plan différent pour le portail d’administration. Celui-ci représentant une complexité plus importante de par son nombre de pages et par le nombre d’interactions possibles, nous avons décidé de faire cohabiter Angular.Js et Angular en traduisant petit à petit les différents modules de l’ancien framework vers le nouveau. Nous avons dans un premier temps re-développé les modules communs (header, footer, éléments de navigation, …) afin que la passage d’une version à l’autre soit le plus transparent possible pour l’utilisateur. En s’appuyant sur ces composants, nous traduisons maintenant chaque module dès qu’une nouvelle fonctionnalité doit y être ajoutée.

Chacune de ces méthodes propose donc certains avantages: la traduction complète assure une migration définitive mais peut s’avérer complexe dans le cadre de projets avec beaucoup de pages. La cohabitation des deux frameworks peut quant à elle être utile pour assurer une migration progressive de gros projets mais ne doit pas perdurer dans le temps sous peine de devoir maintenir deux fois plus de code.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *