17 May 2023 #PEOPLE STORIES

Vom Design zum Deployment – So entsteht das UI im DOUGLAS Online Shop

Kevin Koessl

Kevin Kössl
Frontend Engineer
4 min Lesezeit

Hey, ich bin’s der Neue! Selbst nach drei Monaten in der E-Commerce Abteilung von DOUGLAS lerne ich neue Gesichter kennen und bin diesen Satz immer noch nicht ganz losgeworden. So wie ich mich meinen neuen Kolleg*Innen vorstelle, stelle ich mich jetzt auch gerne Euch vor. Ich heiße Kevin und habe im März 2023 als Frontend Engineer bei DOUGLAS gestartet, um die Weiterentwicklung des Online Portals rund um die Core Shop Experience zu unterstützen.

Douglas-Shop-in-den-Chrome-Devtools-II
Douglas Shop in den Chrome Devtools

Meine Erwartungen an DOUGLAS

Beim Lesen der Stellenausschreibung war mir gleich klar, dass ich es mit DOUGLAS versuchen möchte. Als großes Unternehmen mit einer etablierten E-Commerce Plattform habe ich mir von der Arbeit insbesondere gut organisierte Arbeitsabläufe, einen interessanten Tech-Stack und mehr Verständnis für meine Arbeit erhofft. Um mich voll und ganz auf meine Aufgaben als Entwickler konzentrieren und daran wachsen zu können, war mir insbesondere wichtig, dass ich mich voll und ganz auf die Expertise meine Kolleg*Innen verlassen kann.

Das Frontend im Detail

Der Tech-Stack hält, was er verspricht. Das umfangreiche React Frontend bietet mir die Möglichkeit, neue Techniken zu erlernen, die mich als Entwickler weiterbringen. Insbesondere spannend ist dabei die Art & Weise, wie das Frontend eine geteilte Codebasis für eine Vielzahl verschiedener Plattformen bereitstellt. Durch die ausgeklügelten Build-Prozesse unserer DevOps können wir Frontend Entwickler*Innen den selben Code für die verschiedenen Webshops im Ausland wie z.B. in Belgien und den Niederlanden, aber auch für die verschiedene Plattformen wie z.B. die iOS und Android App von DOUGLAS wiederverwenden und uns bei Anpassungen auf die Kernpunkte fokussieren. Interessant ist dabei auch, dass der gleiche Code ebenfalls die Basis für unsere interne Bella Plattform darstellt, die von unseren Kolleg*Innen in den Stores genutzt wird.

Unser Workflow

Bevor ich bei DOUGLAS angefangen habe, schwirrte eine Frage ständig durch meinen Kopf: Wie also kommt ein neues UI-Element nun in den Online-Shop? Jetzt kann ich es euch erklären.
Sobald die Planung der Features in einer Roadmap festgehalten wurde, wird das Design von unseren Kolleg*Innen in der UX-Abteilung konzipiert und als Figma Prototyp ausgearbeitet. Gibt es mehrere verschiedene Möglichkeiten, die selbe User Story zu implementieren, werden in dieser Phase ggf. auch A/B-Tests durchgeführt, um die beste Variante zu ermitteln. Nachdem das fertige Design zur Entwicklung an uns Devs übergeben wurde, startet auch schon die Entwicklung bis die Tasten glühen!

And here comes the magic. Denn sobald ein Feature implementiert wurde, geht es los mit dem Deployment Prozess.

Mit jedem Pull-Request wird ein automatischer Build-Vorgang durchgeführt, der die Code-Qualität prüft und Unit-Tests mit Jest auf jeder einzelnen Komponente durchführt. Geht hier alles klar, reicht ein Knopfdruck um die Azure Pipeline zu starten, die einen dedizierten Testserver installiert, auf dem wir und das QA-Team das entwickelte Feature rigoros testen können. In vielen Fällen gehört hier auch das End-To-End Testing mit Playwright dazu. Dieses Tool klickt sich automatisch durch den Shop und berichtet uns über mögliche Bugs und Qualitätsmängel, die wir bei den manuellen Tests übersehen haben. Da schlägt mein Entwickler-Herz gleich höher! Für Test-Zwecke haben wir hier ebenfalls die Möglichkeit, dedizierte Testdaten wie z.B. Produkte mit besonderen Eigenschaften per IMPEX-Builder zu erzeugen. Diese rigorose Teststrecke gibt mir als Entwickler die Sicherheit, dass meine Features robust und frei von Bugs sind.

Und jetzt geht’s Live

Noch ein-zwei Klicks und schon kann losgehen. Die nächste Azure Pipeline schnappt sich den Code mit dem neuen Feature und bringt es auf alle Shops und Apps, damit unsere Kunden ein noch besseres Kauferlebnis haben. Wenn sich das Feature letztendlich auch auf dem Produktivsystem bewähren kann, wird es final in den Quellcode übernommen. Wie cool das ist, muss ich ja keinem erklären, oder?

Aber noch viel cooler ist es, dass ich mich hier bei DOUGLAS mit einem Haufen von Expert*Innen über die verwendeten Technologien und Tools austauschen kann und jeder ein Verständnis dafür hat, dass es in der Software Entwicklung trotz bewährter Prozesse manchmal auf und ab geht.
Ich bin gespannt, was die Zukunft bringt!