Migration d'un front-end Angular et remise à niveau des performances

Contexte

Application de gestion commerciale utilisée par six cents utilisateurs internes, développée sur une version d'Angular vieille de cinq versions majeures. Les temps de chargement dépassaient huit secondes sur les écrans de recherche, et la suite de tests de bout en bout échouait de manière aléatoire.

Problematique

Les mises à jour de sécurité du framework ne pouvaient plus être appliquées, l'équipe front-end évitait de toucher aux écrans de recherche les plus complexes, et chaque livraison s'accompagnait d'une campagne de recette manuelle sur soixante parcours.

Objectifs

• Migrer l'application sur une version supportée d'Angular
• Ramener les écrans de recherche sous deux secondes de chargement perçu
• Rendre la suite de tests de bout en bout fiable et exploitable

Role tenu

Développeur front-end principal et référent technique, avec deux développeurs internes en binôme pour assurer la reprise après la mission.

Solution retenue

La migration a été préparée par un inventaire des écrans et de leurs dépendances, puis découpée en onze lots livrables. Chaque lot partait en production après vérification des parcours associés, ce qui a évité une branche de migration maintenue pendant des mois. Les écrans de recherche ont été retravaillés en profondeur : pagination côté serveur, mise en cache des référentiels, suppression des abonnements non libérés et remplacement progressif de l'état dupliqué par des signaux. Le temps de chargement perçu est passé de plus de huit secondes à moins de deux secondes sur les écrans les plus lourds. La suite de tests de bout en bout a été reconstruite sur soixante parcours critiques, avec des sélecteurs explicites et des jeux de données isolés. Elle est désormais exécutée à chaque livraison et son taux d'échec aléatoire est tombé à un niveau exploitable.

Architecture

Application Angular en composants autonomes, organisée par domaine fonctionnel avec un service de données par domaine. L'état global reste limité aux filtres partagés et à la session utilisateur ; le reste repose sur des signaux locaux aux composants. Le client d'API est généré depuis la spécification OpenAPI du back-end Spring Boot, ce qui supprime les divergences de contrat. Les tests de bout en bout s'exécutent dans des conteneurs, avec un back-end simulé pour les cas d'erreur et un environnement complet pour les parcours de recette.

Resultats (exemples)

• Application migrée sur une version supportée d'Angular
• Écrans de recherche ramenés sous deux secondes de chargement perçu
• Suite de tests de bout en bout fiable et exécutée à chaque livraison
• Deux développeurs internes autonomes sur les conventions mises en place

Indicateurs (exemples)

• Chargement perçu des écrans de recherche

  8,4 s à 1,8 s

  Mesures simulées sur environnement de démonstration — exemple de démonstration

• Lots de migration livrés en continu

  11

  Découpage illustratif — exemple de démonstration

• Parcours couverts en tests de bout en bout

  60

  Volume indicatif — exemple de démonstration

Technologies

• TypeScript
• Spring Boot
• Angular
• RxJS
• NgRx
• Docker
• Playwright

Services mobilises

• Développement back-end Java et Spring Boot

  Je conçois et développe des services métier robustes avec Java et Spring Boot, testés et observables dès le premier jour. Le code livré est lisible, documenté et repris sans difficulté par votre équipe.

• Développement front-end Angular

  Je développe des interfaces Angular rapides, accessibles et testées, avec une base de code lisible. Vous obtenez des parcours utilisateurs mesurés, pas seulement des écrans qui s'affichent.

• Observabilité et performance applicative

  Je rends vos applications diagnostiquables : traces corrélées, métriques utiles et alertes qui signalent un problème réel. Vous passez de l'interprétation des symptômes à l'identification de la cause.

• Formation et coaching d'équipes techniques

  Je forme vos équipes sur vos propres projets, avec des exercices issus de votre code. Les formations se terminent par une production utilisable, pas par un questionnaire de satisfaction.