Entwicklung einer E-Commerce-Plattform

Die sonnen GmbH ist ein international agierendes Unternehmen im Bereich der alternativen Energien und weltweit Marktführer im Photovoltaik-Speichermarkt. sonnen baut intelligente Batteriespeicher, mit denen Hausbesitzer den Strom aus ihrer Solaranlage auf dem Hausdach selbst speichern können. Alle Kunden sind über die sonnenCommunity miteinander vernetzt. Über dieses virtuelle Kraftwerk können sie den von ihrer Solaranlage produzierten Strom, den sie selbst nicht verbrauchen, untereinander teilen. So wird die dezentrale Energieerzeugung, kombiniert mit moderner Batteriespeichertechnik und digitaler Vernetzung, zu einem zukunftsweisenden Modell.

JAMstack + Drupal Content-HUB + Nuxt.js

Im Zentrum der Neuentwicklungen stand der Aufbau einer Plattform, die es sonnen ermöglicht, schnell und flexibel auf Veränderungen zu reagieren. An das mit vue.js/nuxt entwickelte Frontend haben wir zahlreiche externe Dienste via APIs angebunden. Verschiedene Länderinstanzen können über je eigene Drupal-Installationen bedient werden. Sowohl neue Angebote als auch mehrsprachige Websites und Shops für neue Länder, in denen sonnen-Produkte erhältlich sind, können damit in kürzester Zeit erstellt werden. Jede Website basiert auf einem eigenen unabhängigen Drupal-“Content”-Backend. Die Drupal-Codebasis und -Konfiguration wird von den Drupal-Instanzen gemeinsam genutzt, mit geringfügigen Konfigurationsunterschieden für sprachspezifische Einstellungen. Drupal dient so als „Content-HUB“ für einen auf Nuxt.js basierenden statischen Website-Generator.

Medien-Assets wie Bilder und Dokumente werden für alle Sites in einem zentralen und unabhängigen Drupal-“Medien”-Backend verwaltet. Medienentitäten werden zwischen dem Medien-Backend und allen Inhalts-Backends mittels JSON:API synchronisiert. Mediendateien (Bilder, Bildderivate, Dokumente) werden zusätzlich vom Medien-Backend mit AWS S3 synchronisiert, das als CDN dient.

Das entkoppelte Frontend wird mit Vue.js implementiert. Ein regelmäßiger Build-Prozess ruft den Inhalt aus den Backends in einem benutzerdefinierten JSON-Format ab, rendert die Website vor und lädt sie in das CDN hoch (AWS S3 + Cloudfront). Links zu Mediendateien werden automatisch durch CDN-Links zu den entsprechenden Dateien ersetzt, die vom Medien-Backend auf AWS S3 hochgeladen wurden.

Alle Drupal-Backends sind nicht öffentlich zugänglich. Auch wenn sie abgeschaltet werden laufen die Websites stabil weiter. Die erste Website, die auf diesem JAMstack basiert, wurde im März 2019 gestartet. Derzeit laufen die folgenden Websites auf diesem Stack:

https://sonnen.de
https://sonnen.at
https://sonnen.it
https://sonnenusa.com
https://sonnengroup.com
https://sonnen.com.au
https://sonnenbatterie.co.uk

Ziele und Ergebnisse

Hauptziel war die Erstellung einer modernen, internationalen Unternehmenspräsenz für sonnen, die sich leicht in externe Dienste integrieren lassen. Vue.js wurde ausgewählt, weil es eine hervorragende Unterstützung für moderne komponentenbasierte Website-Designmuster bietet und weil es die Interaktion mit dynamischen externen Diensten und APIs sehr einfach macht. Drupal war auf der Backend-Seite die perfekte Wahl, da es strukturierte Inhalte erstellen und liefern kann, die sich gut in die Frontend-Komponenten integrieren lassen.

Ein weiteres sehr wichtiges Ziel war die Leistung, Skalierbarkeit, Zuverlässigkeit und Sicherheit der implementierten Lösung. Aus diesem Grund werden die Websites mit Nuxt.js vorgerendert, und alle Seiten, Stylesheets, JavaScript und Media Assets werden als statische Dateien über ein CDN geliefert. Dynamische Funktionalitäten werden mit Hilfe von JavaScript und externen Diensten integriert.

