Composants HowTo – Présentation

Composants HowTo

"HowTo: Composants" est un ensemble de composants Web qui implémentent des modèles d'interface utilisateur courants. Le but de ces implémentations est de constituer une ressource éducative. Vous pouvez lire l'implémentation de différents composants, très commentée, et en tirer des leçons. Notez qu'il ne s'agit PAS explicitement des bibliothèques d'UI et ne doivent PAS être utilisées en production.

Composants

  • <howto-checkbox>: représente une option booléenne dans un formulaire. Le type de case à cocher le plus courant est double, qui permet à l'utilisateur de basculer entre deux choix : cochée et décochée.
  • <howto-tabs>: limite le contenu visible en le divisant en plusieurs panneaux.
  • <howto-tooltip>: pop-up qui affiche les informations concernant un élément lorsque celui-ci est sélectionné au clavier ou que l'utilisateur pointe dessus avec la souris.

Objectifs

Notre objectif est de démontrer les bonnes pratiques pour écrire des composants robustes qui sont accessibles, performants, faciles à gérer et à styliser. Chaque composant est entièrement autonome afin de pouvoir servir d'implémentation de référence.

Accessibilité

Les composants suivent de près les pratiques de création ARIA WAI, qui est un guide expliquant et présentant ARIA, la norme Accessible Internet Application (standard). Si vous ne connaissez pas les ARIA, consultez notre introduction aux WebFundamentals. Chaque composant renvoie à la section correspondante des pratiques de rédaction. Bien que cela ne soit pas strictement nécessaire, nous vous recommandons de lire la section des pratiques de création avant de vous plonger dans le code.

Performances

Dans le développement Web, le terme "performances" peut s'appliquer à une multitude de choses. Dans le contexte de <howto>, les performances font principalement référence aux animations qui s'exécutent de manière cohérente à 60 FPS, même sur les appareils mobiles.

Flexibilité visuelle

Dans la mesure du possible, les composants ne sont pas stylisés, sauf pour la mise en page ou pour indiquer un état sélectionné ou actif. Cela permet de garder l'implémentation visuellement flexible et ciblée. En évitant de consacrer du temps à la décoration, nous limitons le code aux seuls éléments absolument nécessaires pour que le composant fonctionne. Si un style est requis pour que le composant fonctionne, un commentaire s'affiche pour en expliquer la raison.

Code facile à gérer

En ce qui concerne la section HowTo: les composants est une implémentation de référence, nous avons consacré plus de temps à écrire du code lisible, facile à comprendre et fortement commenté.

Sans objectifs

Être une bibliothèque / un framework / une boîte à outils

Les composants <howto> ne sont pas publiés sur npm, bower ou toute autre plate-forme, car ils ne sont pas destinés à être utilisés en production. Par souci de concision et de lisibilité, nous utilisons des API JavaScript modernes et nous prenons en charge les navigateurs modernes qui implémentent les normes Web Components. Vous pourrez adapter le code à vos propres besoins après avoir lu ces implémentations.

Être rétrocompatibles

Vous ne devez pas vous appuyer directement sur le code. Nous pouvons, et très probablement voudra, modifier radicalement l'implémentation et l'API de n'importe quel élément si une meilleure implémentation est découverte. Il s'agit d'une ressource vivante où nous pouvons partager, explorer et discuter des bonnes pratiques pour créer des interfaces utilisateur Web.

Être complet

Actuellement, nous n'intégrons pas tous les composants que vous pouvez trouver dans les pratiques de création ARIA WAI (et ne le ferons probablement pas). Cependant, la réutilisation des principes utilisés dans d'autres composants <howto> devrait permettre aux lecteurs de mettre en œuvre les composants manquants.