CAS D’ETUDE
Développement Front-End : Refonte et Optimisation de Multiples Applications avec Angular
OBJECTIFS
Leader français de la communication publicitaire dans les transports publics, notre client travaille en partenariat avec les plus grands groupes de transports en commun, ainsi qu'avec les autorités locales. L'objectif de notre mission est triple : 1. améliorer la gestion des applications pour notre client, 2. optimiser les performances de l’existant pour ses utilisateurs, 3. opérer la refonte complète du socle de plusieurs applications pour toutes les parties prenantes.
MISSION
ESENS réalise une mission de développement front-end sur la stack Angular afin d'optimiser les performances de plusieurs applications existantes, tout en travaillant à la refonte de leur socle.
-
Analyse de l'Existant
Au démarrage du projet, force est de constater la lenteur des phases de builds et celle du chargement des pages. L'analyse de ces problèmes de latence révèle plusieurs causes : les versions des projets Angular ne sont pas à jour, un grand nombre de dépendances est devenu inutile et les librairies communes aux applications s'avèrent trop lourdes pour être maintenues. Il faut donc optimiser l’existant tout en opérant la refonte du socle de multiples applications et de leurs composants afin de réduire au maximum les temps de chargement.
-
Montées de version, Bonnes Pratiques et Création d’un Monorepo
Dans un premier temps, la mise à jour d'Angular est effectuée sur sept des applications existantes afin d’améliorer les temps de build. Dans un second temps, la mise en place de règles de bonnes pratiques nous évite les erreurs et permet un code commun entre chaque développement. Dans le même temps, un grand nombre de dépendances inutiles sont supprimées. La librairie commune actuelle étant trop lourde, il s'agit pour noue également de la repenser entièrement, tout en réfléchissant à un système permettant de regrouper les composants communs aux applications dans un seul projet Git. Afin d’appeler uniquement les composants nécessaires à chaque application, nous décidons d’établir un projet Monorepo avec Nx.dev. Le but est de créer plusieurs micro projets pour chaque web component, ainsi que des librairies, pour pouvoir les appeler indépendamment dans n’importe quelle autre application.
-
Refonte des applications
Dans le cadre de la refonte du socle des applications sur Angular, notre client fait appel à plusieurs UX designers en charge de revoir complètement les systèmes de navigation, les parcours utilisateurs, et d'établir une nouvelle charte graphique. Une fois la maquette validée, la phase de développement des composants peut démarrer. Il faut alors créer un nouveau projet pour le web component designé et y ajouter les styles et les méthodes relatives à celui-ci. Les données communes à d’autres web components seront, quant à elles, stockées dans la librairie du projet NX. Lorsqu'un composant est terminé côté développement, il faut ensuite l’intégrer dans le showroom de l’application NX afin de vérifier son bon fonctionnement. Nous pouvons ensuite l’intégrer à nos différentes applications en utilisant, au besoin, les content projection d’Angular pour transvaser le contenu de nos applications vers notre web component.
-
Tests et déploiements
Une fois les développements terminés, nous pouvons lancer une merge request. La pipeline de notre CI va alors lancer des jobs de test et de package qui, une fois validés, nous permettrons de déployer notre web component dans le serveur de développement. Les développeurs testent ensuite ces développements sur les applications et relisent le code avant de le merger dans la branche principale du projet. Deux nouveaux jobs sont également lancés et le déploiement se fait à nouveau dans le serveur de développement. La MOA peut ensuite tester le code développé. Une fois la phase de test passée, un nouveau tag est créé depuis la branche de production, une nouvelle pipeline est lancée et le déploiement peut alors se faire sur le serveur de production.
STRATEGIE
Dans le cadre de cette mission de développement front-end, les enjeux sont multiples car nous devons à la fois améliorer les performances des applications existantes, en refondre des composants, les partager sur un serveur et les incorporer aux différentes applications. Notre analyse de l’existant nous révèle rapidement la façon de prioriser nos tâches, à commencer par la mise à jour des versions, la suppression des composants inutiles et la mise en place de bonnes pratiques. Une fois ces étapes franchies avec succès, nous avons désormais le champs libre pour de nouveaux développements visant toujours à améliorer la performance et la gestion des applications de notre client.
