Dans cet article


Offres d'emploi

Tags

Migration AngularJS vers Angular

Migration AngularJS vers Angular

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 :

La migration de AngularJS vers Angular : une obligation ?

Première question que nous sommes en droit de nous poser… pourquoi as-t-on besoin de faire une migration d’AngularJS vers Angular 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 ?

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

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 !

L'équipe AXOPEN

Voir aussi les articles suivants

Angular – Explication en 53secondes

Le 11/10/2016 par Camille Regnault

Explication Angular en #53secondes pour comprendre les concepts clés de la technologie de Google. +d’info sur Expertise sur Angular Angular in a nutshell Angular est un framework Javascript qui permet de réaliser des applications WEB Cross Plateform : Web, mobile et desktop. Il est possible de développer sur Angular soit en Javascript natif, soit en Dart (un langage développé par Google), soit en TypeScript (un langage développé par Microsoft).
Lire l'article

AngularJS – Retours d’expériences

AngularJS – Retours d’expériences

Le 18/01/2016 par Camille Regnault

Qu’est ce qu’AngularJS ? AngularJS est un framework Javascript pour la réalisation d’applications web. AngularJS apporte une gestion de template HTML côté client particulièrement efficace. De plus, AngularJS est compatible avec jQuery, Bootstrap qui sont des technologies fréquemment utilisées dans les applications web. Quels sont les points forts d’AngularJS ? Angular JS s’intégre facilement dans n’importe quel projet. Que le projet soit développé en PHP, Symfony, JAVA, avec JSF ou autres technologies serveurs, il suffit d’inclure un script pour commencer à faire de l’Angular.
Lire l'article

React vs Angular

React vs Angular

Le 08/06/2018 par Camille Regnault

Ces dernières années, une kyrielle de plateformes Javascript dynamiques et volontaires est venue balayer le paradigme de l’ancien temps qui consistait à générer les pages web côté serveur. En lead de cette révolution, les deux acteurs majeurs du marché : React, la bibliothèque de Facebook, et Angular, le framework de Google. Le marché : un combat au coude-à-coude Les deux géants américains trustent la tête du marché, suivis de près par Vue, le petit dernier de la compétition, et loin devant tous les autres.
Lire l'article