Was man über Vue.js wissen sollte

the next big thing Golo Roden  –  27 Kommentare

Bei Vue.js handelt es sich um ein Framework zum Entwickeln grafischer Oberflächen für Webanwendungen. Doch was gibt es darüber hinaus über Vue.js zu wissen? Und wie unterscheidet es sich von React?

Vue.js ist ein "leichtgewichtiges" Framework zum Entwickeln grafischer Oberflächen für Webanwendungen. Entwickelt wird Vue.js, anders als beispielsweise React, nicht von einem großen Unternehmen, sondern von einem kleinen Team, das sich seit der ersten Version von Vue.js im Jahr 2014 um den ursprünglichen Autor Evan You geschart hat.

Auch in anderer Hinsicht unterscheidet sich das Framework deutlich von React. Am auffälligsten ist sicherlich, dass Vue.js nicht JavaScript in den Mittelpunkt rückt, sondern HTML. Auf dem Weg ähnelt die Arbeit mit Vue.js in weitaus höherem Maß der klassischen Webentwicklung, da man stärker und direkter mit HTML und CSS in Berührung kommt als bei React.

Das Vorgehen von Vue.js ähnelt dem klassischer Templating-Sprachen: Das HTML-Grundgerüst wird um proprietäre Attribute erweitert und ergänzt, die das Rendern steuern. Diese Attribute beginnen bei Vue.js stets mit dem Kürzel v-, beispielsweise stehen v-for für Schleifen, v-if für Bedingungen und v-on für das Registrieren von Event-Handlern zur Verfügung.

Insgesamt erinnert Vue.js damit stark an Angular 1 und Knockout.js – ist aber weitaus mächtiger und performanter als diese Werkzeuge. Evan You gelingt es nämlich seit jeher hervorragend, eine ausgewogene Balance zwischen Einfachheit und Funktionalität herzustellen. Dadurch ist Vue.js weitaus einfacher zu erlernen als beispielsweise React, kann funktional gesehen aber problemlos mithalten.

Zusätzlich zu den HTML-Attributen, die Vue.js zur Verfügung stellt, erzeugt man im Hintergrund noch ein JavaScript-Objekt, die sogenannte "Instanz", die Daten und Funktionen bereitstellt, auf die man aus dem HTML-Code zugreifen kann. Auf dem Weg wird auch der Zustand der Anwendung, der sogenannte "State" verwaltet.

Was ist Vue.js?

Die Composition API von Vue.js 3

Genau zu dem Zweck enthält Vue.js 3, das im September 2020 erschienen ist, eine neue API, nämlich die "Composition API". Sie ist zwar optional und wird in der (übrigens hervorragenden) Dokumentation zu den fortgeschrittenen Konzepten gezählt, doch sollte sie jeder Entwicklerin und jedem Entwickler, die sich mit Vue.js beschäftigen, vertraut sein. Die neue API ändert die Art deutlich, wie State verwaltet wird.

In vorherigen Versionen verfügte die Instanz unter anderem über zwei Properties, data und methods. Während die eine dazu gedacht war, Daten aufzunehmen, konnte man an die andere Funktionen anhängen, um die Daten zu manipulieren. Diese Leitplanken haben maßgeblich dazu beigetragen, den Einstieg in Vue.js so einfach wie möglich zu gestalten.

Allerdings skalieren sie schlecht. Das heißt, sie eignen sich nur bedingt für umfangreiche und komplexe Anwendungen: Der Grund ist schlichtweg, dass die Trennung in Daten und Funktionen eine technische Trennung ist, die nicht mit der fachlichen Logik der Anwendung einhergeht. Auf diese Weise werden nicht jene Dinge gruppiert, die einen inhaltlich-logischen Bezug haben, sondern technische Konstrukte, die nichts gemein haben, außer technische Konstrukte eines bestimmten Typs zu sein.

Genau das ändert die Composition API: Auf den ersten Blick führt sie lediglich die neue setup-Funktion ein, die nun ein Objekt zurückgibt, das Daten und Funktionen enthält. Der entscheidende Punkt dabei ist aber, dass diese Daten und Funktionen innerhalb der setup-Funktion beliebig definiert und gruppiert werden können – eben auch nach fachlichen Kriterien. Daher lässt sich Anwendungscode mit der Composition API fachlich gesehen weitaus besser strukturieren als vorher.

Zudem besteht die Option, inhaltlich zusammengehörige Daten und Funktionen ihrerseits wiederum in Unterfunktionen auszulagern, die dann von setup aufgerufen werden. So lässt sich die Anwendungslogik sozusagen "komponieren", was en passant auch den Namen der neuen API erklärt.

Vue.js 3 Composition-API

Single-File Components

Ähnlich zu den JSX-Dateien von React, die JavaScript und HTML-artiges Markup in einer Datei vereinen, kennt Vue.js ebenfalls ein spezielles Dateiformat mit der Dateiendung .vue. Diese Dateien können auf oberster Ebene drei HTML-Elemente enthalten, <template>, <style> und <script>. Sie dienen dazu, den zu einer Komponente gehörenden HTML-, CSS- und JavaScript-Code aufzunehmen, sodass sich alle drei Aspekte einer Komponente (Struktur, Visualisierung und Verhalten) in einer gemeinsamen Datei unterbringen lassen. Auf diesem Weg definierte Komponenten werden in Vue.js als "Single-File Components" bezeichnet, kurz "SFC".

