Drupal 8 Seite mit Vue.js ins moderne Web bringen
Zur Entkopplung der Präsentation und der Datenhaltung einer Drupal-Website gibt es mehrere Gründe und Ansätze. So kann es für sehr große Projekte sinnvoll sein, das UI mitsamt Anwendungslogik und Schnittstellen zu den von Drupal bereitgestellten Schnittstellen für den Zugriff auf den Site-Content vollständig mittels reaktiver Technologien zu entwickeln, nämlich dann, wenn die Komplexität einer Anwendung nicht mehr angemessen ohne Zuhilfenahme solcher Frameworks adressiert werden kann (das ist einer der Gründe). Für kleinere Use-Cases ist der hybride Ansatz denkbar, nach welchem bestimmte Teile der Seite im User-Kontext auf Content-Endpunkte zugreifen, um den Inhalt schließlich zur Präsentation zu bringen. Dieser Ansatz ist gegenüber dem Ansatz der vollständigen Entkopplung (in der Literatur wird von decoupling gesprochen) deutlich weniger entwicklungs- und wartungsaufwändig.
Effiziente Implementierung anspruchsvoller Webanwendungen
Im modernen Web sind reaktive Frameworks wie Vue.js, React oder Angular nicht mehr wegzudenken, wenn es um die Implementierung von anspruchsvollen Webanwendungen geht. Im Kontext des Decoupling finden auch solche Frameworks ihren Platz bei Systemen, die eigentlich schon alles mitbringen: Drupal 8 kommt zwar mit Twig, einer Template Engine, sowie mit jQuery, sodass in Themes oder Modulen selbstredend auch asynchron und dynamisch Content nachgeladen werden kann. Man könnte freilich sogar komplexere Anwendungen mit jQuery realisieren. Doch eine Arbeit, die schnell Früchte trägt, ist das nicht.
Website-Projekt mit Drupal, Bootstrap und Vue.js
Wir, die sciencentric AG, haben in einem Website-Projekt nun Federführung übernommen und neben einem Drupal 8 Theme in Twig auch ein Drupal Modul entwickelt. Das Drupal Theme basiert in diesem Fall auf einer eigenen Bootstrap 4 Distribution. Beide Komponenten der Website haben einen JavaScript-Anteil, der mit jQuery nur ungleich aufwändiger hätte realisiert werden können. Daher haben wir uns entschieden, Vue.js anstatt des mitgelieferten jQuery einzusetzen. Vue ist ein modernes, reaktives Framework. Wer React oder Angular kennt, wird viele Paradigmen in Vue.js vereint wiederfinden.
JavaScript-Entwicklung mit Vue.js und wichtigen Build-Tools
Anstelle von Vanilla JavaScript oder JavaScript mit jQuery schreiben wir also JavaScript – genauer: ECMAScript 6 – mit Vue.js. Als Build-Tools kommen die üblichen Verdächtigen aus der Webentwicklerszene zum Einsatz: Node.js (als Runtime), gulp.js, webpack, Babel. Der Einsatz dieser Tools erlaubt es uns, komfortabel alle Features des Vue.js-Frameworks (beispielsweise den integrierten Template-Compiler oder Single File Components) zu verwenden. Mit webpack und Babel kann ein App-Bundle generiert werden, welches transpiliertes JavaScript enthält um auch von Browsern ausgeführt werden, die ES6 noch nicht verstehen.
Live-Wetterdaten-Anzeige mit
Drupal-Modul, D3.js und Vue.js
Die Entwicklung
Das Drupal-Modul, welches im Rahmen dieses Projekts entwickelt wird, dient der Live-Anzeige von Wetterdaten einer besonderen Messstation. Hierzu wird mit D3.js, was auch ein Teil des Bundles ist, ein Graph geplottet, sobald neue Daten verfügbar sind. Die notwendigen Schnittstellen werden vom Modul selbst bereitgestellt und sind in PHP (mithilfe von Drupal APIs) realisiert, sodass die eingebettete Vue.js-Anwendung mit HTTP-Clients wie etwa Axios über REST an neue Daten kommt. Lediglich das Grundgerüst ist in HTML geschrieben, alle sonstigen Bestandteile werden beim Ausführen der Mini-App durch Vue.js mit seiner besonderen Art der DOM-Manipulation (Virtual DOM) der Seite hinzugefügt.
JavaScript
Mit diesem Ansatz ist es uns gelungen, das sehr gute (und vor allem sehr gut erweiterbare) Drupal 8 als Grundlage für die Contentverwaltung zu benutzen, auf jQuery zu verzichten und anstatt dessen ein modernes, progressives JavaScript Framework einzusetzen und eigene Komponenten elegant und nachhaltig zu programmieren.