Oat - bibliothèque d’interface ultra-légère, zéro dépendance, en HTML·CSS·JS sémantiques

• Bibliothèque de composants UI ultra-légère basée sur HTML et CSS, conçue sans aucun processus de build ni dépendance à un framework
• Composée de seulement 6 KB de CSS et 2,2 KB de JS (compressés et gzip), elle permet d’utiliser immédiatement les principaux éléments d’interface nécessaires à une application web
• Stylise directement des éléments HTML sémantiques comme <button>, <input>, <dialog>, tout en minimisant l’usage de classes pour réduire la pollution du code
• Prend en charge nativement l’accessibilité (Accessibility) avec les rôles ARIA et la navigation au clavier
• Vise une composition d’interface simple, fondée sur les standards et durable dans le temps, en s’affranchissant des dépendances de l’écosystème JS complexe et du sur-ingénierie

---

Présentation d’Oat

• Oat est une bibliothèque de composants UI sémantiques ultra-légère basée sur HTML + CSS, entièrement dépourvue de dépendances externes
  • Aucun framework, outil de build ou configuration d’environnement de développement n’est nécessaire
  • Il suffit d’inclure de petits fichiers CSS et JS pour l’utiliser immédiatement
• Avec une taille d’environ 8 KB (6 KB de CSS + 2,2 KB de JS), elle permet de mettre en place rapidement l’UI de base d’une application web
• Parmi les principaux composants figurent Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar, etc.

HTML sémantique et accessibilité

• Les styles s’appliquent automatiquement sur la base de balises et attributs sémantiques, ce qui permet de conserver un design cohérent sans définir de classes
  • Exemple : styles appliqués directement à des éléments HTML natifs comme <button>, <input>, <dialog>
  • Les attributs sémantiques comme role="button" sont également reconnus automatiquement
• Les rôles ARIA et la navigation au clavier sont pris en charge sur l’ensemble des composants
  • L’application stricte des standards d’accessibilité améliore l’expérience utilisateur

Zéro dépendance et simplicité

• Aucune dépendance à un framework ou à une bibliothèque JS ou CSS
  • Exclut totalement la complexité de l’écosystème Node.js et les problèmes de dépendances inutiles
  • Utilisable immédiatement, sans build ni gestion de paquets
• Certains composants dynamiques sont implémentés en WebComponents avec un minimum de JS

Personnalisation et thèmes

• Les variables CSS permettent d’ajuster facilement les couleurs de thème et les styles
  • En ajoutant l’attribut data-theme="dark" à body, le thème sombre s’applique automatiquement
• Le design global est influencé par l’esthétique shadcn

Contexte de création

• Le projet est né d’une insatisfaction face à la complexité excessive et aux problèmes de dépendances des frameworks UI JavaScript existants
  • Objectif : éviter les problèmes de « dependency hell » et de « lock-in » de l’écosystème Node.js
• Il a été créé pour disposer directement d’une bibliothèque UI simple, fondée sur les standards et maintenable sur le long terme
• Oat permet aux développeurs de mettre en place une interface prête à l’emploi sans processus de build inutile

[GN⁺]

Avis sur Hacker News

• Je trouve intéressante la tentative d’obtenir les bons effets pour une web app en n’utilisant que des éléments HTML sémantiques
  J’aime aussi l’orientation vers le paradigme du « classless CSS ». Mais en parcourant le catalogue de composants, on voit un mélange d’éléments sémantiques et d’éléments de base, de balises data et d’attributs aria, ainsi que de classes CSS, ce qui donne une impression de manque de cohérence
  Cela dit, le fait que le CSS réagisse aux attributs aria pour le styling est impressionnant. Ça semble être un bon exercice pour apprendre à penser avec une approche aria-first plutôt qu’avec une grosse bibliothèque de composants comme React
  J’apprécie particulièrement que cette bibliothèque de composants inclue une barre latérale native. La plupart des bibliothèques se concentrent uniquement sur de petits composants réutilisables, alors qu’ici elle se place naturellement à côté de main avec une structure aside > nav > ul, ce qui reste propre

• Ce site m’a surpris. Dès que j’ai touché un lien, la page s’est chargée instantanément, au point de sembler d’une rapidité presque brutale
  J’avais oublié qu’Internet pouvait aller aussi vite, et ça me donne envie de me remettre au développement web

  • Si tu veux créer un site, je te recommande de le faire avec Astro. Les temps de chargement sont complètement dingues
  • À titre de comparaison, Hacker News est aussi un bon exemple de cette sensation de vitesse

• Ce projet donne l’impression de réaliser concrètement la simplicité que j’espérais trouver dans DaisyUI
  Avec Datastar, ça pourrait faire une combinaison très puissante, fondée sur les standards du web. Une approche qui s’appuie sur les vraies technologies du web plutôt que sur un « écosystème »

• fosiao/rclone-webui-oat
  semble remplacer l’ancien rclone-webui-react, lourd et non maintenu

• Le billet de blog lié depuis la page d’accueil va probablement susciter un débat plus intéressant que le framework lui-même
  Dans mon travail, j’utilise à la fois Angular et Next.js, et je me reconnais de plus en plus dans le point de vue de cet article
  Article lié : JavaScript ecosystem is a hot mess

  • Bon lien. L’article date de 2021, mais il contient encore beaucoup d’observations pertinentes
    Discussion de l’époque : fil HN
  • J’aime vraiment ce site web. De la clic à l’affichage complet, la latence est de 0 seconde
  • Pour information, le même sujet avait déjà été discuté ici en 2021

• <aside> n’est pas toujours un élément sémantique approprié pour une barre latérale
  À l’origine, il est destiné à du contenu lié indirectement au corps principal. Une barre latérale peut parfois correspondre à cette définition, mais pas systématiquement

• Il existe énormément de bibliothèques CSS sémantiques prêtes à l’emploi de ce genre. C’est toujours plaisant de découvrir un nouveau projet
  Leur qualité est variable, mais ce site recense plus de 50 feuilles de style prêtes à l’emploi pour le HTML sémantique
  Lien : collection de CSS minimales prêtes à l’emploi

  • Ah, donc c’est bien « drop-in » que tu voulais dire. Je ne pensais pas qu’un simple trait d’union pouvait être aussi important :)
  • Ça devrait recevoir bien plus d’attention. Honnêtement, c’est plus intéressant que le billet d’origine
  • J’adore. On peut parcourir les feuilles de style en boucle avec la flèche de droite
  • Je me demande s’il y en a dans cette liste que tu recommanderais en particulier

• Ce projet me rappelle les premières versions de Bootstrap, il y a dix ans
  Le Bootstrap actuel est devenu beaucoup plus volumineux, mais on retrouve la simplicité de cette époque
  Référence : site officiel de Bootstrap

• Merci d’avoir testé aussi sur d’anciens navigateurs. C’est vraiment une bibliothèque ultra-minimaliste
  Captures d’écran : image1, image2

  • Je suis curieux de savoir s’il y a une raison pour laquelle tu utilises habituellement un ancien navigateur comme navigateur principal

• J’ai essayé quelque chose de similaire dans une app, mais je me suis rendu compte que certaines balises sémantiques/fonctionnelles ne sont toujours pas correctement prises en charge par les navigateurs
  Par exemple, dans Safari, utiliser showModal sur la balise dialog force le recalcul de toute la mise en page et c’est 59 fois plus lent que Chromium
  Malgré tout, j’aime toujours beaucoup cette approche en elle-même