React Hook Form ist eine Bibliothek, die das Handling von Formularen in React vereinfacht. Sie ist sehr leichtgewichtig und hat keine Abhängigkeiten. Sie ist also eine gute Alternative zu Formik, das eine ähnliche Funktionalität bietet, aber deutlich mehr Code mit sich bringt.
Im folgenden Video zeigen wir, wie man die populäre Bibliothek React Hook Form in einem React+KoliBri-Projekt einsetzen kann.
Bei der Entwicklung von KoliBri ist die Frage aufgekommen, welche Aria-Attributen bei den Button- und Link-Komponenten unterstützen werden sollen.
In der folgenden Tabelle wir eine Übersicht über die Unterschiede dargestellt:
| Merkmal | Link | LinkButton | Button | ButtonLink | ToogleButton1 |
|---|---|---|---|---|---|
| Design | Link | Button | Button | Link | Button |
| Semantik | a | a | button | button | input |
_ariaControls | ➖ | ➖ | ➕ | ➕ | ❓ |
_ariaCurrent2 | ➕ | ➕ | ➖ | ➖ | ❓ |
_ariaExpanded | ➖ | ➖ | ➕ | ➕ | ❓ |
_ariaSelected | ➖ | ➖ | ➕ | ➕ | ❓ |
_disabled | ➖ | ➖ | ➕ | ➕ | ➕ |
_href | ➕ | ➕ | ➖ | ➖ | ➖ |
_on | ➕ | ➕ | ➕ | ➕ | ➕ |
_value | ➖ | ➖ | ➕ | ➕ | boolean |
focus() | ➕ | ➕ | ➕ | ➕ | ➕ |
1 Der Toogle-Button wurde als Variante der Checkbox umgesetzt, weil es ein Schalter mit maximal zwei Zuständen (entweder "an" oder "aus") ist.
2 Das _ariaCurrent-Attribut wird zukünftig über ein Event statt ein Property gesetzt.
Hinweis: Dieser Artikel wurde zu Teilen durch ChatGPT generiert. Die Inhalte wurden von einem Menschen überprüft und ggf. angepasst.
Im Laufe der Jahre weisen die Benennung und Semantik in HTML teilweise große Unterschieden auf. Aufgrund der Abwärtskompatibilität von HTML sind Korrekturen und Änderungen nur äußerst schwierig umzusetzen. Diese Situation hat zu unzähligen Best Practices und How-to's geführt, die versuchen, auf unterschiedliche Weise ähnliche Anforderungen umzusetzen. Angesichts des wachsenden Bewusstseins für Barrierefreiheit und den damit verbundenen gesetzlichen Anforderungen gewinnt die Semantik jedoch eine immense Bedeutung. Hier kommt KoliBri ins Spiel, indem es einen barrierefreien Webcomponent-Standard auf HTML schafft und gleichzeitig für eine einheitlichere und somit leicht erlernbare Verwendung sorgt.
Die Verwendung eines einzigen Property-Namens für gleichartige Eigenschaften ist ein wichtiger Grundsatz, der die Konsistenz in der Entwicklung fördert. Durch die einheitliche Benennung wird vermieden, dass Entwickler:innen nach unterschiedlichen Bezeichnungen für ähnliche Eigenschaften suchen müssen. Dies erhöht die Effizienz und die Erlernbarkeit des Codes erheblich.
Wenn möglich, sollen gleiche Property-Namen auch einheitliche Beschreibungen haben. Klar formulierte und konsistente Beschreibungen erleichtern es Entwickler:innen, die Funktionalität einer Eigenschaft zu verstehen und richtig einzusetzen. Durch die Verwendung einheitlicher Beschreibungen wird die Dokumentation vereinfacht und die Fehleranfälligkeit reduziert.
Ähnlich wie bei den Beschreibungen ist es wünschenswert, dass gleiche Property-Namen auch einheitliche Typen haben, sofern dies möglich ist. Einheitliche Typen erleichtern die Verwendung und das Verständnis der Eigenschaften und tragen zur einheitlichen Handhabung bei.
Um die Komplexität zu reduzieren und die Erlernbarkeit zu verbessern, ist es wichtig, die Anzahl der unterschiedlichen Eigenschaften, Beschreibungen und Typen zu minimieren. Durch eine bewusste Entscheidung, nur die notwendigen und relevanten Eigenschaften zu definieren, wird der Entwicklungsprozess schlanker und effizienter. Dies erleichtert auch die Wartung und Weiterentwicklung der Komponenten über die Zeit hinweg.
Die Verwendung von einheitlichen Eigenschaften in der Entwicklung von Komponenten ist ein entscheidender Faktor für eine bessere Erlernbarkeit und Effizienz. Durch die Einhaltung der definierten Anforderungen, wie die Verwendung eines einzigen Property-Namens, einheitliche Beschreibungen und Typen sowie die Minimierung von Unterschieden, können Entwickler:innen einfacher und schneller mit den Komponenten arbeiten. Dies führt zu qualitativ hochwertigerem Code, einer verbesserten Zusammenarbeit und letztendlich zu einer besseren Benutzererfahrung. Indem wir die Bedeutung der Einheitlichkeit in der Entwicklung betonen, können wir die Barrierefreiheit und die Qualität unserer digitalen Lösungen weiter vorantreiben.
Und das Beste ist, alle Verbesserungen fließen soweit möglich schon in Version 1 ein und bereiten damit eine möglichst harmonische Migration auf Version 2 vor.