Donnez du style à vos applications web ! (Calcite Design System v1.0)

Proposer expériences utilisateurs intuitives, belles et cohérentes pour vos applications web s'avère bien souvent être une tâche ardue. Nous allons parler aujourd'hui du Calcite Design System d'Esri, collection de ressources de conception et de développement mises à disposition pour faciliter la production d'applications cartographiques ou d'interfaces utilisateur de haute qualité, et dont la première version de production (1.0) est disponible depuis fin janvier.

Qu'est-ce que le Calcite Design System ?

Calcite est utilisé par les équipes produits d'Esri pour créer des expériences Esri cohérentes et conformes à la marque à travers les produits ArcGIS. Ce Design System comprend un kit d'interface utilisateur, des icônes, des jeux de couleurs et une bibliothèque de composants Web avec des éléments d'interface utilisateur tels que des boutons, des panneaux, des accordéons, des alertes et bien d'autres encore.

Grâce à sa mise à disposition pour la communauté des développeurs, vous pouvez créer une expérience utilisateur cohérente dans toutes vos applications en mettant en œuvre les modèles et bonnes pratiques établis pour les produits ArcGIS. Vos applications qui s'intègrent à l'écosystème ArcGIS offriront l'expérience familière d'ArcGIS, tout en mettant en valeur votre propre marque et votre style.

L'utilisation des thèmes vous permet d'intégrer votre propre style ou la marque de votre entreprise dans votre application. Par défaut, les composants de l'interface utilisateur utilisent la palette de couleurs, la police et la forme des composants d'ArcGIS. Si vous souhaitez adapter l'apparence à votre marque ou à votre style préféré, vous pouvez facilement personnaliser la couleur, la police et les autres styles des composants, le cas échéant.

Si vous souhaitez plus d'informations sur le sujet, je vous conseille l'article complet consacré à la présentation du Calcite Design System sur ce blog.

Les nouveautés de la version 1.0

Après plus d'un an et demi de disponibilité en Beta, Calcite Design System est désormais disponible en version 1.0, sa première version de production.

Cette première version apporte de nombreuses améliorations au système de conception, notamment en garantissant des modèles de composants d'API cohérents et prévisibles, en améliorant l'accessibilité et la localisation, en ajoutant de nouvelles fonctionnalités à la prévisualisation des composants, en proposant des guides approfondis couvrant les meilleures pratiques et les sujets pratiques pour la création d'applications avec Calcite, un tout nouveau kit d'interface utilisateur Figma, et bien plus encore. Voyons ensemble ces mises à jour principales. 

Cohérence des composants de l'API

Calcite est le résultat d'une large collaboration entre les équipes de conception et de développement d'Esri, ce qui a naturellement entraîné certaines différences d'implémentation entre les composants. Lors de la transition vers la version de production proposée à la communauté des développeurs, Esri a défini des règles strictes pour la mise en œuvre des composants et les modèles de programmation. Afin de fournir aux développeurs une API standard pour tous les composants, Esri avons apporté des modifications à certaines API de composants. Par conséquent, les développeurs qui ont construit des applications avec les versions bêta précédentes devront probablement mettre à jour leur code pour correspondre aux changements d'API. 

Les mises à jour de cohérence concernent les domaines suivants :

• Nommage, événements et modèles de propriété ;
  

• Événements de mise au point et de flou ;
  

• Options et méthodes pour les éléments flottants ;
  

• Propriétés désactivées et en lecture seule.

Vous pouvez retrouver la liste complète des modifications apportées entre les versions dans le change log.

 

Accessibilité

Les composants Calcite s'appuient sur les normes d'accessibilité du W3C pour garantir que les applications et les expériences que vous créez sont utilisables par un large éventail de publics. Calcite est soumis à des audits d'accessibilité réalisés par des tiers afin d'identifier les principaux domaines à améliorer. L'année dernière, de nombreuses mises à jour ont été apportées à Calcite en matière d'accessibilité. En voici quelques-unes : 

• Possibilité de réduire automatiquement les mouvements en fonction des préférences de l'utilisateur ;
  

• Amélioration de l'interaction avec le clavier ;
  

•  Amélioration de la prise en charge des technologies d'assistance (par exemple, étiquetage obligatoire, définition des rôles et attributs aria) ;
  

• Prise en charge des contrastes élevés.

Esri propose également un nouveau guide sur les directives d'accessibilité, qui décrit les mesures supplémentaires que vous pouvez prendre pour garantir qu'un public diversifié puisse naviguer, comprendre et utiliser les solutions que vous créez.

