Si vous aussi vous avez fait le choix d’AngularJS pour un de vos projets, vous êtes au bon endroit ! A l’époque vue comme une nouvelle technologie révolutionnaire, AngularJS ne sera bientôt plus qu’un lointain souvenir… et pour cause, Google a fait le choix d’arrêter le framework.

Et comme ce serait dommage d’abandonner tous les projets AngularJS, de notre côté, on privilégie la migration de projets AngularJS vers Angular. Après avoir effectué plusieurs migrations, on vous partage notre retour sur expérience, en espérant que cela vous aidera dans vos projets de migration 🙂

Dans cet article, nous allons voir :

• Pourquoi migrer de AngularJS vers Angular
• De AngularJS à Angular, qu’est-ce que ça change ?
• Pour migrer : la marche à suivre et nos conseils

La migration de AngularJS vers Angular : une obligation ? {#pourquoi-migrer}

Première question que nous sommes en droit de nous poser… pourquoi as-t-on besoin de faire une migration d’AngularJS vers AngularAngular est un framework de développement JavaScript populaire basé sur TypeScript. 2 ? Tout simplement parce que Google n’a pas permis de rétro-compatibilité entre les deux langages. A partir de cette annonce, ce fut le début de la fin pour AngularJS…

AngularJS devient donc une technologie dépréciée, c’est-à-dire qu’elle ne sera plus maintenue par son éditeur. Ce qui signifie notamment l’arrêt progressif du support et des évolutions (les dernières ayant principalement comme objectif de faciliter la migration vers la nouvelle version).

Aussi, on a tout simplement pas d’autres choix que de migrer vers Angular si nous voulons conserver les projets en toute sécurité 🙂

La migration de AngularJS vers Angular : qu’est-ce que ça change ? {#angular-change}

Deuxième grande interrogation : passer de AngularJS à Angular, fondamentalement, qu’est-ce que ça change ? Est-ce qu’on y gagne ? Angular, c’est mieux ?

Pour faire simple, Angular est une refonte pure d’AngularJS, avec une grande évolution au niveau de la philosophie du langage ! Angular nous fait aussi profiter de tout un tas de nouvelles possibilités, et nous permet de bénéficier d’une sécurité bien à jour.

Les principales caractéristiques d’Angular par rapport à AngularJS :

• Angular est plus modulaire : l’introduction de la notion de « composants » a permis de déplacer beaucoup de fonctionnalités de base vers des modules, et d’avoir un code mieux structuré !
• Une architecture projet plus claire : généralement, on profite de la migration pour retravailler l’architecture projet en utilisant les basiques Angular. Cela se traduit par le découpage des différents écrans en plusieurs composants, ce qui permet d’améliorer la maintenance et l’ajout de nouvelles fonctionnalités pour cette application. Cette nouvelle philosophie en modules rend l’ensemble plus clair et plus maintenable !
• Angular fonctionne avec TypeScript (langage développé par Microsoft qui améliore et sécurise le code Javascript). L’avantage de ce langage est qu’il rend le code plus compréhensible, notamment avec l’ajout des types (d’où le nom TypeScript). Une application écrite en TypeScript sera donc plus facile à maintenir qu’une application en Javascript.
• Gestionnaire de paquets NPM : Angular fonctionne avec le gestionnaire de paquets npm, qui permet d’ajouter facilement des nouvelles librairies pour le développement et qui facilite la mise à jour de ces dernières. AngularJS n’ayant pas été conçue pour fonctionner avec npm, l’ajout et la mise à jour des librairies est moins pratique.

Cette nouvelle manière de penser la technologie a permis de repousser les limites d’AngularJS et de nous offrir de nouvelles possibilités !

Et comme Angular bénéficie d’une très forte communauté, le langage est régulièrement mis à jour et propose de plus en plus de fonctionnalités pour le développement : cela rassure dans le choix de technologie 🙂

Migrer d’AngularJS vers Angular : la marche à suivre {#conseils-migration}

Pour migrer une application AngularJS vers Angular, les principales étapes sont :

• Faire la liste des composants et des services utilisés
• Identifier ce qui peut être gardé/amélioré
• Redéfinir une architecture plus propre

1 – Faire la liste des composants et des services utilisés :

Pour éviter de tomber dans le piège de reprendre le projet AngularJS tel quel et le rendre simplement utilisable avec Angular, la première étape essentielle est de faire un état des lieux avec un listing des services et des composants déjà en place.

2 – Identifier ce qui peut être gardé/amélioré :

Une fois l’inventaire effectué, on peut classer les services et composants en trois catégories :

• Les inutilisés
• Les doublons
• Les éléments qui peuvent être améliorés

Angular apportant son lot de nouveautés, certaines fonctionnalités du projet AngularJS peuvent être dépréciées, ou remplacées par des solutions plus propres. La migration permet donc de faire l’inventaire de tout cela afin de simplifier le tout.

Par exemple, Angular propose des fonctions de Drag & Drop intégrées, ou introduit une nouvelle notion appelée « les pipes » qui permettent de formater simplement les informations affichées à l’utilisateur (exemple : transformer une date reçue par le serveur en date lisible par un utilisateur)

Angular permet également d’englober les feuilles de styles css pour qu’elles n’affectent que les composants auxquels elles sont rattachées… c’est très pratique quand on veut modifier un élément sur une page sans avoir d’effet de bord sur le reste de l’application ! C’est donc l’occasion de mettre à jour sa charte graphique 🙂

Note : il est toujours possible d’avoir des feuilles de styles qui impactent toute l’application.

3 – Redéfinir une architecture plus propre :

Une fois les 2 premières étapes accomplies, on peut définir l’architecture du nouveau projet. Angular est mieux structuré qu’AngularJS et suggère de lui-même, où placer les différentes parties de l’application. Les services, les composants, les templates html et les feuilles de styles seront séparés pour une meilleure lisibilité.

Une fois toutes ces étapes passées, il n’y a plus qu’à coder !

Il n’y a pas de très grande difficulté sur ce type de migration si ce n’est d’être vigilant dans la réutilisation des composants/fonctions déjà en place. Et oui, souvent on s’attache à essayer de réutiliser les composants/fonctions déjà en place plutôt que de les réécrire ; et ça peut être source d’une grande perte de temps !

Quelques astuces pour réussir votre migration :

• N’hésitez pas à regarder ce que propose Angular nativement, ça peut faire gagner du temps 🙂
• Il vaut mieux réécrire proprement des fonctions plutôt que de perdre du temps à essayer de réutiliser des composants/fonctions déjà en place

Migration AngularJS vers Angular : pour conclure

Pour conclure, la migration d’AngularJS vers Angular, c’est pas la mer à boire ! Il peut y avoir quelques couacs par-ci par là, mais globalement, c’est loin d’être insurmontable 🙂

Et quand on voit ce qu’on y gagne au final, côté sécurité et nouvelles fonctionnalités, on se dit qu’on est quand même beaucoup mieux avec Angular 🙂

On vous souhaite bonne chance dans vos migrations de projet ! Et si vous avez un soucis ou ne savez pas comment faire votre migration de projet AngularJS vers Angular, contactez-nous !