ComponentLib Banner

ThomannUI: Der Beginn einer Component Library

Julian Kern, Fullstack Developer - Oct 11, 2020

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.

ThomannUI Styleguidist Screenshot

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:

Codebeispiel Buttons

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.

Beispiel-Test

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:

thomann.de Login

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

thomann.de Login im Inspector

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.

Our offices

Remote. Distributed. Together.

Work from home or any of our offices. Our team is 100% remote and will stay this way. You need a stable internet connection and your laptop.

Treppendorf

Our Thomann headquarters. Just a few minutes drive outside of Bamberg. Come by to visit our shop or meet with colleagues apart from tech & data.

Berlin

Our thomann.io office in the heart of Berlin. Easily reachable at Rosenthaler Platz. Perfect for workshops and team building.

Erlangen

Our thomann.io office in Nuremberg's metropolitan area. Just a few minutes by foot from Erlangen station. Nice, quiet location to do some deep work.

Our thomann.io Blog

May 13, 2022 - Ralph Cibis

Thomann.io goes Cyberpunk

We went fully cyberpunk! Our branding community's last side and heart project.

Jan 3, 2022 - David Beuchert

DIY software: Why it's the one and only way to do it and everyone else is wrong

My provoking approach wooing for more in-house development.

Dec 8, 2021 - Nadine

Going fully responsive

Why we redesigned our shop - and why purple's the new blue.

Oct 18, 2021 - Julia Manger

Open Space 2021

Summer 2021 - Home office, lockdown, a fourth wave and: huh?! An Open Space!

Aug 6, 2021 - Stefan Stammler

Bits, Beats, Ops-Team

Someone needs to bring our shop online. This is our mission.

Jul 7, 2021 - Ralph Cibis

Hello, Webteam

We are the Thomann Web Team. We create thomann.de and the Thomann App.

Jan 27, 2021 - Nadine

What Kan Kanban do

The idea behind moving cards - with a crispy epilogue.

Oct 11, 2020 - Julian Kern

ThomannUI: Der Beginn einer Component Library

Ein Einblick in die Component Library auf Basis von React von Julian Kern

Sep 7, 2020 - Francesco

Guitars to Oslo or: The Art of Offering the Right Shipping Methods

Our developer Francesco provides you with behind the scenes insights

Jul 14, 2020 - Thomas Tischner

How Thomann is mastering the move to Kubernetes

Our Sysadmin Thomas tells you from his day-to-day work

Dec 9, 2019 - Julian Kern

thomann.io v2

Frisch aus dem Kühlregal: Hier ist das neue Frontend!

Nov 4, 2019 - Domi

Thomann Dev Camp 2k19

This year under the Slogan "ready for our collective take-off".

Aug 24, 2018 - Julia Manger

Das Thomann Dev Camp

Wir wissen, was das Dev Team letzten Sommer gemacht hat. Ein Einblick.

Severe case of I-wanna-work-with-you?

...or any questions to us? Give Anni a call!

Welcome to Treppendorf, welcome to Thomann Music

We're inspiring and enabling people to speak music, everywhere. 24/7.