PH

Pierre Houllière

CV Veille Rectorat Réalisations
Retour

Interface de monitoring des assets du design system

Le design system génère des fichiers bundles (fichiers JS et CSS compressés) utilisés par les développeurs des différents pôles. Chaque ajout alourdit ces fichiers, ce qui peut dégrader le temps de chargement pour les sociétaires. Ma mission était de créer une interface pour suivre l’évolution de la taille de ces fichiers.

J’ai d’abord modifié la pipeline Azure DevOps du projet pour qu’un script génère un fichier JSON contenant les statistiques de build (taille réelle et taille compressée).

Partie de la pipeline qui met le fichier JSON en artifact de build. Cela permet de recenser et d’identifier les ressources numériques générées.

L’interface React que j’ai développée communique avec l’API REST d’Azure DevOps pour récupérer ces artifacts dynamiquement. L’API a nécessité la mise en place d’une authentification par token via une classe.

Page d’accueil d’analyse d’un bundle.

Page récapitulative des évolutions des bundles. Ce tableau de bord permet d’évaluer l’indicateur de suivi du projet (le poids) et d’analyser instantanément les écarts positifs ou négatifs par rapport à une période de référence.

Pour la mise en production, l’application a été intégrée directement dans le processus de compilation Vite du design system.

Configuration nginx de déploiement. J’ai configuré un reverse proxy sur le serveur web pour rendre le service accessible aux utilisateurs sur une URL propre.