Kombination aus VueJS und Drupal

„Was für eine wunderschöne Aussicht!“, ruft man aus, wenn man den Sonnenuntergang erlebt, während man an einem Strand steht und die Wellen die Füße berühren. Das ist der Moment, in dem man aus der Routine ausbricht, das eintönige Stadtleben hinter sich lässt und die natürliche Schönheit „wirklich“ spürt. Es gibt eine weitere Ansicht in der digitalen Landschaft, die Sie ausrufen lässt: „Wow!“, und das ist Vue.

Vue.js ist fantastisch für Entwickler, um Anwendungen schneller zu erstellen und sie attraktiver und benutzerfreundlicher zu gestalten. In Kombination mit Drupal, einem der führenden Open-Source-Content-Management-Systeme, kann Vue JS eine brillante Option für Webentwicklungsanforderungen sein.

Eine Reise in die Vergangenheit: JavaScript-Frameworks

JavaScript-Frameworks eignen sich hervorragend für die Erstellung moderner Anwendungen. Es gibt einen interessanten Artikel von freeCodeCamp über die Entwicklung von JavaScript und wie es entstanden ist.

Die Browser, die wir heute sehen, verfügten bis Anfang der 2000er Jahre nicht über diese Art von Funktionalitäten. Sie waren viel weniger leistungsfähig und es war leistungsmäßig nicht möglich, komplizierte Anwendungen in ihnen zu erstellen.

Die Einführung von Google Maps und Gmail, die im Browser liefen, leitete den dringend benötigten Wandel ein. Asynchrone Netzwerkanfragen wurden durch Ajax Realität. Schließlich begann die Entwicklung auf der Webplattform, während die Plattform selbst – bestehend aus Browsern, Webstandards, Browser-APIs und der JavaScript-Sprache – von Ingenieuren bearbeitet wurde.

Die ersten größeren Projekte, die auf JavaScript basierten, waren Bibliotheken wie jQuery und Mootools, die eine schönere API für die Interaktion mit dem Browser boten und Lösungen für Fehler und Inkonsistenzen zwischen zahlreichen Browsern bereitstellten. Dann kamen Backbone, Ember, Knockout und andere als moderne JavaScript-Frameworks auf den Markt, gefolgt von React, Angular und Vue, die in letzter Zeit an Popularität gewonnen haben.

Der Aufstieg von VueJS

VueJS ist eines der beliebtesten JavaScript-Frameworks. Auf der offiziellen Website von VueJS heißt es, dass es sich um ein progressives JavaScript-Framework handelt, das für die Entwicklung von Benutzeroberflächen verwendet wird. Im Gegensatz zu monolithischen Frameworks ist es inkrementell anpassbar und seine Kernbibliothek konzentriert sich auf die View-Schicht und kann problemlos mit anderen Bibliotheken oder bestehenden Projekten integriert werden. Es ist eine erstaunliche Lösung für komplizierte Single-Page-Anwendungen, wenn es zusammen mit modernen Tools und unterstützenden Bibliotheken eingesetzt wird.

Die Nutzung von VueJS hat im Laufe der Jahre enorm zugenommen, wie in der folgenden Grafik dargestellt.

VueJS punktet stark, wenn es um stark frequentierte Websites geht. Unternehmen, die eine Webentwicklungslösung benötigen, die bei einem hohen Traffic-Anstieg gut skaliert werden kann, entscheiden sich für VueJS, wie in der folgenden grafischen Darstellung zu sehen ist.

Verdienstvolle Funktionen von VueJS

Im Folgenden sind einige der Vorteile von VueJS aufgeführt:

Geringere Größe

Der Erfolg eines JavaScript-Frameworks hängt von seiner Größe ab. Die Größe des JavaScript-Frameworks steht in direktem Verhältnis zu seiner Nutzung. Vor diesem Hintergrund ist VueJS mit seiner geringen Größe sehr vorteilhaft. Die Größe des VueJS-Frameworks beträgt etwa 18-21 KB, was bedeutet, dass es nicht viel Zeit beim Herunterladen und Verwenden benötigt. Die geringe Größe hat keinen Einfluss auf die Geschwindigkeit, da es schnell und zügig ist.

Einfache Entwicklung

Das Hinzufügen von Vue zu einem bestehenden Webprojekt ist recht einfach und Sie können sehr schnell mit dem Programmieren beginnen, ohne etwas über JSX, ES2015 oder Build-Systeme wissen zu müssen, um loszulegen. Vertrautheit mit HTML und JavaScript sowie das Lesen der Anleitung können beim Erstellen von etwas Grundlegendem innerhalb eines Tages helfen, was für ein schnelllebiges Entwicklungsteam, in dem Sie sehr schnell etwas lernen müssen, sehr vorteilhaft ist.

Darüber hinaus verfügt es über eine einfache Struktur, die sich hervorragend für die Entwicklung von Vorlagen im kleinen und großen Maßstab eignet und dadurch viel Zeit spart. Aufgrund seiner einfachen Struktur können Sie sogar die Blöcke mit Fehlern verfolgen.

Einfache Integration

