ComponentLib Banner

Autor-Facts

NameJulian Kern
PositionFullstack Developer
Twitter@juliankern
GitHub/Keyes
11. Oktober 2020

ThomannUI: Der Beginn einer Component Library

Wer sich thomann.de schon mal in den Entwicklertools seines Browsers angeschaut hat, wird festgestellt haben, dass wir seit einiger Zeit vermehrt auf React.js setzen. Das passiert zum Beispiel auf der mobilen Webseite im Warenkorb und auf den Wunschlisten – auf der Hauptseite im Checkout, in Stompenberg-FX, sowie im Woodpicker und Cableguy. Außerdem werden unsere Apps nach und nach auf React Native umgebaut. Wir haben also schon einige Expertise, die aber sowohl personell gesehen als auch im Code noch sehr verteilt ist.

Ein weiteres Thema, das uns schon seit einiger Zeit umtreibt, ist die Optik unserer Seiten. Über die Jahre wurden die Shops natürlich immer wieder erweitert und modernisiert, bereits bestehende Seiten aber nicht grundsätzlich ebenfalls "nachgezogen". Und so kommt es, dass man in bestimmten Fällen noch auf Seiten landet, die doch teils deutlich anders aussehen, als unsere aktuell übliche Designsprache vorsieht.

Damit das nicht auch in Zukunft mit unseren React-Seiten passiert und wir sie zumindest visuell alle "wie aus einem Guss" haben, wurde die Idee einer so genannten "Component Library" geboren. Also einem Ort, an dem wir immer wiederkehrende Elemente, zum Beispiel Buttons und Input-Felder, zentral entwickeln und auch weiter-entwickeln können. Da diese Component Library von allen React-Komponenten und -Seiten benutzt wird, können wir hier mit einer einzelnen Änderung alle Seiten gleichzeitig an ein zukünftiges neues Design anpassen.

Intern gibt es schon seit Anfang 2019 Bemühungen, unseren Code über die verschiedenen Plattformen hinweg zu vereinheitlichen. Zum einen gibt es das TWF (steht hier für das T homann W eb F rontend), zum anderen gibt es eine neue Service-Architektur. In einem Service enthalten ist der Backend-Code, also beispielsweise Anfragen an die Datenbanken oder externe Anbieter, falls nötig. Im TWF dagegen sind Komponenten enthalten, die das Frontend bilden. Also die Anfragen an Services, Templates, aber auch JavaScript und CSS. Bisher beschränkte sich das vor allem auf Komponenten, die zeitgleich mit dem selben Code auf mehreren Plattformen benutzt werden sollen, sowohl im Front- als auch im Backend. Das ThomannUI erweitert diesen Ansatz um reine Frontend-Komponenten wie Buttons und Inputs, und bildet hier gleichzeitig einen Standard für die visuelle Gestaltung: zukünfig sollen unsere Shops auch visuell enger zusammenwachsen.

Die Technik

Technisch setzt das ThomannUI dabei voll auf React. Nicht unbedingt weil es gerade Trend ist, sondern weil wir wie beschrieben schon einige Expertise durch bestehende Umsetzungen haben und React von einigen namhaften Unternehmen unterstützt und entwickelt wird – hier ist die Zukunftssicherheit also gewährleistet.

Dabei war uns auch wichtig, das neue UI für alle einsehbar zu machen: Entwickler müssen sich nicht erst in den Code einlesen oder eine Dokumentation studieren um zu wissen, wie sie eine Selectbox nutzen können. Designer sehen sofort, welche Elemente schon exisitieren und ob diese in ihre Konzepte passen, oder welche noch hinzugefügt werden müssen. Zusätzlich kann schon bei der Entwicklung geprüft werden, ob Look & Feel in die richtige Richtung gehen. Letzteres wurde bisher vor allem mit Code-Sandkästen ausprobiert und auch nicht jeder fand die Zeit dafür.

Aus diesem Grund setzt die Component Library hier auf den React-Styleguidist.

Hier kann sich der Entwickler sofort ein Codebeispiel schnappen, um ein Element zu integrieren. Neue Komponenten werden einfach mit einem kurzen Codebeispiel im Markdown-Format versehen, der Styleguidist rendert daraus automatisch die Vorschau:

Außerdem sind im Aufbau der Component-Library auch automatisierte Tests vorgesehen, die prüfen ob die Komponenten wie vorgesehen funktionieren. Einfachstes Beispiel: wenn ich dem Button die appearance "light" gebe, soll er die CSS-Klasse "twf-button__light" bekommen. Wenn das der Fall ist, ist der Test bestanden. Die Tests selbst laufen mit Jest, zusätzlich gibt es noch Tests ob der Code unserem Codestyleguide folgt, für JavaScript/JSX via eslint, für das LESS mit stylelint. Schlägt einer dieser Tests fehl, wird ein Deployment verhindert, sodass live nur völlig intakte Versionen benutzt werden können.

Dadurch, dass der Ordner der Komponente alle Bestandteile - die Komponente selbst, ihr LESS, das Readme für den Styleguide sowie den Test - beinhaltet, ist der Aufbau ausgesprochen simpel, und ermöglicht so eine einfache Portierbarkeit von Bestandteilen.

Die Anwendung

Das ThomannUI kommt schon an mehreren Stellen erfolgreich zum Einsatz. Die erste war die Login-Seite auf thomann.de:

In den Entwicklertools des Browsers erkennt man das gut an den CSS-Klassen, die alle ein "twf-"-Prefix haben:

Die Zukunft

Zukünftig soll das ThomannUI natürlich möglichst überall eingesetzt werden. In Sachen Zusammenarbeit hat sich schon herauskristallisiert, dass das Vorgehen eine gute Idee ist: jeder, der Lust hat kann daran mitarbeiten und die Ergebnisse kommen auch allen anderen zu Gute, die sich mit React vielleicht nicht so gut auskennen und nur Komponenten benutzen wollen. Dadurch, dass die Komponenten gut voneinander getrennt sind, ergeben sich auch nur selten Konflikte im Code.

Die Tests auf Funkionalität und Code-Style sorgen für eine hohe Qualität bei unseren Releases und Designer können noch während der Entwicklung Zwischenstände prüfen und ggf. Änderungen einbringen.

Langfristig können im ThomannUI natürlich noch viel mehr Komponenten als die allernötigsten Basics landen. Hier wird die Herausforderung sein, auch komplexe Komponenten, die möglicherweise aus mehreren Bestandteilen zusammengesetzt sind, einfach darzustellen und testbar zu halten. Aber Architektur war in der (Frontend-) Softwareentwicklung schon seit jeher keine leichte, aber sehr wichtige Aufgabe.

thomann.io v2

thomann.io v2

Frisch aus dem Kühlregal: Hier ist das neue Frontend!
Thomann Dev Camp 2k19

Thomann Dev Camp 2k19

Dieses Jahr meldet sich das Dev Camp unter dem Motto “gemeinsam abgehoben sein”
Stylesheets und Stylesheet Präprozessoren am Beispiel LESS

Stylesheets und Stylesheet Präprozessoren am Beispiel LESS

Das WWW ohne Stylesheets! Das wäre eine triste Ansammlung von HTML.
Introducing: The Woodpicker

Introducing: The Woodpicker

Developing a Highly Specialized Tool for a 'Special' kind of Musician