Clay – UI-Layout-Bibliothek
(nicbarker.com)-
Einführung in Clay
- Clay ist eine in C geschriebene UI-Bibliothek für automatisches Layout im Flexbox-Stil.
- Sie bietet eine deklarative Syntax und Performance im Mikrosekundenbereich.
- Auch das Layout dieser Webseite ist derzeit mit Clay aufgebaut.
-
Hauptmerkmale
-
Hohe Leistung
- Unterstützt responsive Layouts im Flexbox-Stil.
- Kann als einzelne
.h-Datei in C/C++ verwendet und zu einer.wasm-Datei von 15 kb kompiliert werden. - Besteht aus etwa 2000 Zeilen C99-Code und hat keine Abhängigkeiten, einschließlich der C-Standardbibliothek.
- Kann mit verschiedenen Renderern wie Raylib, WebGL Canvas und HTML verwendet werden.
- Bietet flexible Ausgaben, die sich leicht in benutzerdefinierte Engines oder Umgebungen integrieren lassen.
-
Deklarative Syntax
- Bietet eine flexible und gut lesbare deklarative Syntax mit verschachtelter Hierarchie von UI-Elementen.
- Elemente können mit gewöhnlichem C-Code wie Schleifen, Bedingungen und Funktionen gemischt werden.
- Mit UI-Grundelementen wie Text, Bildern und Rechtecken lassen sich wiederverwendbare Komponentenbibliotheken erstellen.
-
Hohe Leistung
- Schnell genug, um die gesamte UI in jedem Frame neu zu berechnen.
- Durch statische Zuweisung und Wiederverwendung beträgt der Speicherbedarf nur 3,5 MB.
malloc/freewerden nicht verwendet. - Vereinfacht Animationen und responsives UI-Design, indem übliche Performance-Hacks vermieden werden.
-
-
Renderer- und Plattformunabhängigkeit
- Gibt ein sortiertes Array grundlegender Render-Befehle wie RECTANGLE, TEXT und IMAGE aus.
- Mit wenigen hundert Zeilen Code kann man einen eigenen Renderer schreiben oder die bereitgestellten Beispiele für Raylib, WebGL-Canvas usw. verwenden.
- Ein HTML-Renderer wird ebenfalls bereitgestellt; die Seite, die Sie gerade sehen, ist ein Beispiel dafür.
-
Integrierte Debug-Tools
- Enthält ein eingebautes Debug-Tool im Stil des „Chrome Inspector“.
- Layout-Hierarchie und Konfiguration können in Echtzeit überprüft werden.
- Sie können es sofort ausprobieren, indem Sie die Taste „d“ drücken.
1 Kommentare
Hacker-News-Kommentare
Beeindruckend, dass man mit ein paar tausend Zeilen Code etwas Großartiges bauen kann. Ich bevorzuge CSS Grid gegenüber Flex und habe deshalb eine CSS-Grid-Layout-Bibliothek in Nim geschrieben. Ich werde die Layout-Algorithmen mit Clay vergleichen. Ich frage mich, ob sich eine C-Schnittstelle bereitstellen lässt
Es gibt einen Umschaltknopf zwischen HTML und Canvas, aber unter iOS Safari + Dark Reader wird die HTML-Seite in den Dark Mode umgewandelt, die Canvas-Seite jedoch nicht. Das schmälert den Eindruck etwas
Ich habe mir das großartige YouTube-Video des Entwicklers angesehen. Sehr beeindruckend
Die Idee, UI-Logik von einem Satz an Zeichenbefehlen zu trennen, ist äußerst nützlich und vielseitig. Ich habe das zuerst bei microui gesehen und konnte die Bibliothek im Browser mit WASM und Canvas2D leicht nutzen
Nach der Animation lässt sich kein Text mehr markieren. Es wirkt, als wäre der Fokus gestohlen worden
Auf der Website verhalten sich Rechts- und Mittelklick auf Links wie ein Linksklick
Für einen ersten Entwurf ist es okay. Schade ist, dass die HTML-Ausgabe nur aus
div-Elementen besteht. Etwas mehr Augenmerk auf Barrierefreiheit wäre gut. Wenn man versucht, Text zu markieren, wird die Auswahl durch ein Re-Rendering aufgehobenBeeindruckend, dass das in C in 2000 Zeilen Code und ohne Abhängigkeiten umgesetzt wurde. Ich habe mich gefragt, ob man das nicht sicherer in Haskell/OCaml implementieren könnte
Es gibt auch taffy, das in Rust geschrieben ist; C-Bindings sind in Arbeit
Ich bin kein Frontend-Entwickler, daher fällt es mir schwer zu verstehen, warum dieser Ansatz besser sein soll, als CSS direkt zu verwenden oder ein CSS-Framework bzw. eine CSS-Bibliothek zu nutzen. Es gibt bereits Hunderte von CSS-Frameworks, und das hier scheint eine ähnliche Funktion zu erfüllen