Die nachhaltige Wartbarkeit wurde durch die Verwendung einer gemeinsamen Codebasis für alle Backends mit nur geringen Unterschieden in den Spracheinstellungen und durch ein einziges Frontend mit nur wenigen Stylesheet-Schaltern erreicht, die einige individuelle Merkmale und Besonderheiten der verschiedenen nationalen Websites berücksichtigen. Eine erkennbare visuelle Sprache über nationale Websites hinweg wird durch das Medien-Backend gewährleistet, das von den Content-Backends gemeinsam genutzt wird und somit eine zentrale Steuerung der verfügbaren Bilder ermöglicht.

Während aller Phasen des Entwicklungsprozesses werden Code-Reviews und (automatisierte) Tests durchgeführt. Automatisierte Content Deployments werden nur dann durchgeführt, wenn alle End-to-End-Tests bestanden sind. Live-Websites werden auf visuelle Regressionen und Funktionalität überwacht.

Herausforderungen

Das komponentenbasierte Design der Vue.js-Elemente erlaubt kontrollierte Anpassungen des Layouts und des Erscheinungsbildes dieser Elemente, und die strukturierten Gegenstücke in Drupal - implementiert mit dem Paragraphs-Modul - ermöglichen es, festzustellen, wo die Komponenten verwendet werden und ob sie von den Anpassungen betroffen sind.

Die Vorschaufunktionalität ist bei entkoppelten Setups immer eine schwierige Aufgabe. Diese Herausforderung wurde in diesem Projekt dadurch gelöst, dass eine Nuxt.js-Serverinstanz zusammen mit jedem Content-Backend betrieben wird und die vom Nuxt.js-Server generierte dynamische Vorschau in einem Iframe auf den Node-Seiten eingebunden wird. Zusätzlich kann die Iframe-Breite durch Klicken auf voreingestellte Schaltflächen geändert werden, um die Vorschau auf verschiedene Bildschirmgrößen zu ermöglichen.

Die Herausforderung, den gesamten Code und den größten Teil der Drupal-Content-Backend-Konfiguration für die verschiedenen nationalen Websites gemeinsam zu nutzen und gleichzeitig Variationen in den Einstellungen wie aktivierte Sprachen zuzulassen, wurde durch die Verwendung des Moduls Config Split gelöst.

Leistung, Zuverlässigkeit und Skalierbarkeit werden durch die Bereitstellung von Websites und Assets über AWS Cloudfront gewährleistet, die es ermöglicht, regionale Edge-Locations zu konfigurieren, um für jede nationale Website in ihrer spezifischen Zielregion die geringstmögliche Latenzzeit zu erzielen.

Die gemeinsame Nutzung von Medien zwischen dem Medien-Backend und allen Content-Backends wurde mit Hilfe von JSON:API und benutzerdefinierten Tracking-Modulen implementiert, die die folgenden Funktionalitäten ermöglichen:

• Dublettenerkennung, keine Datei kann mehr als einmal hochgeladen werden.
• Informationen über die Verwendung von Medien in Content-Backends sind im Medien-Backend verfügbar.
• Externe Nutzung, d.h. außerhalb der Content-Backends, kann im Medien-Backend registriert werden.
• Hinzufügen von Medien ist in den Content-Backends möglich, es erfolgt eine automatische Synchronisation der Medien mit dem Medien-Backend und von dort aus mit allen anderen Content-Backends.
• Hinzufügen/Aktualisieren/Löschen/Übersetzen von Medienentitäten im Medien-Backend und Synchronisieren der verschiedenen Übersetzungsversionen nur mit den Sprachen, die in den jeweiligen Inhalts-Backends unterstützt werden.
• Löschen von Medienentitäten im Medien-Backend nur dann, wenn das Medium weder in einem Content-Backend noch extern verwendet wird.

Community-Beiträge

Die folgenden Module wurden während des Projekts erstellt:
media_thumbnails
media_thumbnails_pdf
media_thumbnails_svg

Patches für andere Module wurden erstellt und auf drupal.org veröffentlicht.

Teile der implementierten Lösung wurden auf unterschiedlichen Drupal-User-Groups vorgestellt.

Rollen im Projekt:

Konzept und Beratung, Design, Entwicklung Frontend, Implementierung Drupal-CMS als Redaktionsbackend

System:

JS-Frontend-Framework (vue.js), APIs, Drupal 8, Commercetools, Living Styleguide

Website:

sonnen.de