Lebensbaum

Der Auftraggeber

Aus dem kleinen Bioladen Lebensbaum, der bereits 1979 gegründet wurde, wuchs mit den Jahren ein mittelständisches Unternehmen heran, das sich auf die Herstellung von Tee, Kaffee und Gewürzen in Bioqualität spezialisiert. Die Synthese aus natürlichem Genuss, ökologischer Weitsicht und sozialer Verantwortung ist erfolgreiches Unternehmenskonzept. Dafür wurde Lebensbaum mehrfach ausgezeichnet und ist heute Marktführer im Bio-Fachhandel.

Ausgangslage

Bislang bestand der Internetauftritt von Lebensbaum aus zwei voneinander unabhängigen Systemen. Der Corporate Webseite, die Produktbeschreibungen, weiterführende Informationen zu diesen und allgemeine Einblicke in das Unternehmen umfasste, sowie dem Onlineshop, über den die Kunden bisher ihre Waren bestellen konnten. Die Corporate Webseite wurde mit dem Drupal CMS umgesetzt. Der Onlineshop hingegen über ein separates Magento Shopsystem.

Die steigende Bedeutung eines nutzerfreundlichen Onlineshops machte es 2021 nötig, einen Relaunch zu starten. Ziel war es, die bereits bestehenden Systeme zu einem einzigen zu verheiraten, um Shop-Funktionalitäten und informative Inhalte auf einer Seite darzustellen. Dadurch wird dem Kunden ein Maximum an Usability geboten. Die neue Webapp sollte außerdem mit modernen Technologien wartbar gemacht werden und architektonisch flexibel sein.

Headless in die Zukunft

Bereits seit 2014 arbeiten Lebensbaum und Monday Consulting eng zusammen und entwickeln gemeinsam den Webauftritt für das Bio-Unternehmen weiter. Auch der letzte Relaunch der Corporate Webseite 2018 lag in unseren Händen. Über 1600 Seiten waren bereits im Drupal optimal redaktionell gepflegt und an die neuen Designwünsche angepasst. Um eine aufwendige und komplexe Migration der redaktionellen Inhalte in eine neue E-Commerce-Plattform zu vermeiden, empfahl Monday Consulting eine Headless-Architektur. Zusätzlich konnte man sich somit technologisch von PHP und den beiden OpenSource Plattformen Drupal und Magento lösen.

Bei einer Headless-CMS-Architektur sind Inhalte und Darstellung technisch voneinander getrennt. Drupal übernimmt weiterhin die Verwaltung der Inhalte, die anschließend von einer modernen Next.js Anwendung ausgespielt werden. Durch aktuelle Technologien, wie React und einer statischen HTML Pre-Generierung, fällt nicht nur die Entwicklung leichter, auch das Einhalten von Best Practices wird vereinfacht. Die Daten werden seitens Drupal über eine API-Schnittstelle zur Verfügung gestellt und anschließend im gewünschten Design in der neuen Webapp dargestellt. Auf diese Weise ist die Webapp an sich schlank konstruiert und somit maximal performant.

Während die redaktionellen Inhalte aus Drupal statisch ausgegeben werden, wird die Webapp mit dynamischen Inhalten aus Magento angereichert. So stehen neben dem Namen und der Zutatenliste eines Produktes die Shop-Daten in Echtzeit zur Verfügung. Dieser hybride Ansatz erlaubt es, dass die Webseite zum Beispiel bei Ausfall des Shopsystems weiterhin funktionsfähig ist und Inhalte ausspielt. Lediglich der Warenkorb sowie die Kaufabwicklung sind währenddessen deaktiviert. Der statische Teil der Seite ist somit beinahe komplett ausfallsicher.

Für den User ist besonders der statische Ansatz auffällig, da Informationen nicht erst vom Server erstellt werden müssen, sondern sofort vorgeneriert verfügbar sind. Die React-Anwendung auf Basis von Next.js beschleunigt die Seite im Vergleich zur vorherigen Version zusätzlich, was insbesondere beim Navigieren sowie bei Interaktionen, beispielsweise beim Filtern von Produkten, direkt ins Auge fällt. Gleichzeitig nimmt die Entwicklungsgeschwindigkeit zu, da mit modernen Frameworks und deklarativer Programmierung Ideen sehr viel schneller realisiert werden können. Zusätzlich erhalten die Entwickler ein erhöhtes Maß an Sicherheit, da die neue Architektur in TypeScript umgesetzt wurde. Somit kann eine Vielzahl an typischen Programmierfehlern frühzeitig vermieden werden.