Da die meisten Editoren und IDEs inzwischen auch ausgezeichnete Unterstützung für .vue-Dateien enthalten, kann man SFCs mit allen modernen Annehmlichkeiten entwerfen und entwickeln, darunter Syntaxhervorhebung und Autovervollständigung. Vue.js führt die SFCs in der Dokumentation zwar nicht von Anfang an ein, da hierfür gesonderte Build-Werkzeuge erforderlich sind, doch empfiehlt es sich, jede Anwendung, die über ein erstes Beispiel hinausgeht, mit dieser Komponenten zu strukturieren.

Single-File Components in Vue.js

Warum Vue.js?

Drei der größten Vorteile von Vue.js wurden bereits genannt: erstens die einfache Erlernbarkeit, zweitens die Leistungsfähigkeit und drittens die Nähe zu HTML. Mit seiner Struktur und seinem Vorgehen, insbesondere auch im Hinblick auf die SFCs, erinnert Vue.js deutlich an die Konzepte der Web Components, die zwar seit Jahren als "das nächste große Ding" gehandelt werden, aber zumindest bislang keine nennenswerte Verbreitung erfahren haben.

Im Prinzip zeigt Vue.js, wie Web Components funktionieren müssten, um einen nennenswerten Marktanteil gewinnen zu können. Daraus ergibt sich ein weiteres Argument für Vue.js: Wer davon ausgeht, dass Web Components in den kommenden Jahren doch noch deutlich an Verbreitung gewinnen, ist mit Vue.js gut vorbereitet – der Wechsel von Vue.js zu nativen Web Components fällt viel leichter als beispielsweise der Wechsel von React dorthin.

Ebenfalls positiv ist der modulare Aufbau von Vue.js. Das Framework ist sehr kompakt und überschaubar, zusätzlich gibt es aber zahlreiche Komponenten, die sogar vom Kernteam entwickelt werden, darunter auch ein Router. Allerdings ist bei keiner dieser Komponenten die Verwendung verpflichtend, sodass man sich anhand des individuellen Bedarfs zusammenstellen kann, was benötigt wird – und trotzdem alles aus einer Hand erhält.

Der vermutlich größte Nachteil von Vue.js ist, dass es durch den Fokus auf den sehr einfachen Einstieg teilweise zu leicht gemacht wird, Spaghetti-Code zu schreiben. Es erfordert Disziplin, das nicht zu tun. React ist im Vergleich dazu nicht so anfällig, da es von vornherein mit einer deutlich höheren Strukturierung aufwartet – was allerdings um Umkehrschluss den Einstieg auch wieder schwieriger gestaltet.

Warum Vue.js?

VueX und Nuxt.js

Zu den erwähnten ergänzenden Komponenten gehört unter anderem auch VueX, eine Bibliothek zum Verwalten von State, ähnlich Redux. Sie arbeitet mit prinzipiell den gleichen Ansätzen wie Redux, so gibt es ebenfalls einen Store, der durch Mutations verändert wird, und der Veränderungen allen interessierten Komponenten durch sogenannte "Reactive References" mitteilt. Vor allem bei der Entwicklung großer und komplexer Anwendungen ist VueX eine gute Wahl.

Außerdem gibt es eine vollständige Laufzeitumgebung für Vue.js namens Nuxt.js, die allerdings nicht vom Kernteam, sondern von einer gesonderten Community entwickelt wird. Nuxt.js verhält sich zu Vue.js ähnlich wie Next.js zu React, zudem ist Nuxt.js sehr offensichtlich von den Konzepten an Next.js angelehnt. Auch Nuxt.js bietet serverseitiges Rendern, das Generieren einer statischen Webseite und ähnliche Funktionen.

Allerdings bleibt festzuhalten, dass Nuxt.js nicht so umfangreich wie Next.js ist. Wer also eine möglichst vollständig ausgestattete Laufzeitumgebung sucht und anhand dieser ein UI-Framework auswählt, ist mit Next.js und React definitiv besser beraten.

VueX und Nuxt.js

Fazit

Zusammenfassend lässt sich sagen, dass Vue.js ein interessantes UI-Framework für Webanwendungen ist, das vor allem durch seine Einfachheit und die gute Lernkurve glänzt. Den Fokus auf HTML statt auf JavaScript zu legen, mag man je nach persönlichen Vorlieben unterschiedlich bewerten – Fakt ist aber, dass Vue.js sich damit sehr nah an der Idee der Web Components bewegt. Sollten sich diese langfristig erfolgreich am Markt durchsetzen können, hat man mit Vue.js eine hervorragende Basis für den Wechsel.

Abgesehen davon bleibt die Wahl zwischen Vue.js und React wohl weitgehend eine Frage des persönlichen Geschmacks beziehungsweise der individuellen Überzeugungen. Es gibt gute Gründe für den Einsatz beider Technologien, die je nach Situation individuell abzuwägen sind. Eine pauschale Empfehlung für Vue.js oder React kann es aus diesem Grund nicht geben.