Die Nutzung eines JavaScript Frameworks ist in der Web Entwicklung kaum noch wegzudenken. Neben einer kürzeren Entwicklungszeit sorgen sie auch für gut lesbaren und damit solidem Code. Bei der grossen Anzahl an Optionen (React, Angular, etc.) stellt sich jedoch die Frage, warum gerade VueJS?

Möchte man sich mit diesem Thema ausgiebig beschäftigt, findet man dazu auf der offiziellen Website von VueJS bereits einen ausgezeichneten Vergleich. Hier möchten wir uns allerdings auf die Punkte beschränken, die für uns den ausschlaggebenden Unterschied machen:

Leichte Implementierung

Als Web Agentur werden wir neben neuen Projekten auch mit der Wartung und Optimierung älterer Projekte betraut. Gerade hier stehen wir häufig vor der Herausforderung  umfangreiche Funktionalitäten in einen bestehenden Frontend Code zu implementieren.

An dieser Stelle sind wir mit VueJS das erste mal in Berührung gekommen. Wir waren begeistern, wie schnell sich einzelne Teile einer Website zu einer Vue App umstrukturieren lassen, ohne dabei den Code der restliche Seite anpassen zu müssen.

Ein abgewandeltes Beispiel aus der offiziellen Dokumentation spricht Bände:

See the Pen VueJS Hello Example by Jörg Bayreuther (@mediadivisiongmbh) on CodePen.

Wie hier gut zu sehen ist benötigt eine VueJS App nichts weiter, als ein HTML Element, das als Container dient, und die Initialisierung einer neuen Vue Instanz per JavaScript. Der Code innerhalb des HTML Elements wird nun durch Vue verwaltet und kann mit Attributen v-model und Variablen {{message}} um Interaktionen erweitert werden.

Da grosse Teile der Funktionalität sich innerhalb des HTML Codes abspielt, können bereits fertige HTML Templates schnell zu einer voll funktionsfähigen Vue App umgebaut werden.

Skalierbar und performant

Trotz der vergleichsweise geringen Lernkurve bietet VueJS Funktionen, mit denen sich selbst komplexe SPAs übersichtlich strukturieren lassen. Mittels Vue Components kann eine Applikation in kleine Einheiten zerlegt werden, die sowohl übersichtlich als auch performant sind.

Hier eine sehr einfache Todo App, die von Components Gebrauch macht:

See the Pen VueJS Component Example by Jörg Bayreuther (@mediadivisiongmbh) on CodePen.

Wie man sieht kann ein Vue Component sein eigenes Template – hier <script type="text/x-template" id="todo-item"> – verwenden. Nach der Initialisierung des Component mittels vue.component('todo-item', {...}) kann dieser nun in der Hauptinstanz der Vue App als HTML Element (<todo-item :todo="todo">) verwendet werden. Mittels sogenannter Properties übergibt die Hauptinstanz Daten an einen Component (:todo="todo").

Da die Definierung eigener Component Templates innerhalb des HTML Codes schnell unübersichtlich wird, bietet VueJS die Möglichkeit Single File Components zu erstellen. Auf diese Art werden logische Bausteine innerhalb einzelner Dateien definiert und können später z.B. per Webpack oder Browserify zu einer App kompiliert werden. Da dieses Thema sehr in die Tiefe geht, wird es dazu künftig einen separaten Beitrag geben.

Hervorragende Dokumentation

Alle oben genannten Vorteile wären kaum etwas wert, wenn man nicht weiss, wie sie einzusetzen sind. Zum Glück bietet VueJS eine Dokumentation, die sich nicht nur gut lesen lässt, sondern auch fundiertes Wissen vermittelt.

Neben unzähligen Codebeispielen und Tipps für die Praxis findet man hier eine ausführliche API Beschreibung, die keine Wünsche offen lässt. Wer nun also Lust bekommen, findet dort alles, was er braucht um seine erste App mit VueJS umzusetzen.

Wenn Sie Fragen zu diesem Thema haben, oder Experten für die Entwicklung von VueJS Applikationen suchen, freuen wir uns über Ihre Kontaktanfrage.