Oat – ultraleichte UI-Bibliothek ohne Abhängigkeiten mit semantischem HTML, CSS und JS

• Ultraleichte UI-Komponentenbibliothek auf Basis von HTML und CSS mit einer Struktur ganz ohne Build-Prozess oder Framework-Abhängigkeiten
• Besteht aus nur 6 KB CSS und 2,2 KB JS (komprimiert und gzip) und stellt damit die wichtigsten UI-Elemente für Webanwendungen sofort einsatzbereit bereit
• Stylt semantische HTML-Elemente direkt wie <button>, <input> und <dialog> und minimiert die Verwendung von Klassen, um Code-Verschmutzung zu reduzieren
• Berücksichtigt Barrierefreiheit (Accessibility) und unterstützt standardmäßig ARIA-Rollen sowie Tastaturnavigation
• Zielt darauf ab, sich von Abhängigkeiten in komplexen JS-Ökosystemen und übermäßigem Engineering zu lösen und eine einfache, standardbasierte und langfristig nutzbare UI-Zusammenstellung zu bieten

---

Überblick über Oat

• Oat ist eine ultraleichte semantische UI-Komponentenbibliothek auf Basis von HTML + CSS ohne jegliche externe Abhängigkeiten
  • Es werden weder Frameworks noch Build-Tools oder eine Entwicklungsumgebungskonfiguration benötigt
  • Durch das Einbinden kleiner CSS- und JS-Dateien ist sie sofort einsatzbereit
• Mit einer Größe von etwa 8 KB (6 KB CSS + 2,2 KB JS) lässt sich die grundlegende UI einer Webanwendung schnell aufbauen
• Zu den wichtigsten Komponenten gehören Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar und weitere

Semantisches HTML und Barrierefreiheit

• Styles werden auf Basis semantischer Tags und Attribute automatisch angewendet, sodass auch ohne Klassenangaben ein konsistentes Design erhalten bleibt
  • Beispiel: Direkte Anwendung von Styles auf grundlegende HTML-Elemente wie <button>, <input> und <dialog>
  • Auch semantische Attribute wie role="button" werden automatisch erkannt
• ARIA-Rollen und Tastaturnavigation werden in allen Komponenten unterstützt
  • Durch die verbindliche Anwendung von Barrierefreiheitsstandards wird die User Experience verbessert

Keine Abhängigkeiten und Einfachheit

• Keine Abhängigkeiten von JS- oder CSS-Frameworks oder Bibliotheken
  • Die Komplexität des Node.js-Ökosystems und Probleme mit unnötigen Abhängigkeiten werden vollständig ausgeschlossen
  • Sofort nutzbar ohne Build- oder Paketmanagement-Prozess
• Einige dynamische Komponenten sind als WebComponents implementiert und verwenden nur ein Minimum an JS

Anpassung und Themes

• Über CSS-Variablen lassen sich Theme-Farben und Styles einfach anpassen
  • Wird das Attribut data-theme="dark" zu body hinzugefügt, wird automatisch das Dark Theme angewendet
• Das Gesamtdesign ist von der shadcn-Ästhetik beeinflusst

Hintergrund der Entwicklung

• Entstanden aus Unzufriedenheit mit der übermäßigen Komplexität und den Abhängigkeitsproblemen bestehender JavaScript-UI-Frameworks
  • Ziel ist es, Probleme wie „dependency hell“ und „lock-in“ im Node.js-Ökosystem zu vermeiden
• Entwickelt, um eine einfache, standardbasierte und langfristig wartbare UI-Bibliothek selbst nutzen zu können
• Mit Oat können Entwickler eine sofort einsetzbare UI-Zusammenstellung ohne unnötige Build-Prozesse umsetzen

[GN⁺]

Hacker-News-Meinungen

• Ich finde den Versuch großartig, allein mit semantischen HTML-Elementen die richtigen Effekte für Web-Apps zu erzielen.
  Mir gefällt auch die Ausrichtung auf das Paradigma „classless CSS“. Wenn man sich aber den Komponenten-Katalog ansieht, wirken semantische Elemente und Basiselemente, data-Tags und aria-Attribute sowie CSS-Klassen etwas uneinheitlich zusammengemischt.
  Trotzdem ist es beeindruckend, dass das CSS abhängig von aria-Attributen reagiert und so das Styling steuert. Als Alternative zu schweren Komponentenbibliotheken wie React scheint das eine gute Übung zu sein, um in einem aria-first-Ansatz zu denken.
  Besonders gefällt mir, dass diese Komponentenbibliothek eine native Sidebar enthält. Die meisten Bibliotheken konzentrieren sich nur auf wiederverwendbare kleine Komponenten, aber diese lässt sich mit der Struktur aside > nav > ul ganz natürlich neben main platzieren, was sehr sauber wirkt.

