Clay – bibliothèque de mise en page d’interface utilisateur

 (nicbarker.com)
2 points par GN⁺ 2024-12-21 | 1 commentaires | Partager sur WhatsApp

  • Présentation de Clay

    • Clay est une bibliothèque de mise en page automatique d’interface utilisateur, de style Flexbox, écrite en C.
    • Elle offre une syntaxe déclarative et des performances à l’échelle de la microseconde.
    • La mise en page de cette page web elle-même est actuellement construite avec Clay.

  • Principales caractéristiques

    • Haute performance

      • Prend en charge des mises en page réactives de style Flexbox.
      • Utilisable en C/C++ avec un seul fichier .h, et peut être compilée en un fichier .wasm de 15 kb.
      • Composée d’environ 2 000 lignes de code C99, sans aucune dépendance, y compris à la bibliothèque standard du C.
      • Peut être utilisée avec divers moteurs de rendu comme Raylib, WebGL Canvas ou HTML.
      • Fournit une sortie flexible, facile à composer dans des moteurs ou environnements personnalisés.

    • Syntaxe déclarative

      • Offre une syntaxe déclarative souple et lisible, avec une hiérarchie imbriquée d’éléments d’interface.
      • Permet de mélanger des éléments avec du code C standard, comme des boucles, des conditions et des fonctions.
      • Permet de créer une bibliothèque de composants réutilisables à partir de primitives UI telles que le texte, les images et les rectangles.

    • Haute performance

      • Suffisamment rapide pour recalculer toute l’interface à chaque frame.
      • Utilise peu de mémoire, environ 3,5 mb, grâce à l’allocation statique et à la réutilisation. N’utilise pas malloc/free.
      • Simplifie les animations et la conception d’interfaces réactives en évitant les astuces de performance habituelles.

  • Indépendance vis-à-vis du moteur de rendu et de la plateforme

    • Produit un tableau ordonné de commandes de rendu de base comme RECTANGLE, TEXT et IMAGE.
    • Il est possible d’écrire son propre moteur de rendu en quelques centaines de lignes de code, ou d’utiliser les exemples fournis pour Raylib, WebGL canvas, etc.
    • Un moteur de rendu HTML est également fourni, et la page que vous consultez actuellement en est un exemple.

  • Outils de débogage intégrés

    • Inclut un outil de débogage intégré de style « Chrome Inspector ».
    • Permet d’inspecter en temps réel la hiérarchie et la configuration de la mise en page.
    • Vous pouvez l’essayer dès maintenant en appuyant sur la touche « d ».

À lire aussi

1 commentaires

 
GN⁺ 2024-12-21
Avis sur Hacker News

  • Il est impressionnant de voir qu’on peut créer quelque chose de remarquable avec quelques milliers de lignes de code. Je préfère CSS Grid à Flex, donc j’ai créé une bibliothèque de mise en page CSS Grid en Nim. Je prévois de comparer son algorithme de layout avec celui de Clay. Je me demande aussi s’il serait possible d’exposer une interface C

    • J’aime CSS Grid parce qu’il permet de reproduire des structures comme celle-ci
    • Lien GitHub

  • Il y a un bouton pour basculer entre HTML et Canvas, mais sur iOS Safari + Dark Reader, la page HTML passe bien en mode sombre alors que la page Canvas non. Ça réduit un peu l’effet « wow »

  • J’ai regardé l’excellente vidéo YouTube réalisée par le développeur. Très impressionnant

  • L’idée de séparer la logique d’interface du jeu de commandes de dessin est très utile et polyvalente. Je l’ai vue pour la première fois dans microui, et cela permettait d’utiliser facilement la bibliothèque dans le navigateur avec du WASM et Canvas2D

    • L’idée de faire le layout en WASM puis de rendre en HTML est excellente
    • Lien microui

  • Après l’animation, plus aucun texte n’est sélectionnable. On dirait que le focus a été volé

  • Sur le site web, un clic droit ou un clic du milieu sur les liens se comporte comme un clic gauche

  • C’est correct pour un premier jet. C’est dommage que la sortie HTML soit composée uniquement d’éléments div. Il serait bien de tenir un peu plus compte de l’accessibilité. Quand on essaie de sélectionner du texte, la sélection est annulée à cause du rerendu

  • C’est impressionnant que ce soit implémenté en C en 2000 lignes de code, sans dépendances. Je me suis demandé si cela ne pourrait pas être implémenté plus sûrement en Haskell/OCaml

  • Il y a aussi taffy, écrit en Rust, et des bindings C sont en cours

  • Je ne suis pas développeur frontend, donc j’ai du mal à comprendre pourquoi cette approche serait meilleure que d’utiliser directement du CSS ou un framework/une bibliothèque CSS. Il existe déjà des centaines de frameworks CSS, et cela semble faire à peu près la même chose