- Obwohl Radio-Buttons als grundlegend im Webbrowser eingebaute HTML-Elemente eigentlich simpel sind, werden sie in der Shadcn-UI-Bibliothek als mehrere Schichten von React-Komponenten neu aufgebaut.
- Shadcns
<RadioGroup> und <RadioGroupItem> umschließen wiederum Komponenten von Radix UI und verwenden lucide-react-Icons sowie Dutzende von Tailwind-Klassen.
- Radix nutzt für Barrierefreiheit und Anpassbarkeit ARIA-Attribute, verwendet in der Praxis jedoch statt des nativen
<input type="radio"> wiederverwendete Button-Elemente.
- Obwohl sich dasselbe Styling auch mit einfachem CSS erreichen ließe, fügt diese Struktur Hunderte Zeilen Code und mehrere Abhängigkeiten hinzu und verursacht unnötige Komplexität.
- Weil native HTML-Elemente nicht wiederverwendet werden, nehmen Leistungseinbußen und Wartungsaufwand zu, und die Einfachheit der Webentwicklung wird untergraben.
Analyse der Struktur der Shadcn-Radio-Buttons
- Shadcn implementiert Radio-Buttons über die beiden Komponenten
<RadioGroup> und <RadioGroupItem>.
- Jede Komponente umschließt Primitives aus
@radix-ui/react-radio-group und verwendet das CircleIcon aus lucide-react.
- Enthalten sind mehr als 45 Zeilen Code, 3 externe Imports und ein Styling mit mehr als 30 Tailwind-Klassen.
- Für die Darstellung eines einfachen Kreises wird sogar eine SVG-Icon-Bibliothek eingebunden.
- Eine Funktion, die sich auch durch
border-radius in CSS oder ein <circle>-Element ersetzen ließe.
Die Rolle von Radix UI
- Das von Shadcn verwendete Radix ist eine niedrigstufige UI-Komponentenbibliothek mit Fokus auf Barrierefreiheit und Anpassbarkeit.
- Die Implementierung der Radio-Gruppe in Radix umfasst rund 215 Zeilen React-Code und importiert 7 Dateien.
- Radix ergänzt ein
<button>-Element mit ARIA-Attributen, damit es sich wie ein Radio-Button verhält.
- Das erste Grundprinzip der ARIA-Nutzung des W3C besagt jedoch: „Wenn möglich, verwende native HTML-Elemente.“
- Radix folgt diesem Prinzip nicht und verwendet statt
<input> einen wiederverwendeten Button.
- Innerhalb eines
<form> wird zusätzlich ein verstecktes <input type="radio"> eingefügt, was die Konsistenz weiter verringert.
Eine einfache Alternative mit CSS
- Native HTML-Radio-Buttons lassen sich mit
appearance: none, ::before, :checked, border-radius usw. problemlos stylen.
- Im Beispielcode wird eine vollständige Anpassung ohne Abhängigkeiten, JavaScript oder ARIA-Attribute umgesetzt.
- Derselbe Effekt lässt sich auch mit Tailwind umsetzen.
- Die Vorstellung, dass „das Styling von Radio-Buttons schwierig ist“, ist ein Problem der Vergangenheit; heute ist mit reinem CSS eine ausreichende Kontrolle möglich.
Das Problem der aufaddierten Komplexität
- Wer Shadcn und Radix zusammen verwendet, muss zwei Bibliotheken und Hunderte Zeilen Code verstehen.
- Für einen einzigen simplen Radio-Button werden mehrere KB JavaScript zusätzlich geladen.
- Nutzer müssen auf das Parsen und Ausführen von JS warten, nur um einen Button umzuschalten.
- Eine solche Struktur führt zu höherer kognitiver Belastung, mehr Fehlermöglichkeiten und schlechterer Web-Performance.
Zurück zur Einfachheit
- Der Browser stellt Radio-Buttons bereits nativ bereit, und eine einzelne Zeile wie
<input type="radio" name="beverage" value="coffee" /> reicht aus.
- Unnötige Abstraktionen und der Einsatz verschachtelter Bibliotheken schaden der ursprünglichen Einfachheit und Effizienz der Webentwicklung.
- Selbst bei kleinen UI-Elementen ist ein Design, das Basisfunktionen wiederverwendet, sowohl für Wartbarkeit als auch für Performance vorteilhafter.
Noch keine Kommentare.