My Workplace & OPSYS: modernising a very large Commission workplace with micro-frontends
For the European Commission, we modernised My Workplace — the secured staff portal of the digital ecosystem used to manage EU external action programmes and projects — from Angular 2 to the latest Angular, and restructured it as a micro-frontend workplace: separate applications delivered as independently versioned packages, and applications from different Commission services integrated into one shared workplace.
My Workplace and OPSYS are components of the digital ecosystem the European Commission uses to manage external action programmes and projects. OPSYS follows the project cycle — from interventions and their logical frameworks to contracts, results and monitoring.
The ecosystem has two sides. Commission staff work in the internal environment through the secured My Workplace portal, alongside other corporate tools. External partners and contractors access OPSYS through the EU Funding & Tenders Portal, the Commission’s central electronic portal for managing proposals and contracts with the EU.
My Workplace is very large: many business domains, screens and workflows in daily use by Commission staff. Its front-end had been started on Angular 2 and had grown into a codebase that was hard to upgrade, test and share between teams.
The challenge
- A very large front-end started on Angular 2, many major versions behind the current release
- Several business domains and teams working in the same application, with their releases tied together
- Applications owned by different Commission services that had to work as one coherent workplace for staff
- A live, business-critical system that could not be frozen for a big-bang rewrite
- Consistent look, behaviour, security and accessibility across every integrated application
What we built
A shared workplace shell with independently versioned application packages — modernised step by step, not rewritten in one go.
- 1
Workplace shell
A host application that provides navigation, layout, user context and shared services, and composes the business applications into one workplace.
- 2
Independently versioned application packages
Each business area is built, tested and released as its own package, with its own version and life-cycle, then plugged into the shell — so teams deliver without waiting for each other.
- 3
Integration of Commission services’ applications
Applications built by different Commission services integrated into the same workplace through agreed contracts for routing, context and data, so staff work in one place instead of many.
- 4
Reusable component library
Shared Angular components and patterns, aligned with the Commission’s corporate UI framework (eUI), used by every package for a consistent experience.
- 5
Incremental Angular migration
From Angular 2 to the latest Angular in controlled steps — tooling and dependency upgrades, refactoring to current patterns, then package by package — while the workplace stayed in production.
- 6
APIs & automated quality
REST services behind each business domain, with CI/CD pipelines, automated tests and quality gates for every package.
Pooled resources
Build once, share across applications and Commission services — and pay for it once.
Shared shell, shared services
Navigation, user context and common services built and maintained once for every integrated application.
One component library
Components, accessibility and UI fixes made once and picked up by every package on its next release.
Teams that scale independently
Each package is staffed and released on its own rhythm, without one release train for the whole workplace.
Lower cost of change
Smaller, versioned packages are cheaper to upgrade, test and secure than one monolithic front-end.
Standardisation
- One Angular stackEvery package on the same current Angular version and tooling — shared skills, shared components, shared pipelines.
- Corporate UI frameworkAligned with eUI and the Commission’s corporate UI standards, for a consistent staff experience.
- No big bangModernisation delivered incrementally on a live system, without a freeze and without a parallel rewrite.
Technology
Before
Front-end
Architecture
Delivery
Outcomes
- My Workplace moved from Angular 2 to the latest Angular without a big-bang rewrite
- A micro-frontend workplace where separate applications are delivered as independently versioned packages
- Applications from different Commission services integrated into one shared workplace for staff
- Shell and component library maintained once and reused everywhere, reducing duplicated effort and cost
- In production as part of the Commission’s ecosystem for managing EU external action
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)
← ProjectsLet's discuss your challenges.
Architecture, migration, AI or scaling a team — tell us what you are facing. We reply within one business day.