Subventions de la CE : de Vaadin à la dernière version d’Angular
Nous avons migré une plateforme de gestion des subventions de la Commission européenne — utilisée pour préparer, attribuer et suivre les subventions de l’UE — d’une interface utilisateur Vaadin (Java) côté serveur vers une application moderne sur la dernière version d’Angular, avec une logique métier exposée via des API REST.
Les subventions de l’UE sont des contributions financières directes du budget de l’UE à des projets qui servent les intérêts de l’Union ou mettent en œuvre ses programmes et politiques. Elles sont attribuées par voie d’appels à propositions par les directions générales, offices et agences de la Commission, selon des principes tels que l’égalité de traitement, le non-cumul et le cofinancement.
La plateforme qui soutient ces processus avait été développée avec Vaadin, un framework d’interface Java côté serveur. Elle fonctionnait — mais chaque interaction repassait par le serveur, l’interface était étroitement couplée à la logique métier, et ni les compétences ni les composants ne pouvaient être partagés avec les autres plateformes Angular de la Commission.
L’enjeu
- Une interface utilisateur et une logique métier étroitement couplées au sein des vues Vaadin
- Un aller-retour serveur et un état de session côté serveur pour chaque interaction utilisateur
- Un framework d’interface de niche, avec un vivier de compétences restreint et aucune réutilisation possible sur d’autres plateformes
- Des workflows de subvention complexes — de la préparation des appels à l’attribution et au suivi — qui devaient continuer à fonctionner
- La migration d’un système en service sans perturber les processus de subvention en cours
Notre méthode de migration
D’abord découpler, puis reconstruire l’interface sur la dernière version d’Angular — écran par écran, en préservant la logique métier.
- 1
Découplage de la logique métier
La logique est extraite des vues Vaadin vers des services Java et exposée via des API REST contract-first avec spécifications OpenAPI — réutilisables par n’importe quel client.
- 2
Front-end sur la dernière version d’Angular
Une application monopage sur la dernière version d’Angular : composants standalone, Signals, formulaires réactifs typés et zones fonctionnelles chargées à la demande.
- 3
Composants réutilisables
Des briques partagées pour les formulaires de subvention, les tableaux, les étapes de workflow et la validation — réutilisées d’un écran à l’autre et alignées sur les autres plateformes institutionnelles de la Commission.
- 4
Migration écran par écran
Les domaines fonctionnels sont migrés par vagues, chacun étant vérifié en parité avec la version Vaadin avant la bascule des utilisateurs.
- 5
Sécurité et accès
Un accès par rôle aux données de subvention, appliqué dans la couche API, avec authentification institutionnelle.
- 6
Qualité automatisée
Pipelines CI/CD, tests automatisés et quality gates sur le front-end comme sur le back-end.
Comment nous avons procédé
La même approche éprouvée que pour nos autres migrations : l’architecture d’abord, la réutilisation toujours.
Les contrats d’API d’abord
Les équipes front-end et back-end ont travaillé en parallèle sur la base de contrats OpenAPI convenus.
Réutiliser avant de construire
Les patterns de subvention récurrents sont construits une fois sous forme de composants, puis configurés pour chaque écran.
Validation métier à chaque vague
Les gestionnaires de subventions ont validé chaque domaine migré avant sa mise en service.
Pas de big bang
L’ancienne et la nouvelle interface ont coexisté jusqu’à ce que chaque domaine ait fait ses preuves.
Standardisation
- Une stack front-end uniqueAngular sur l’ensemble des plateformes de la Commission — compétences, composants et outillage partagés.
- Aucune dépendance à l’interfaceUne logique métier derrière des API REST, indépendante de tout framework d’interface utilisateur.
- Maintenable par conceptionUn code typé, des composants réutilisables et des tests automatisés rendent les évolutions futures plus rapides et plus sûres.
Technologies
Avant
Front-end
Back-end
Delivery
Résultats
- Une plateforme de subventions sortie de Vaadin et migrée vers la dernière version d’Angular
- Une logique métier exposée sous forme d’API REST réutilisables et contract-first
- Une interface plus réactive, rendue dans le navigateur plutôt que sur le serveur
- Une stack front-end unique partagée avec les autres plateformes modernes de la Commission — plus facile à staffer et à maintenir
Sources:European Commission — Grants and procurement
← 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é.