Europa Component Library version 4

Thanks to the new ECL version that will be soon released, EU sites under the europa.eu domain will be able to apply the new design elements and visual standards that are in line with the current visual identity applied on European Commission websites under the ec.europa.eu domain. The ECL 4 is an important accomplishment that will bring consistency across all public facing Europa websites, both from European Commission and from other European Institutions, Bodies and Agencies (EUIBAs). 

Main Focus 

1. Modern Look and Feel: ECL 4 places a strong emphasis on modernizing the visual identity of Europa Component Library EC. The aim is to provide a more contemporary and appealing user interface, ensuring a seamless and enjoyable user experience. 
2. Improved Accessibility: Enhancing accessibility is a top priority with ECL 4. Significant steps have been taken to make most components more user-friendly, ensuring that everyone, regardless of ability, can navigate and interact with the interface effortlessly.  

Additional Information 

1. Component Updates: 51 components have been updated in total, fine-tuning their performance and appearance for a better overall experience. 
2. Flexibility with CSS Variables: ECL 4 introduces more flexibility through the use of CSS variables, which allows users to customize the display according to their specific needs, by providing a more personalised and adaptable user interface. 
3. Improved Design Logic: Semantic colours have been implemented across all components, which contribute to a more cohesive design system. 
4. Limited Breaking Changes: ECL 4 minimizes breaking changes and ensures a smooth transition for users. 
5. Introduction of Web Components: An innovative approach that simplifies the usage of ECL, by making future integrations smoother and more efficient.
6. Preparation for Commissioner Website: ECL 4 prepares the display to seamlessly align with the requirements of the upcoming Commissioner and its College. 
7. Reduced Global Weight: To optimize performance, the main ECL files have been restructured, reducing their global weight. This has been achieved by splitting them into several optional files, ensuring a lighter and more efficient system. 

The team achievement

The delivery of the ECL 4 is a major achievement of a Front-end team who showed a great level of collaboration among team members to share ideas and address issues. They also demonstrated the necessary flexibility to adapt to changing design and specifications coming from the business owner (DG COMM). The work done by the team has produced a great simplification of the ECL library itself, using Twig template engine directly to render it, and also avoiding and extra step and maintenance.

The way to write and maintain ECL online documentation has considerably improved. DG COMM, who has taken over this task, can now do it via a CMS instead of manual editing.

The project challenges

The team had to do a complete clean-up and restructuration of ECL building tools to make it lighter and easier to maintain. This was particularly challenging as the knowledge of the previous building system of the ECL was partially missing in the newly created Front-end team, but they succeeded to create a simpler and better-documented structure.

Other challenging aspects that the team had to deal with were related to the inheritance of previous ECL versions and some requirements to maintain breaking changes to a minimum to ease integration on the client side. To address those, they maintained a migration document during the development phase where they highlighted any noticeable changes between ECL 3 and 4.

The design and development process of the ECL 4 took long since the initial approach had to be revised to a less innovative one and the design and requirements changed during the process. 

The team

The Front-end team was not alone in delivering this project; they also collaborated with the Webtools team to use the Asset Manager in the deployment process, with the DevOps team for applying the necessary changes to the project pipelines and with EWPP team on handling the full integration of ECL 4.0.

Well done to all team members involved in the project:

• Front-end team: Romain Emery, Davide Ferrante.
• EWPP team: Antonio de Marco, Imanol Eguskiza, Alexandra Beldean, Sergii Pavlenko and Evgenii Nikitin.
• Webtools team: Adrian Marina.
• DevOps team: Anthony Schwartz.

Resources

For those eager to explore further, here are some valuable resources:

• Main ECL Repository: https://github.com/ec-europa/europa-component-library
• Migration Documentation (v3 → v4): https://github.com/ec-europa/europa-component-library/blob/v4-dev/docs/Migrating-v4.md
• Live preview: https://v4-dev--europa-component-library.netlify.app/

We encourage everyone to explore the latest ECL 4 and leverage its enhanced features. Your feedback is crucial as we continue to refine and evolve Europa Component Library to meet the diverse needs of our users!!