Vue.js (eBook)

1Vue im Überblick

Vue.js, englisch ausgesprochen [vju?], wie View, ist ein Framework zur Implementierung von Webanwendungen. Nicht selten wird Vue.js als Bibliothek bezeichnet, weil es sich durch den progressiven Ansatz, der in diesem Kapitel erläutert wird, gut in eigene Projekte jeglicher Größe und Komplexität eingliedert. Der Hauptunterschied zwischen einem Framework und einer Bibliothek ist, dass sich unser Code den Standards und Vorgaben eines Frameworks anpassen muss, während sich eine Bibliothek unseren Standards und Vorgaben anpasst. Da sich Vue.js bereits durch minimale Veränderungen im Projekt integrieren lässt, schwankt die Definition zwischen Framework und Bibliothek. Dieses Buch folgt der Kategorisierung als Framework, da es bei einem konsequenten Einsatz die Architektur der Webanwendung vorgibt – ein unverwechselbares Merkmal eines Frameworks. Im weiteren Verlauf wird Vue.js, je nach Version auch Vue.js 2 oder Vue.js 3 genannt, als Vue bezeichnet. Das js als Abkürzung für JavaScript ist im Sprachgebrauch nicht notwendig.

1.1Was ist ein JavaScript-Frontend-Framework?

Bis in die frühen 2000er-Jahre hinein waren komplexe Webanwendungen im Browser undenkbar. Sowohl von der Performance her als auch vom notwendigen Tooling war an eine Entwicklung von Webanwendungen nicht zu denken. JavaScript war hauptsächlich im Einsatz, um kleinere Funktionalitäten auf Webseiten zu realisieren; weit entfernt vom heutigen Anwendungsfeld und den Möglichkeiten.

Geändert hat sich das mit der Einführung von Google Maps und Gmail im Jahr 2005 in den USA und ab 2006 auch als Webdienst in Deutschland. Zwei Anwendungen, die schon damals bei ihrer Einführung problemlos im Browser liefen – angetrieben durch asynchrone Ajax-Requests, die Anfragen über das Netzwerk möglich machten. Diese Möglichkeiten wurden in den folgenden Jahren konsequent ausgebaut. Browser haben neue Funktionen bekommen, ebenso wie neue und angepasste APIs. Zudem wurde JavaScript als Sprache und Webstandard grundlegend überarbeitet und zum Teil fast neu geschaffen. AngularJS, Ember, Knockout und Backbone.js gehörten zur ersten Welle an neuartigen und modernen Web-Frameworks, um diese rasante Entwicklung von Webanwendungen zu unterstützen. Diese Geburtsstunde von Web-Frameworks hat dazu geführt, dass immer mehr Interaktionen mit dem Browser und dem Document Object Model (DOM) einer Webseite abstrahiert wurden. Das hatte neue Funktionen, bessere Performance und eine verkürzte Entwicklungszeit zur Folge.

Ein Frontend-Framework ist ein Gerüst für das Erstellen eines Frontend. Mit an Bord sind normalerweise Möglichkeiten, Dateien zu strukturieren, zum Beispiel um Komponenten und Daten mit DOM-Elementen zu verknüpfen. Ein Frontend-Framework hilft zudem bei der Trennung der Belange (Separation of Concerns), indem es sich ausschließlich um die Anzeige kümmert und Anfragen bezüglich Daten an ein Backend weiterleitet. Solche Frameworks bieten viele Vorteile, wie bessere Wartbarkeit, saubere Trennung der Belange, höhere Geschwindigkeit, eine gute Zusammenarbeit zwischen Entwicklern und eine breite Community. Es gibt aber auch Nachteile, wie die Einführung einer weiteren Abstraktionsschicht und die damit einhergehende erhöhte Komplexität, eine Lernkurve, die (zu) schnelle Evolution des Ökosystems, die Notwendigkeit, ein Projekt spezifisch nach den Wünschen des Frameworks aufzusetzen, und einen Overkill für kleinere Projekte.

Ein JavaScript-Web-Framework erlaubt es somit, moderne Anwendungen mit modernen Tools zu erschaffen, mittlerweile nicht mehr nur fürs Web im Browser, sondern ebenfalls auf dem Desktop und als mobile Anwendungen auf Smartphones. Wer sich bisher noch nicht sicher war, was ein JavaScript-Front-end-Framework oder Web-Framework bedeutet, hat jetzt hoffentlich einen ersten Einblick bekommen. Zudem ist Vue als Einstieg in die große Welt der Webentwicklung genau richtig.

1.2Historie und das Team rund um Vue

Vue wurde von Evan You erschaffen, der bei Google mit AngularJS an einer Reihe von Projekten gearbeitet hat. In einem Interview sagte er mal, dass er das Beste an AngularJS herauslösen und als leichtgewichtiges Projekt anbieten wollte. Genau das hat er getan. Im Juli 2013 fanden die ersten Commits im Projekt statt. Eine erste öffentliche Version 0.6 erschien im Dezember des gleichen Jahres.