• Diese Seite hat mich wirklich überrascht. Sobald ich auf einen Link getippt habe, wurde die Seite sofort geladen und fühlte sich fast peitschenartig schnell an.
  Ich hatte vergessen, dass sich das Internet auch so schnell anfühlen kann, und bekomme jetzt Lust, mich selbst an Webentwicklung zu versuchen.

  • Wenn du eine Website bauen willst, würde ich Astro empfehlen. Die Ladegeschwindigkeit ist wirklich verrückt.
  • Hacker News ist übrigens auch ein gutes Beispiel für ein ähnliches Geschwindigkeitsgefühl.

• Dieses Projekt fühlt sich nach der Einfachheit an, die ich mir von DaisyUI erhofft hatte und die hier tatsächlich umgesetzt wurde.
  In Kombination mit Datastar könnte das ein starkes Gespann auf Basis von Webstandards werden. Das ist eher ein Ansatz, der sich auf echte Webtechnologien stützt als auf ein „Ökosystem“.

• fosiao/rclone-webui-oat
  scheint das bisherige schwere und nicht mehr gepflegte rclone-webui-react zu ersetzen.

• Der im Frontpage-Beitrag verlinkte Blogpost dürfte spannendere Diskussionen auslösen als das Framework selbst.
  Ich arbeite beruflich sowohl mit Angular als auch mit Next.js und kann der Perspektive dieses Artikels immer mehr zustimmen.
  Zugehöriger Artikel: JavaScript ecosystem is a hot mess

  • Guter Link. Der Artikel ist zwar von 2021, enthält aber immer noch viele gültige Einsichten.
    Damalige Diskussion: HN-Thread
  • Diese Website gefällt mir wirklich. Von Klick bis vollständig geladen gibt es 0 Sekunden Verzögerung.
  • Zur Einordnung: Dasselbe Thema wurde 2021 auch hier diskutiert.

• <aside> ist nicht immer ein passendes semantisches Element für eine Sidebar.
  Eigentlich ist es für Inhalte gedacht, die nur indirekt mit dem Hauptinhalt zusammenhängen. Manchmal trifft das auf eine Sidebar zu, aber eben nicht immer.

• Solche semantischen Drop-in-CSS-Bibliotheken gibt es wirklich viele. Es macht Spaß, ein neues Projekt in diesem Stil zu sehen.
  Die Qualität ist unterschiedlich, aber auf dieser Seite sind mehr als 50 Drop-in-Stylesheets für semantisches HTML gesammelt.
  Link: Sammlung von Drop-in Minimal CSS

  • Ach so, du meintest „drop-in“. Ein einziger Bindestrich ist also doch ziemlich wichtig :)
  • Das verdient deutlich mehr Aufmerksamkeit. Ehrlich gesagt ist das spannenderes Material als der Originalbeitrag.
  • Gefällt mir total. Man kann mit dem rechten Pfeil durch die Stylesheets durchblättern.
  • Ich frage mich, ob du aus dieser Liste bestimmte Stylesheets empfehlen würdest.

• Dieses Projekt erinnert mich an die frühen Versionen von Bootstrap vor 10 Jahren.
  Das heutige Bootstrap ist zwar deutlich aufgeblähter, aber hier spürt man wieder die damalige Einfachheit.
  Referenz: Offizielle Bootstrap-Website

• Danke, dass auch in alten Browsern getestet wurde. Das ist wirklich eine ultraminimale Bibliothek.
  Screenshots: Bild1, Bild2

  • Mich würde interessieren, ob es einen bestimmten Grund gibt, warum du alte Browser im Alltag als Hauptbrowser nutzt.

• Ich habe in meiner App etwas Ähnliches ausprobiert und festgestellt, dass einige semantische/funktionale Tags in Browsern noch immer nicht richtig unterstützt werden.
  Wenn man zum Beispiel in Safari showModal für das dialog-Tag verwendet, wird das gesamte Seitenlayout neu berechnet, was 59-mal langsamer als in Chromium ist.
  Trotzdem gefällt mir dieser Ansatz nach wie vor.