Localisation

Les composants Calcite prennent en charge la localisation, ce qui signifie que la langue utilisée dans l'interface utilisateur peut être adaptée à une langue et une culture spécifiques. La prise en charge comprend le changement de la langue d'affichage, le formatage régional, l'utilisation de systèmes de numérotation et le contenu bidirectionnel de droite à gauche (RTL). Avec cette version, les composants ont maintenant des traductions intégrées pour toutes les régions Esri prises en charge, parmi d'autres améliorations liées à la localisation. 

Vous pouvez vous rendre sur le site Developer pour en savoir plus sur les normes de documentation de la localisation.

 

Intégration à des frameworks

Les composants Calcite étant construits sur les standards des composants web du W3C, ils sont agnostiques, ce qui signifie que vous pouvez les utiliser avec n'importe quel framework. 

Cette version comprend des améliorations des composants pour le travail avec des environnements DOM virtuels, et il y a de nouvelles ressources pour vous aider dans votre mise en œuvre, y compris de nouvelles applications d'exemple d'utilisation avec des framework,  et également un nouveau guide sur l'intégration de Calcite avec les frameworks Web. Vous pouvez également utiliser le wrapper React de Calcite Components fourni pour utiliser facilement Calcite dans les applications construites avec React.

 

Figma web UI kit

Avec la version 1.0, Esri introduit un nouveau kit d'interface utilisateur Calcite Figma que les concepteurs et les développeurs peuvent utiliser pour concevoir leurs applications dans l'environnement Figma en utilisant Calcite. Vous pouvez concevoir votre application dans Figma et avoir la certitude que votre conception correspondra exactement à une application web construite avec des composants Calcite.
Le nouveau kit d'interface utilisateur sera synchronisé avec les versions de Calcite et offre les améliorations suivantes par rapport à la version bêta :

• Inclut des des exemples de configurations courantes des composants ;
  

• Fournit des directives d'utilisation des composants ;
  

• Architecturé avec les propriétés des composants, les instances imbriquées et les instances préférées ;
  

• Propose une mise en page automatique améliorée ;
  

• Fournit une architecture et des conventions d'appellation définies ;
  

• Prend en charge des modes clair et foncé.

Veuillez noter que Figma est un outil de conception populaire et ne fait pas partie de l'offre de produits d'Esri; vous pouvez visiter le site Web de Figma pour en savoir plus.

Ressources Calcite sur Figma Community

Vous pouvez désormais accéder au kit d'interface utilisateur Web Figma, aux styles et aux icônes d'interface utilisateur sur la page Figma Community d'Esri et rester à jour sur les dernières ressources Figma Calcite qui seront mises à jour régulièrement avec chaque version majeure de Calcite. 

Vous pouvez également utiliser la communauté Figma pour poser des questions et faire des suggestions concernant les ressources Calcite Figma.

Documentation

De nombreuses mises à jour ont été apportées au site de documentation avec plus d'informations sur les meilleures pratiques, des améliorations pour explorer et configurer les composants, et des ressources mises à jour pour démarrer rapidement.

Amélioration des exemples pour les composants : 

Chaque page de composant comporte un exemple interactif qui vous permet d'explorer les différentes façons de configurer un composant. De nombreux composants ont été mis à jour afin d'exposer de nouvelles façons d'interagir avec le composant. Vous pourrez par exemple :

• Explorer une variété de motifs recommandés pour un composant donné ;
  

• Ajuster les variables du thème Calcite par défaut pour prévisualiser les couleurs de votre marque ou de votre application dans le composant ;
  

• Prévisualiser et modifier la visibilité des emplacements dans les composants.

Ressources de prise en main : 

Esri a ajouté un guide pour vous aider à déterminer le format de construction de Calcite Component qui convient le mieux à votre flux de travail, et propose également de nouveaux tutoriels.

Apprenez les bases des composants Web :

Les composants Web sont une norme native des navigateurs, et de nombreux concepts techniques nécessaires au développement avec Calcite Components ne sont pas spécifiques à la bibliothèque. Toutefois, pour aider les développeurs à se familiariser rapidement avec les aspects essentiels du travail avec les composants Web, Esri a ajouté un guide des concepts de base.

Les builds pour la version 1.0 seront disponibles via le CDN ArcGIS et le package NPM. Pour plus de détails sur cette mise à jour, vous pouvez consulter les notes de version disponibles sur le site Developers d'Esri.

Envie d'apprendre à utiliser un composant du design system ? Vous pouvez retrouver ce tutoriel où nous apprenons à implémenter un bouton.