Vorweg kurz eine Info, um Verwirrung zu vermeiden: Microsoft fasst unter ihrem neuen Fluent UI ihre UI Fabric und Stardust-GitHub-Repos zusammen. Sie wollen damit ein einheitliches Design-System für Web-Apps erstellen. Falls ihr also einen der alten Namen kennt, dann wisst ihr jetzt, was aus ihnen geworden ist.
Fluent UI
Was macht Fluent UI und warum wollen wir es jetzt in unserem Kunden-Projekt einsetzen? Bisher nutzen wir in unserem React-Frontend Material-UI. Kennt ihr bestimmt. Das bringt für fast jeden Anwendungsfall fertige Komponenten mit und ist alles in allem eine runde Sache.
Aber etwas für uns sehr wichtiges fehlt: Native Unterstützung für Keyboard-Navigation durch die App.
Natürlich kann man händisch Tabindizes setzen, aber es wäre doch schön, wenn das einfach so funktionieren würde, oder?
Killer-Feature Keyboard-Navigation
Wir haben uns also in den Weiten des Internets umgeschaut und ein Kollege ist auf Fluent UI gestoßen. Das wird von Microsoft zum Beispiel für Office 365 oder auch für ihre ToDo-App eingesetzt. Und eigentlich für alle anderen MS-Web-Dinge.
Fluent UI arbeitet mit FocusZones. Innerhalb dieser Zonen kann man einfach mit der Tastatur navigieren. Mit der Enter-Taste kann man dann zum Beispiel einen Menüeintrag auswählen und der Tastatur-Fokus springt in den Inhalt, der sich geöffnet hat. Genau was wir wollen.
Seht euch dazu mal das Listen-Beispiel der FocusZone an und navigiert mit Pfeiltasten und Tab darin herum.
… und noch viel mehr
Als wir uns das Framework genauer angesehen haben, haben wir noch weitere Dinge gefunden, die uns gefielen. Das beste Beispiel hierfür sind die Listen, die Fluent UI out-of-the-box mitbringt. Diese bringen gleich ein Virtualization-Feature mit, so dass endloses Scrollen und LazyLoading der Daten möglich ist. Trotzdem funktioniert filtern, sortieren, auswählen, usw. wie man sich das vorstellt.
Bei Navigation innerhalb von tief geschachtelten Listen können die Pfade direkt als Breadcrumbs dargestellt und entsprechend des verfügbaren Platzes verkürzt werden. Generell können Navigations-Pfade hinter drei-Punkte-Buttons verschwinden, wenn der Platz nicht mehr reicht um alles darzustellen.
Mehr Informationen gefällig?
Das sind viele sehr nützliche UI-Features, die wir da auf den ersten Blick gefunden haben. Jetzt werden wir also evaluieren, unsere App von Material-UI auf Fluent UI umzustellen. Es wird spannend sein zu sehen, wie sich unser Eindruck von dem neuen UI-System entwickelt, wenn wir während der Umstellung genauer unter die Haube schauen. Wenn wir uns ein Bild verschafft haben, werden wir natürlich einen Artikel nachliefern, in dem wir Material-UI und Fluent UI vergleichen.
Falls ihr euch Fluent UI jetzt auch einmal anschauen wollt, dann schaut euch die Component-Dokumentation an oder macht das Microsoft Frontend Bootcamp – ab Step 2 wird dort Fluent UI abgedeckt.
Schreibe einen Kommentar