Es erleichtert Entwicklern die Integration in bestehende Anwendungen, was es zu einer großartigen Perspektive für die Entwicklung neuer Webanwendungen und die Änderung der bereits bestehenden Anwendungen macht. Die Integration ist möglich, da es für alles Komponenten gibt.

Umfassende Dokumentation

Die Dokumentation von VueJS ist sehr detailliert, einfach zu verstehen und enthält zahlreiche Codebeispiele. Es hat eine wachsende Community von Entwicklern, die bei Bedarf helfen können.

Immense Flexibilität

Es ist einfacher, schnell eine App mit VueJS zu schreiben und sie direkt aus dem Browser auszuführen. Oder Sie können sogar eine komplizierte Anwendung entwickeln, die ES6, JXX, Komponenten, Routing, Bündelung und andere nutzt. Sie können sogar eine Vorlage in HTML oder in JavaScript schreiben oder JSX verwenden. Sie haben die Freiheit, die Anwendung so zu strukturieren, wie es Ihnen passt.

Model-View-Viewmodel-Architektur

Seine MVVM-Architektur (Model-View-Viewmodel) hilft bei der Erleichterung der Zwei-Wege-Kommunikation für die einfache Verwaltung von HTML-Blöcken.

Implementierung von VueJS mit Drupal

Wie VueJS ist Drupal sehr skalierbar und betreibt stark frequentierte Websites auf der ganzen Welt. Es hat auch andere führende Content-Management-Frameworks in diesem Kriterium übertroffen.

Die Mischung aus Drupal und VueJS, die beide wegen ihrer Skalierbarkeit bevorzugt werden, kann eine bemerkenswerte Option sein. 

Eine der Möglichkeiten, VueJS mit Drupal zu nutzen, ist die Entwicklung einer Single-Page-Anwendung, wie wir in einem früheren Blogbeitrag besprochen haben. Dies beinhaltet die Installation von Drupal 8 auf dem lokalen System, gefolgt von der Erstellung benutzerdefinierter Inhaltstypen, dem Hinzufügen von Ansichten und der Aktivierung der REST-API.

Dann können Sie mit dem Aufbau des Frontends mit VueJS beginnen und eine Single-Page-Anwendung erstellen. Dies würde das Einrichten eines Vue-Projekts mit Vue CLI beinhalten. Sobald dies erledigt ist, werden der Vue-Router und die Vue-Ressource hinzugefügt. Vue Router, der offizielle Router für VueJS, ist tief in den VueJS-Kern integriert und ähnelt dem Angular-Router (von Angular JS) und dem React-Router (von React JS). Vue Resource ist das Plugin für VueJS, das Dienste für das Stellen von Webanfragen und das Verwalten von Antworten bietet. Dann können Sie mit der Änderung der main.js-Datei beginnen, um Vue-Router und Vue-Ressourcen zu verwenden, und die app.js ändern, um mit dem Router zu arbeiten, gefolgt vom Einrichten von App-Komponenten und Routern.

Anwendungsfall

Arbetsförmedlingen, der schwedische öffentliche Arbeitsvermittlungsdienst, profitierte von der Verschmelzung von Drupal und VueJS. Auf der Drupal Europe 2018 gab es eine Sitzung, in der darüber gesprochen wurde, wie eine Videoplattform für die schwedische Regierung aufgebaut wurde.

Die Plattform nutzte Podcasts, Video-on-Demand und Live-Übertragungen für die Verbreitung ihrer Inhalte. Sie benötigten eine neue Plattform, auf der diese verschiedenen Medienarten importiert und Metadaten hinzugefügt werden konnten, um sie einfach zu gruppieren und herauszufiltern.

Drupal war aufgrund seines großartigen Content-Management-Systems, des robusten mehrsprachigen Supports, der Benutzerverwaltung und der Open-Source-Plattform die ultimative Wahl. VueJS wurde als gewünschtes JavaScript-Framework ausgewählt, da es leichtgewichtig und produktionsreif ist. Seine Kompatibilität mit Twig war ein Bonus. Das Entwicklungsrezept bestand also aus Drupal, der Kombination aus VueJS und Twig und einem API-Endpunkt.

RESTful Web Services- und Serialisierungsmodule wurden aktiviert, die die Möglichkeit gaben, normale Ansichten als REST-Export zu erstellen, und Axios, ein Promise-basierter HTTP-Client mit einer einfach zu bedienenden API, der sowohl im Browser als auch in NodeJS verwendet werden kann, wurde für den Datenverbrauch verwendet. Die Themenstruktur umfasste Twig, JS und CSS. Es wurden steckbare VueJs-Komponenten verwendet und die Ereignisbehandlungskonfiguration wurde über die Schaltfläche „Mehr laden“ angezeigt.

Fazit

Die Verschmelzung von Drupal und VueJS kann eine lohnende Lösung sein, die Ihnen helfen kann, Ihre digitalen Transformationsziele zu verwirklichen.

Wir sind bestrebt, unseren Partnern durch eine Reihe von Dienstleistungen ein ehrgeiziges digitales Erlebnis zu bieten.

Kontaktieren Sie uns unter [email protected], um das Beste aus der Verschmelzung von Drupal und VueJS herauszuholen.