Seitdem ist die Beliebtheit von Vue konstant gewachsen, bis zur Version 3.0, die im September 2020 erschien. Im Jahr 2016 waren es circa 7.500 Sterne, im Jahr 2017 bereits über 36.000. Zudem zählte das Vue-Repository als das populärste Repository im Jahr 2016 (Stars, 2016). Das GitHub-Repository für Vue 2 (Team V., GitHub Repository für Vue 2, 2022) mit dem Quelltext des Vue-Projekts zählt mittlerweile über 190.000 Sterne und über 31.000 Forks (beides Stand Februar 2022). Da Vue 3 neuorganisiert wurde, gibt es dazu ein eigenes Repository (Vue, 2022). Das ist eine beachtliche Steigerung. Denn auch wenn Sterne auf GitHub keine verlässliche Metrik für die Beliebtheit sind, sind sie zumindest ein Indikator. Eine aktuelle Auswertung in der Umfrage The State of JS 2021 kommt zu dem Ergebnis, dass die Beliebtheit und Zufriedenheit etwas abgenommen hat (80%), aber immer noch auf einem hohen Wert verbleibt. Das Interesse und die Nutzung verbleiben bei einem nahezu unveränderten Wert (circa 50%) (State of JS Team, 2022).

Mittlerweile ist nicht mehr nur Evan You mit der Entwicklung von Vue beschäftigt. Eine ganze Reihe von Personen auf der ganzen Welt arbeitet gemeinsam am Projekt und den zahlreichen offiziellen Erweiterungen.

1.3Was ist Vue und was zeichnet es aus?

Das Ziel von Vue (Team V., Vue.js – The Progressive JavaScript Framework, 2022) ist es, die Vorteile reaktiver Datenbindung (Reactive Data Binding) und kombinierbarer Komponenten (Composable Components) mit einer einfach zu nutzenden Schnittstelle zu verknüpfen und zur Verfügung zu stellen.

Diese einfache API und die damit verbundene niedrige Hürde für den Einstieg sind ein Merkmal, das Vue auszeichnet und von vielen anderen Web-Frameworks und -Bibliotheken abhebt. Denn andere Frameworks und Bibliotheken gehen oft den Weg, eine Schnittstelle anzubieten, die so umfassend wie möglich ist. Ein weiteres Merkmal ist, dass Vue nicht als das alles umfassende Web-Framework gedacht ist. Vue nutzt das Model-View-ViewModel-(MVVM-) Entwurfsmuster und fokussiert sich auf den View-Layer und nur auf diese Schicht – ein weiterer Punkt, warum Vue als einfach zu adaptieren gilt, wenn es um den Einsatz im eigenen Projekt geht. Diese Designentscheidungen führen zudem dazu, dass sich Integration und Kombination mit anderen Bibliotheken einfach umsetzen lassen. Vue sperrt sich dabei selten, und die Community hat eine umfassende Palette an guten Erweiterungen geschaffen, die gerne als First-Party-Erweiterungen bezeichnet werden.

Diese Merkmale bedeuten aber nicht, dass wir mit Vue keine umfangreichen oder anspruchsvollen Webprojekte stemmen können. Mit Vue lassen sich sehr wohl hochkomplexe Single Page Applications (SPAs) erzeugen, was die zahlreichen kurz vorgestellten Use Cases gegen Ende dieses Buchs beweisen.

1.4Warum Vue?

Da mittlerweile zahlreiche Web-Frameworks existieren, steht immer die Frage im Raum, warum dieses oder jenes Framework für das eigene Projekt zum Einsatz kommen soll. In diesem Fall also die simple Frage: Warum Vue?

Das läuft auf die Frage hinaus, was Vue für einen konkreten Mehrwert bietet. Hier kommt der progressive Ansatz von Vue zum Tragen. Die Macher von Vue bezeichnen es als progressives Framework, weil Vue es erlaubt, mit minimalem Aufwand eine Anwendung mit Vue zu starten oder eine bereits bestehende mit einer ersten Vue-Komponente auszustatten. Dazu ist es nicht notwendig, die gesamte Architektur des Projekts von Grund auf neu zu entwickeln, damit es den Anforderungen von Vue gerecht wird. Die minimal notwendigen Schritte sind, Vue einzubinden, im einfachsten Fall als loses Skript, um dann eine Seite mit einer View-Komponenten auszustatten. Diese Änderungen als Grundlage genutzt, lassen sich weitere Komponenten einsetzen, Komponenten miteinander kombinieren und dergleichen. Wenn mit der Zeit die Anforderungen wachsen, lassen sich weitere Komponenten einbeziehen, zum Beispiel für das Routing oder das State Management.

Diese Möglichkeit, Vue in einem Projekt nach und nach einzusetzen, ist unter Entwicklerinnen und Entwicklern ein häufiger Grund, warum die Wahl auf Vue fällt. Insbesondere beim Einsatz des ersten Web-Frameworks ist diese iterative Adaption von Features ein großer Vorteil. Vue passt sich den Fähigkeiten der Entwicklerin oder des Entwicklers an und nicht andersherum. Das wirkt aktiv gegen den Trend vieler Frameworks und Bibliotheken, Neuankömmlinge abzuschrecken, weil sich das gesamte Projekt nach den Vorgaben des Web-Frameworks richten muss, was dazu führen kann, dass sich Einsteiger am Anfang komplett verloren...