Die besten Drupal Projekte in Deutschland und Österreich

Splash Awards 2020

Seit 2017 wird jährlich der Splash Award für die besten Drupal-Projekte in neun Kategorien vergeben. Dieses Jahr haben wir es in der Kategorie Enterprise unter die Nominierten geschafft. Wir sind gespannt, ob es am 29. Oktober für einen Platz auf dem Siegertreppchen reicht.

Nominiert ist unsere Drupal-Lösung für die internationalen Webseiten von sonnen - ein Anbieter erneuerbarer Energien in sieben Ländern und führend bei intelligenten Energie-Speicherlösungen. Dieses Projekt demonstriert die Flexibilität von Drupal in einem komplexen und dennoch sehr zuverlässigen und skalierbaren Setup für mehrsprachiges Content- und Medienmanagement.

JAMstack + Drupal Content-HUB + Nuxt.js

Die Websites laufen auf einem JAMstack mit flexiblen Backends und einem modernen und skalierbaren Frontend, das sich mit verschiedenen externen Diensten integrieren lässt.

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.