My Workplace et OPSYS : moderniser un très grand espace de travail de la Commission avec des micro-frontends
Pour la Commission européenne, nous avons modernisé My Workplace — le portail sécurisé du personnel dans l’écosystème numérique utilisé pour gérer les programmes et projets de l’action extérieure de l’UE — d’Angular 2 vers la dernière version d’Angular, et l’avons restructuré en espace de travail à micro-frontends : des applications distinctes livrées sous forme de packages versionnés indépendamment, et des applications de différents services de la Commission intégrées dans un seul espace de travail partagé.
My Workplace et OPSYS sont des composants de l’écosystème numérique que la Commission européenne utilise pour gérer les programmes et projets de l’action extérieure. OPSYS suit le cycle du projet — des interventions et de leurs cadres logiques aux contrats, aux résultats et au suivi.
L’écosystème a deux volets. Le personnel de la Commission travaille dans l’environnement interne via le portail sécurisé My Workplace, aux côtés d’autres outils institutionnels. Les partenaires externes et les contractants accèdent à OPSYS via le portail Funding & Tenders de l’UE, le portail électronique central de la Commission pour gérer propositions et contrats avec l’UE.
My Workplace est très vaste : de nombreux domaines métier, écrans et workflows utilisés chaque jour par le personnel de la Commission. Son front-end avait été démarré sous Angular 2 et était devenu une base de code difficile à mettre à jour, à tester et à partager entre équipes.
Le défi
- Un très grand front-end démarré sous Angular 2, en retard de nombreuses versions majeures
- Plusieurs domaines métier et équipes dans la même application, avec des mises en production liées entre elles
- Des applications appartenant à différents services de la Commission qui devaient former un espace de travail cohérent pour le personnel
- Un système en production et critique pour l’activité, impossible à geler pour une réécriture « big bang »
- Une apparence, un comportement, une sécurité et une accessibilité cohérents dans chaque application intégrée
Ce que nous avons construit
Un shell d’espace de travail partagé et des packages applicatifs versionnés indépendamment — modernisés étape par étape, sans tout réécrire d’un coup.
- 1
Shell de l’espace de travail
Une application hôte qui fournit la navigation, la mise en page, le contexte utilisateur et les services partagés, et compose les applications métier en un seul espace de travail.
- 2
Packages applicatifs versionnés indépendamment
Chaque domaine métier est construit, testé et livré comme son propre package, avec sa version et son cycle de vie, puis branché dans le shell — les équipes livrent sans s’attendre les unes les autres.
- 3
Intégration des applications des services de la Commission
Des applications développées par différents services de la Commission intégrées dans le même espace de travail grâce à des contrats convenus pour le routage, le contexte et les données : le personnel travaille en un seul endroit au lieu de plusieurs.
- 4
Bibliothèque de composants réutilisables
Des composants et patterns Angular partagés, alignés sur le framework UI institutionnel de la Commission (eUI), utilisés par chaque package pour une expérience cohérente.
- 5
Migration Angular incrémentale
D’Angular 2 à la dernière version d’Angular par étapes maîtrisées — mise à niveau de l’outillage et des dépendances, refactoring vers les patterns actuels, puis package par package — pendant que l’espace de travail restait en production.
- 6
API et qualité automatisée
Des services REST derrière chaque domaine métier, avec pipelines CI/CD, tests automatisés et quality gates pour chaque package.
Ressources mutualisées
Construire une fois, partager entre applications et services de la Commission — et ne payer qu’une fois.
Shell et services partagés
Navigation, contexte utilisateur et services communs construits et maintenus une seule fois pour toutes les applications intégrées.
Une seule bibliothèque de composants
Composants, accessibilité et correctifs d’interface réalisés une fois et repris par chaque package à sa prochaine version.
Des équipes qui évoluent indépendamment
Chaque package est staffé et livré à son propre rythme, sans un train de release unique pour tout l’espace de travail.
Un coût du changement réduit
Des packages plus petits et versionnés coûtent moins cher à mettre à jour, tester et sécuriser qu’un front-end monolithique.
Standardisation
- Une seule stack AngularChaque package sur la même version actuelle d’Angular et le même outillage — compétences, composants et pipelines partagés.
- Framework UI institutionnelAligné sur eUI et les standards UI institutionnels de la Commission, pour une expérience cohérente du personnel.
- Pas de big bangModernisation livrée de manière incrémentale sur un système en production, sans gel et sans réécriture parallèle.
Technologies
Avant
Front-end
Architecture
Delivery
Résultats
- My Workplace porté d’Angular 2 à la dernière version d’Angular sans réécriture « big bang »
- Un espace de travail à micro-frontends où des applications distinctes sont livrées sous forme de packages versionnés indépendamment
- Des applications de différents services de la Commission intégrées dans un seul espace de travail partagé pour le personnel
- Shell et bibliothèque de composants maintenus une fois et réutilisés partout, ce qui réduit les efforts en double et les coûts
- En production au sein de l’écosystème de la Commission pour la gestion de l’action extérieure de l’UE
Sources:European Commission (capacity4dev) — OPSYS online documentation · European Commission (capacity4dev) — OPSYS / Funding & Tenders Portal community · European Commission (capacity4dev) — “Let’s start with My Workplace” · European Commission — Managing an intervention (Funding & Tenders Portal, OPSYS)
← ProjetsParlons de vos enjeux.
Architecture, migration, IA ou montée en charge d’une équipe — présentez-nous votre situation. Nous vous répondons sous un jour ouvré.