Bevor ich anfange, euch über Material-UI(MUI) und dessen Möglichkeiten zu berichten, möchte ich ein paar Monate in die Vergangenheit springen, und zwar zum Münster Hack 2022. Wie ihr bestimmt bereits wisst, hat unser Sozialkompass dort seinen Ursprung und weil wir zu dem Zeitpunkt noch sehr viel unerfahrener waren als jetzt, war die Wahl eines geeigneten React Frameworks sehr spontan. Wir haben uns damals für Bootstrap entschieden, genau wie Material-UI auch eine Frontend-UI-Bibliothek. In den zwei Tagen des Hackathons haben wir unser Bestes gegeben, so viel wie möglich aus Bootstrap für unsere Anforderungen rauszuholen, am Ende des Hackathons, das wir für die weitere Arbeit an dem Projekt jedoch vielleicht eine andere Bibliothek besser gebrauchen können. Nach einer genauen Abwägung von Vor- und Nachteilen haben wir uns für MUI für den weiteren Gebrauch entschieden. Selbstverständlich ist Bootstrap ein gutes Frontend-Framework, für uns passte MUI aber besser.
Genug jetzt aber von der Vergangenheit, was kann MUI denn überhaupt so alles? Ganz generell ist MUI eine speziell für React angelegte Frontend-Komponenten-Bibliothek, die auf der Designsprache von Google basiert. Für das Design heißt das minimalistische, attraktive und benutzerfreundliche Benutzeroberflächen für unseren Sozialkompass. Diese lassen sich auch leicht implementieren, denn MUI besitzt eine große Auswahl an bereits vorgefertigten Komponenten, das sind z. B. Buttons oder auch Popover-Komponenten. Diese vorgefertigten Komponenten lassen sich weiterhin auch extensiv individuell anpassen, sodass unsere Design-Language auf diese Komponenten angewendet werden kann. Dank der ausführlichen Dokumentation von MUI hat sich der Einstieg für uns auch ziemlich leicht gestaltet, auf der offiziellen Seite steht eine große Menge an Ressourcen zur Verfügung und auch Tutorials aus dem Internet haben wir genutzt, um das meiste von MUI für unsere Zwecke herauszuholen.
Auch für das mobile Layout des Sozialkompass ist MUI ideal geeignet, durch eine Verwendung von responsivem Design werden die Komponenten automatisch an die passende Bildschirmgröße angepasst. Bei einigen Randfällen, bei denen die automatische Anpassung nicht ideal geklappt hat, konnten wir Breakpoints festlegen. Diese Breakpoints sind eine festgelegte Bildschirmgröße, ab der auch die Größe der Komponente dann angepasst wird.
Damit unser Code bei den vielen Komponenten noch überschaubar bleiben kann, müssen viele dieser Komponenten ausgelagert werden. Wir haben uns dafür entschieden, die Boxen sowie die genutzten Schriften in einer Dictionary zu sammeln. Dort werden diese in einer Datei deklariert und mit den benötigten Eigenschaften angepasst. Auch Buttons oder ähnliche Komponenten, die mehrmals bei uns verwendet werden müssen um einen beschaulichen Code zu garantieren, ausgelagert werden. Nach dem Importieren können noch einzelne Aspekte wie Höhe oder Breite angepasst werden, doch Dopplungen und langer Code können so einfach vermieden werden und einheitliches Design wird garantiert.
Die Kombination aus den vorgefertigten Komponenten und der benutzerfreundlichen sowie auch ausführlichen Dokumentation hat MUI zu der idealen Wahl für uns gemacht. Generell wurde der Krampf uns mit CSS-Styling zu arbeiten erspart, besonders bei dem Aufbau der mobilen Ansicht. Wie bereits erwähnt, war auch die Arbeit dank der ausführlichen Dokumentation benutzerfreundlich und einfach. Für alle, die auf der Suche nach einer grandiosen Frontend-Bibliothek für React sind, kann ich nur MUI ans Herz legen.
