My Workplace e OPSYS: modernizzare una grandissima postazione di lavoro della Commissione con i micro-frontend
Per la Commissione europea abbiamo modernizzato My Workplace — il portale protetto del personale nell’ecosistema digitale usato per gestire programmi e progetti dell’azione esterna dell’UE — da Angular 2 all’ultima versione di Angular, ristrutturandolo come postazione di lavoro a micro-frontend: applicazioni separate distribuite come pacchetti con versionamento indipendente, e applicazioni di diversi servizi della Commissione integrate in un’unica postazione di lavoro condivisa.
My Workplace e OPSYS sono componenti dell’ecosistema digitale che la Commissione europea usa per gestire i programmi e i progetti dell’azione esterna. OPSYS segue il ciclo del progetto — dagli interventi e dai relativi quadri logici ai contratti, ai risultati e al monitoraggio.
L’ecosistema ha due lati. Il personale della Commissione lavora nell’ambiente interno tramite il portale protetto My Workplace, insieme ad altri strumenti istituzionali. I partner esterni e i contraenti accedono a OPSYS tramite il portale Funding & Tenders dell’UE, il portale elettronico centrale della Commissione per gestire proposte e contratti con l’UE.
My Workplace è molto esteso: numerosi domini di business, schermate e workflow usati ogni giorno dal personale della Commissione. Il suo front-end era nato su Angular 2 ed era diventato una base di codice difficile da aggiornare, testare e condividere tra i team.
La sfida
- Un front-end molto grande nato su Angular 2, indietro di molte versioni principali
- Diversi domini di business e team nella stessa applicazione, con rilasci legati tra loro
- Applicazioni di diversi servizi della Commissione che dovevano funzionare come un’unica postazione coerente per il personale
- Un sistema in produzione e critico per l’operatività, che non poteva essere congelato per una riscrittura “big bang”
- Aspetto, comportamento, sicurezza e accessibilità coerenti in ogni applicazione integrata
Cosa abbiamo costruito
Una shell condivisa e pacchetti applicativi con versionamento indipendente — modernizzati passo dopo passo, senza riscrivere tutto in una volta.
- 1
Shell della postazione di lavoro
Un’applicazione host che fornisce navigazione, layout, contesto utente e servizi condivisi, e compone le applicazioni di business in un’unica postazione di lavoro.
- 2
Pacchetti applicativi con versionamento indipendente
Ogni area di business è sviluppata, testata e rilasciata come pacchetto a sé, con la propria versione e il proprio ciclo di vita, e poi inserita nella shell — i team rilasciano senza aspettarsi a vicenda.
- 3
Integrazione delle applicazioni dei servizi della Commissione
Applicazioni sviluppate da diversi servizi della Commissione integrate nella stessa postazione tramite contratti concordati per routing, contesto e dati: il personale lavora in un solo posto invece che in molti.
- 4
Libreria di componenti riutilizzabili
Componenti e pattern Angular condivisi, allineati al framework UI istituzionale della Commissione (eUI), usati da ogni pacchetto per un’esperienza coerente.
- 5
Migrazione Angular incrementale
Da Angular 2 all’ultima versione di Angular per passi controllati — aggiornamento di tooling e dipendenze, refactoring verso i pattern attuali, poi pacchetto per pacchetto — mentre la postazione restava in produzione.
- 6
API e qualità automatizzata
Servizi REST dietro ogni dominio di business, con pipeline CI/CD, test automatici e quality gate per ogni pacchetto.
Risorse condivise
Costruire una volta, condividere tra applicazioni e servizi della Commissione — e pagare una volta sola.
Shell e servizi condivisi
Navigazione, contesto utente e servizi comuni costruiti e mantenuti una sola volta per tutte le applicazioni integrate.
Un’unica libreria di componenti
Componenti, accessibilità e correzioni dell’interfaccia fatti una volta e adottati da ogni pacchetto al rilascio successivo.
Team che scalano in modo indipendente
Ogni pacchetto ha il proprio team e il proprio ritmo di rilascio, senza un unico treno di rilascio per tutta la postazione.
Costo del cambiamento più basso
Pacchetti più piccoli e versionati costano meno da aggiornare, testare e mettere in sicurezza di un front-end monolitico.
Standardizzazione
- Un unico stack AngularOgni pacchetto sulla stessa versione attuale di Angular e sullo stesso tooling — competenze, componenti e pipeline condivisi.
- Framework UI istituzionaleAllineato a eUI e agli standard UI istituzionali della Commissione, per un’esperienza coerente del personale.
- Nessun big bangModernizzazione rilasciata in modo incrementale su un sistema in produzione, senza blocchi e senza riscrittura parallela.
Tecnologie
Prima
Front-end
Architettura
Delivery
Risultati
- My Workplace portato da Angular 2 all’ultima versione di Angular senza una riscrittura “big bang”
- Una postazione di lavoro a micro-frontend in cui applicazioni separate sono distribuite come pacchetti con versionamento indipendente
- Applicazioni di diversi servizi della Commissione integrate in un’unica postazione di lavoro condivisa per il personale
- Shell e libreria di componenti mantenute una volta e riutilizzate ovunque, riducendo duplicazioni e costi
- In produzione nell’ecosistema della Commissione per la gestione dell’azione esterna dell’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)
← ProgettiParliamo delle vostre sfide.
Architettura, migrazione, AI o crescita di un team — raccontateci cosa state affrontando. Rispondiamo entro un giorno lavorativo.