Milan · Brussels · Bucharest · Paris
EventiLavora con noiSicurezza e protezione dei dati
MDigitalGROUP
Caso di studio · Commissione europea

EC Grants: da Vaadin all’ultima versione di Angular

Abbiamo migrato una piattaforma di gestione delle sovvenzioni della Commissione europea — utilizzata per preparare, aggiudicare e monitorare le sovvenzioni UE — da un’interfaccia utente Vaadin (Java) lato server a un’applicazione moderna basata sull’ultima versione di Angular, con la logica di business esposta tramite API REST.

Vaadin → Angular 22interfaccia Java lato server sostituita da una moderna single-page application
Server → browserrendering dell’interfaccia spostato sul client, eliminando un round-trip verso il server per ogni interazione
RESTAPI contract-first tra il nuovo front-end e il back-end Java
Contesto

Le sovvenzioni UE sono contributi finanziari diretti a carico del bilancio dell’UE a favore di progetti che promuovono gli interessi dell’Unione o attuano programmi e politiche dell’UE. Sono concesse tramite inviti a presentare proposte da direzioni generali, uffici e agenzie della Commissione, nel rispetto di principi quali la parità di trattamento, il divieto di cumulo e il cofinanziamento.

La piattaforma a supporto di questi processi era stata realizzata con Vaadin, un framework UI Java lato server. Funzionava — ma ogni interazione tornava al server, l’interfaccia era strettamente legata alla logica di business e né le competenze né i componenti potevano essere condivisi con le altre piattaforme Angular della Commissione.

La sfida

  • Interfaccia utente e logica di business strettamente accoppiate all’interno delle view Vaadin
  • Un round-trip verso il server e uno stato di sessione lato server per ogni interazione dell’utente
  • Un framework UI di nicchia, con un bacino di competenze ridotto e nessun riuso sulle altre piattaforme
  • Workflow complessi per le sovvenzioni — dalla preparazione dei bandi all’aggiudicazione e al monitoraggio — che dovevano continuare a funzionare
  • Migrazione di un sistema in produzione senza interrompere i processi di sovvenzione in corso

Come abbiamo migrato

Prima disaccoppiare, poi ricostruire l’interfaccia sull’ultima versione di Angular — schermata per schermata, preservando la logica di business.

  1. 1

    Disaccoppiamento della logica di business

    Logica estratta dalle view Vaadin in servizi Java ed esposta tramite API REST contract-first con specifiche OpenAPI — riutilizzabili da qualsiasi client.

  2. 2

    Front-end sull’ultima versione di Angular

    Una single-page application sull’ultima versione di Angular: standalone component, Signals, reactive form tipizzati e aree funzionali caricate in lazy loading.

  3. 3

    Componenti riutilizzabili

    Building block condivisi per moduli di sovvenzione, tabelle, fasi di workflow e validazione — riutilizzati tra le schermate e allineati alle altre piattaforme istituzionali della Commissione.

  4. 4

    Migrazione schermata per schermata

    Aree funzionali migrate per ondate, ciascuna verificata per parità funzionale rispetto alla versione Vaadin prima di trasferirvi gli utenti.

  5. 5

    Sicurezza e accessi

    Accesso ai dati delle sovvenzioni basato sui ruoli, applicato nel layer API, con autenticazione istituzionale.

  6. 6

    Qualità automatizzata

    Pipeline CI/CD, test automatizzati e quality gate su front-end e back-end.

Come l’abbiamo fatto

Lo stesso approccio collaudato delle nostre altre migrazioni: prima l’architettura, sempre il riuso.

01

Prima i contratti API

I team front-end e back-end hanno lavorato in parallelo su contratti OpenAPI concordati.

02

Riusare prima di costruire

I pattern ricorrenti delle sovvenzioni sono stati realizzati una volta come componenti e configurati per ciascuna schermata.

03

Validazione del business a ogni ondata

I gestori delle sovvenzioni hanno validato ogni area migrata prima della messa in produzione.

04

Nessun big bang

L’interfaccia legacy e quella nuova hanno coesistito finché ciascuna area non è stata verificata.

Standardizzazione

  • Un unico stack front-endAngular su tutte le piattaforme della Commissione — competenze, componenti e strumenti condivisi.
  • Nessun lock-in sull’interfacciaLogica di business dietro API REST, indipendente da qualsiasi framework di interfaccia utente.
  • Manutenibile by designCodice tipizzato, componenti riutilizzabili e test automatizzati rendono le modifiche future più rapide e sicure.

Tecnologia

Prima

VaadinUI Java lato server

Front-end

Angular 22TypeScriptSignalsLibreria di componenti riutilizzabili

Back-end

JavaREST & OpenAPIAccessi basati sui ruoli

Delivery

CI/CDTest automatizzatiQuality gate

Risultati

  • Piattaforma delle sovvenzioni migrata da Vaadin all’ultima versione di Angular
  • Logica di business esposta come API REST riutilizzabili e contract-first
  • Un’interfaccia più reattiva, con rendering nel browser anziché sul server
  • Un unico stack front-end condiviso con le altre piattaforme moderne della Commissione — più facile da presidiare con le giuste competenze e da mantenere

Sources:European Commission — Grants and procurement

← Progetti

Parliamo delle vostre sfide.

Architettura, migrazione, AI o crescita di un team — raccontateci cosa state affrontando. Rispondiamo entro un giorno lavorativo.

Avviate una conversazione