Vue.js - Das »simple« Framework für komplexe Aufgaben

Vue.js ist ein Framework für die Entwicklung von grafischen Weboberflächen. Seit Anfang des Jahres läuft die SCHUMACHER-Webseite auf dem JavaScript-Framework. Wie lässt sich Vue.js einsetzen? Und warum haben wir uns dafür entschieden? Ein Ein- und kurzer Überblick.

Vue.js ist ein Open-Source-JavaScript-Framework zum Entwickeln grafischer Oberflächen für Webanwendungen und Single-Page-Applications (SPA). Entwickelt wurde das Framework zunächst nicht von einem Unternehmen, wie z.B. React oder Angular, sondern von einer Einzelperson, dem ehemaligen Google-Mitarbeiter Evan You, der die erste offizielle Version im Jahr 2014 auf Github veröffentlichte. Mittlerweile wird Vue.js von einem Kernteam sowie einer stetig wachsenden Community weiterentwickelt.

Vue.js kann nicht nur für eine gesamte Webseite eingesetzt werden, sondern auch für Teilapplikationen, die in eine bestehende Webseite integriert werden können. Im Vergleich zu Frameworks wie React oder Angular, findet eine stärkere Trennung von HTML, CSS und JavaScript statt. Wer also bereits fundierte Frontend-Kenntnisse mitbringt, wird schon nach kurzer Zeit und mit wenigen Zeilen Code tolle Ergebnisse erzielen können.

Die beiden Frameworks React und Angular sind auch heute noch deutlich bekannter und weiter verbreitet. Es gibt mehr Plug-ins zur Erweiterung sowie deutlich mehr Fragestellungen und Diskussionen in öffentlichen Foren. Warum also die Entscheidung für Vue.js? Als uns klar wurde, dass wir unseren Tech Stack mit einem modernen Framework erweitern möchten, haben wir uns intensiv mit der Auswahl jenes Systems auseinandergesetzt. Schnell wurde klar: Keep it simple.
Zu diesem Zeitpunkt hatten wir noch wenig Erfahrung mit SPA-Frameworks und mussten uns schnell in das neue System einarbeiten können. Auch mit Blick in die Zukunft, dem wachsenden Team bei SCHUMACHER und möglichen Kooperationen mit externen Dienstleistenden, sollte die Einstiegshürde für neue Kolleg:innen möglichst gering sein. Mit seiner flexiblen und leicht verständlichen Struktur und dem Verzicht auf die Einführung einer weiteren bzw. neuen Programmiersprache, konnte Vue.js überzeugen.

Das Grundgerüst einer Vue.js-Datei: HTML, JS und CSS bleiben weitestgehend getrennt voneinander.

Vue.js ist ein Framework, das die Entwicklung von Single-Page-Applications (SPA) in den Fokus rückt und einige Tools und Funktionen für die Erstellung von Progressive Web Apps beinhaltet. Eine SPA zeichnet sich dadurch aus, dass beim ersten Seitenaufruf zunächst die gesamte Anwendung geladen wird. Anschließend können weitere Daten mithilfe von AJAX dynamisch nachgeladen und/oder aktualisiert werden. Dadurch gewinnt die Webseite an App-Charakter und fühlt sich mehr wie eine native Anwendung an.
Inhalte der Webpage werden nach einer Interaktion durch die Nutzer:innen sofort aktualisiert, ohne das gesamte Dokument neu zu laden. Es entfallen »harte« Seitenübergänge, bei denen das gesamte Dokument neu geladen wird. Dadurch, dass nur die Inhalte aktualisiert werden, die sich tatsächlich ändern, lassen sich beispielsweise animierte Seitenübergänge sehr einfach implementieren.

Vue.js ist von Haus aus sehr schlank und bringt alles Wichtige für die Umsetzung einer Webanwendung mit. Bei Bedarf lässt sich die Funktionalität mithilfe von Open-Source-Plug-ins auch nach eigenen Bedürfnissen erweitern. Dank Nuxt.js besteht die Möglichkeit, statische HTML-Dateien zu generieren, wodurch weitere Datenbankabfragen an den Server entfallen, was sich wiederum in einer besonders schnellen Ladezeit bemerkbar macht. Nicht unerwähnt sollte bleiben, dass auf Grund der in sich geschlossenen Komponenten und Dependency Injection, nur das geladen wird, was tatsächlich benötigt wird.

Erklärung: Es werden wirklich nur die Zeilen Code geladen, die für das Dargestellte tatsächlich benötigt werden. In der Vergangenheit bestand die Best Practice darin, alle Skripte und Styles in jeweils einer einzelnen Datei zusammenzufassen und in komprimierter Form beim ersten Seitenaufruf zu laden. Dadurch lädt die Seite im Browser initial länger, hat dann aber alle Anweisungen parat. Wird ein Modul nur auf einer Unterseite verwendet, werden die Ressourcen hierfür auch erst beim Aufruf der Unterseite geladen. Der initiale Seitenaufruf ist also deutlich schneller im Vergleich zur herkömmlichen Webentwicklung.

»Vue.js ermöglicht es uns, Webseiten mit App-Charakter in kurzer Zeit zu verwirklichen.«

Wegen des modularen Ansatzes von Vue.js und dank der Unterstützung von Mixins und Slots können Komponenten sehr flexibel gestaltet und teilweise sogar projektübergreifend wiederverwendet werden. Außerdem lässt sich Vue.js mit jedem CMS betreiben, vorausgesetzt dieses unterstützt die Bereitstellung der Daten in Form einer API. Somit eignet sich Vue.js besonders für ein Headless CMS und somit für eine Vielzahl der heute gängigen Content-Management-Systeme, wie z.B. WordPress oder Typo3. Damit sind wir flexibel in der Wahl des CMS und können Frontends selbst für Systeme entwickeln, mit denen wir bisher noch nicht gearbeitet haben. Außerdem bietet sich die Möglichkeit Front- und Backend problemlos unabhängig und parallel zueinander zu entwickeln.

Start der lokalen Vue.js-Applikation im Entwicklungsmodus. Die Applikation wird via »yarn dev«-Befehl gestartet.

Vue.js lässt sich als ein flexibler, leichtgewichtiger Werkzeugkasten zur Erstellung moderner, wartbarer state-of-the-art-Webanwendungen bezeichnen. Neben der Erfahrung der Entwickler:innen, ist die Wahl zwischen Vue.js und React bzw. Angular wohl weitgehend eine Frage der individuellen Bedürfnisse. Bei SCHUMACHER können wir durch den Einsatz von Vue.js deutlich flexibler auf die Wahl des CMS reagieren und ermöglichen neuen Kolleg:innen gleichzeitig einen leichten Einstieg in unsere Arbeitsweise. Wir konnten die allgemeine Performance unserer Applikationen steigern und besonders in komplexeren Anwendungen die Entwicklungszeit reduzieren.

Darüber hinaus nutzen wir Vue.js aber auch als Static-Site-Generator, besonders dann, wenn kein CMS zum Einsatz kommt. Kurzum: Vue.js ist unser präferiertes Framework für die Frontendentwicklung von modernen Webanwendungen, das sich vor allem durch seine Einfachheit und eine flache Lernkurve auszeichnet.

• Solon
• Hessische Parlamentarismusgeschichte
• Exportakademie Rhein-Main