Design Systems Team/Annonce de Codex 1.0

L'équipe Design Systems est ravie d'annoncer la sortie de Codex 1.0 !

Qu'est-ce que Codex ?

Codex est le nouveau système de conception pour Wikimedia. Au cours des deux dernières années, l'équipe Design Systems et les contributeurs de la Fondation Wikimedia, Wikimedia Allemagne, et les volontaires des communautés ont collaboré pour créer un système de conception centralisé destiné à être utilisé dans les projets Wikimedia. Codex fournit des expériences plus équitables pour tous les participants du mouvement Wikimedia, et rend plus facile et plus rapide la conception et la fabrication d'interfaces utilisateurs. Avec Codex, nous souhaitons permettre à plus de personnes de contribuer à la mission.

Codex fournit une bibliothèque de jetons de design, de composants d'interface utilisateur, et un catalogue d'icônes à utiliser avec ces composants. Grâce aux bibliothèques Codex Figma, les designers peuvent réutiliser ces composants partagés, jetons et actifs dans leurs conceptions. Pour les développeurs, Codex fournit des composants conçus avec Vue.js, ainsi que des composants intégralement en CSS qui ne nécessitent pas l'utilisation de JavaScript.

Codex est déjà utilisé pour les Wikifonctions, Vector 2022, l'interface tuteur et le module impact de Croissance, le nouveau flux de pages, la recherche de médias, pages proches, les sondages rapides et les listes de lecture. Les projets actuellement en développement et utilisant Codex incluent l'accessibilité pour la lecture et le système de rapport d'incident.

Codex fournit un ensemble de composants centraux qui couvrent un large spectre des besoins d'interface utilisateur pour Wikimedia, mais ne propose pas forcément d'équivalent pour tous les composants de OOUI. Si vous estimez qu'un composant que vous espériez utiliser manque, merci de discuter avec l'équipe Design Systems et nous serons heureux de vous aider. Nous encourageons fortement les contributions à Codex, en ligne avec notre vision consistant à être un projet collaboratif guidé par une administration.

Pourquoi la version 1.0 maintenant ?

L'équipe Design Systems travaille en direction de cette étape depuis un certain nombre de mois. En se basant sur les premiers retours, nous avons déjà amélioré l'expérience développeur de l'utilisation de Codex, notamment en fournissant des dépôts d'exemple prêts à l'emploi pour l'utilisation de Codex dans une extension MediaWiki ainsi qu'en modifiant nos extraits de code sur le site de documentation afin de faciliter le copier-coller dans des projets n'étant pas spécifiques à TypeScript et MediaWiki.

Nous avons également alloué un temps et des efforts significatifs pour faire en sorte que l’accessibilité des composants et des actifs Codex soit conforme à WCAG 2.1 AA et aux autres standards, et nous envisageons de nous impliquer dans des groupes tels que l'American Foundation for the Blind pour nous améliorer encore plus.

Nous avons consolidé différentes ressources pour la conception (tel que le guide de style pour la conception) dans Codex de manière à disposer d'une seule source faisant foi pour le développement du front-end Wikimedia et les standards de conception. L'objectif est de clarifier le rôle de Codex, pas simplement en tant que bibliothèque d'interface utilisateur, mais en tant que système de conception pour Wikimedia.

Qui devrait utiliser Codex ?

Tout le monde ! Certains éléments fondamentaux tels que les jetons de conception peuvent et doivent être utilisés dans tous les logiciels Wikimedia à partir de maintenant. La plupart du code de MediaWiki qui utilisait les anciennes variables pre-jeton de mediawiki.ui ont déjà été migrées pour utiliser les jetons Codex à la place. La documentation de Codex wiki dispose de plus d'informations concernant l'utilisation de jetons de conception (ainsi que d'autres éléments) dans MediaWiki.

Pour l'instant, les composants Codex sont plus adaptés aux fonctionnalités côté client n'ayant pas de besoins complexes pour le support non-JavaScript, ou pour les interfaces rendues côté serveur n'ayant pas besoin de beaucoup d'interactivité. Les fonctionnalités nécessitant à la fois une grande interactivité et ayant besoin de supporter les utilisateurs sans JavaScript vont devoir créer des implémentations séparées de la fonctionnalité utilisant des composants uniquement en CSS et des composants Vue. L'équipe Design Systems a exploré des solutions qui permettront dans le futur une seule implémentation Vue pour supporter à la fois les utilisateurs non-JavaScript et JavaScript.

Les développeurs de gadgets et de scripts utilisateurs désirant utiliser JavaScript pour l'interactivité ne peuvent pour l'instant utiliser Codex de manière fiable. Toutefois, l'équipe Design System vise à fournir une solution pour cela dans le futur. Plus de détails ainsi que des retours sont les bienvenus sur Phabricator.

Au final, nous souhaitons que Codex remplace pour la plupart les autres bibliothèques d'interface utilisateur dans l'écosystème Wikimedia, tel que OOUI et jquery.ui. Au fil du temps, nous espérons que cela rendra la conception de fonctionnalités et l'expérience utilisateur moins fragmentés parmi les projets. Nous encourageons les personnes désirant rendre leur code plus maintenable et souhaitant utiliser des outils modernes maintenant et dans le futur à considérer la migration de leurs projets existants vers Codex. Pour les nouveaux projets, nous recommandons vivement de les construire avec Codex dès le début. Cela vous assurera de travailler avec ressources d'ingénierie et les outils les meilleurs et les plus récents, la conformité pour l'accessibilité, ainsi que le support des langues multiples et de l'internationalisation.

Prochaines étapes

L'équipe Design Systems est là pour vous aider à évaluer si Codex est adapté pour votre projet et peut vous aider à mettre en place un plan de migration pour les bases de code existantes.

Les personnes souhaitant se lancer avec Codex peuvent visiter le site de documentation. Pour des informations plus détaillées concernant Codex dans MediaWiki, vous pouvez visiter la page wiki du projet Codex. Pour une liste générale de ressources, vous pouvez visiter la page wiki de notre équipe.

Une fois de plus, si vous avez des questions, des commentaires, ou souhaitez obtenir de l'aide de la part de l'équipe Design Systems, venez discuter avec nous !