Composants HowTo
"Guide: Composants" est un ensemble de composants Web qui implémentent des modèles d'UI courants. Ces implémentations ont pour but de servir de ressource pédagogique. Vous pouvez lire l'implémentation densément commentée des différents composants et en tirer des enseignements. Notez qu'il ne s'agit PAS explicitement d'une bibliothèque d'UI et qu'elles 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 un type à deux états, qui permet à l'utilisateur de basculer entre deux choix : coché et non coché.<howto-tabs>: limite le contenu visible en le divisant en plusieurs panneaux.<howto-tooltip>: fenêtre pop-up qui affiche des informations sur un élément lorsque celui-ci est sélectionné au clavier ou que la souris pointe dessus.
Objectifs
Notre objectif est de vous montrer les bonnes pratiques à suivre pour écrire des composants robustes, accessibles, performants, faciles à gérer et à styliser. Chaque composant est entièrement autonome et peut servir d'implémentation de référence.
Accessibilité
Les composants suivent de près les bonnes pratiques d'écriture WAI-ARIA, qui sont un guide expliquant et illustrant ARIA, la norme pour les applications Web enrichies accessibles. Si vous ne connaissez pas ARIA, consultez notre présentation sur WebFundamentals. Chaque composant renvoie à la section correspondante des bonnes pratiques d'écriture. Bien que cela ne soit pas strictement nécessaire, nous vous recommandons de lire la section sur les bonnes pratiques d'écriture avant de vous attaquer au code.
Performances
En 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 exécutées 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 ne consacrant pas de temps à la décoration, nous limitons le code à ce qui est absolument nécessaire pour que le composant fonctionne. Si un style est requis pour que le composant fonctionne, il sera marqué d'un commentaire expliquant pourquoi.
Code maintenable
Comme HowTo: Components est une implémentation de référence, nous avons passé du temps supplémentaire à écrire du code lisible et facile à comprendre, avec de nombreux commentaires.
Non-objectifs
Être une bibliothèque / un framework / un kit d'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. Pour obtenir un code concis et lisible, nous utilisons des API JavaScript modernes et sommes compatibles avec 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étrocompatible ;
Le code ne doit pas être utilisé directement. Nous pouvons, et nous allons très probablement, modifier radicalement l'implémentation et l'API de n'importe quel élément si une implémentation meilleure est découverte. Il s'agit d'une ressource vivante où nous pouvons partager, explorer et discuter des bonnes pratiques pour créer des UI Web.
être complète ;
Nous n'implémentons actuellement pas (et ne le ferons probablement pas) *tous les composants que vous trouverez dans les pratiques d'écriture WAI ARIA. Toutefois, la réutilisation des principes utilisés dans d'autres composants <howto> devrait permettre aux lecteurs d'implémenter les composants manquants.