Migration AngularJS vers Angular

Si vous aussi vous avez fait le choix d’AngularJS pour un de vos projets, vous êtes au bon endroit ! AngularJS ne sera bientôt plus qu’un lointain souvenir… et pour cause, Google a fait le choix d’arrêter le framework.
Camille.jpg
Camille REGNAULT, L'animatrice du podcast ITMis à jour le 23 Mai 2019
migration-angularjs-vers-angular.jpg

Si vous aussi vous avez fait le choix dAngularJS 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 quun lointain souvenir et pour cause, Google a fait le choix darrêter le framework.

Et comme ce serait dommage dabandonner 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 :

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 dAngularJS vers AngularAngular est un framework de développement JavaScript populaire basé sur TypeScript. 2 ? Tout simplement parce que Google na 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 dautres choix que de migrer vers Angular si nous voulons conserver les projets en toute sécurité 🙂

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

Deuxième grande interrogation : passer de AngularJS à Angular, fondamentalement, quest-ce que ça change ? Est-ce quon y gagne ? Angular, cest 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 dune sécurité bien à jour.

Les principales caractéristiques dAngular par rapport à AngularJS :

  • Angular est plus modulaire : lintroduction de la notion de « composants » a permis de déplacer beaucoup de fonctionnalités de base vers des modules, et davoir un code mieux structuré !
  • Une architecture projet plus claire : généralement, on profite de la migration pour retravailler larchitecture 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 dAngularJS et de nous offrir de nouvelles possibilités !

Et comme Angular bénéficie dune 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 dAngularJS 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 linventaire 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 linventaire 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 à lutilisateur (exemple : transformer une date reçue par le serveur en date lisible par un utilisateur)

Angular permet également denglober les feuilles de styles css pour quelles naffectent que les composants auxquels elles sont rattachées cest très pratique quand on veut modifier un élément sur une page sans avoir deffet de bord sur le reste de lapplication ! Cest donc loccasion de mettre à jour sa charte graphique 🙂

Note : il est toujours possible davoir des feuilles de styles qui impactent toute lapplication.

3 Redéfinir une architecture plus propre :

Une fois les 2 premières étapes accomplies, on peut définir larchitecture du nouveau projet. Angular est mieux structuré quAngularJS et suggère de lui-même, où placer les différentes parties de lapplication. 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 ny a plus quà coder !

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

Quelques astuces pour réussir votre migration :

  • Nhé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 dAngularJS vers Angular, cest pas la mer à boire ! Il peut y avoir quelques couacs par-ci par là, mais globalement, cest loin dêtre insurmontable 🙂

Et quand on voit ce quon y gagne au final, côté sécurité et nouvelles fonctionnalités, on se dit quon 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 !