Große Zukunft: Vue.js

Blaues und grünes V, ineinander verbunden

In den letzten Jahren sorgten JavaScript-Frameworks wie Googles AngularJS (2009 veröffentlicht) für deutliche Fortschritte in der Frontend-Entwicklung. Die direkte Datenbindung ermöglicht Single-Page-Websites aber auch umfangreichere, mehrseitige Anwendungen. Ein jüngerer Stern in dieser Welt ist das 2013 erschienene Vue.js, das auch auf dem Entwurfsmuster“Model View ViewModel“ (MVVM) basiert.  Dieses  ist eine Variante des „Model/View/Controller“ (MVC), das man aus den gängigen PHP-Frameworks kennt.

Auch beim MVVM werden Darstellung und Logik der Benutzerschnittstelle (UI) getrennt, durch den fehlenden Controller ist der Aufwand zur Implementierung aber geringer. Entscheidend ist, dass UI-Designer  und Programmierer der Geschäftslogik getrennt arbeiten können (auch AngularJS setzt auf MVVM).

Das „view“ gesprochene Vue.js gilt unter Entwicklern aber als einfacher und leichter erlernbar als AngularJS. Im Grunde reichen Kenntnisse in HTML und Javascript um mit Vue.js arbeiten zu können.

Da Vue.js durch die Datenbindung (also die Weiterleitung der Daten von Objekt zu Objekt) Eingabe und Ausgabe direkt an die Datenquelle koppelt, müssen diese Informationen nicht erst aus dem DOM gelesen werden (wie es z.B. mit jQuery geschieht).

In einer HTML-Datei können mehrere Vue-Instanzen eingesetzt werden, eine ist als zentrale Instanz notwendig. In dieser wird mittels der el-Eigenschaft eine Verbindung zu einem Knoten im DOM erstellt, z.B.

 el: "#main"

Doppelschnurrbärte für die Ausgabe

Für die Ausgabe der Elemente im HTML werden, wie auch bei AngularJS und anderen JS-Frameworks die „double-mustaches“, also zweifache geschweifte Klammern verwendet.

<div>{{wert}}</div>

Mit diversen Direktiven, die jeweils mit einem v- beginnen, können einfach Aktionen über Attribute im HTML-Tag ausgeführt werden.

Eine Liste wird durch Iteration über ein Element also ziemlich einfach aufgebaut:

<ul>
   <li v-for="wert in werte">{{wert}}</li>
</ul>

Zahlreiche Erweiterungen ermöglichen eine schnelle Ergänzung von Vue.js-Anwendungen, eine Übersicht findet sich unter awesome-vue.

Dort finden sich neben gebrauchsfertigen Komponenten für z.B. Overlays, Menüs, Carousels oder Kalender auch weitere Links zu Tutorials, Beispielen und Projekten.

Der Name Vue.js tauchte auch häufiger in Berichten über eine JS-Lösung für das meist verbreitete Seitenerstellungssystem auf: In WordPress-Kreisen herrschte Aufregung, nachdem Facebook die Lizenzbedingungen für das bislang verwendete React geändert hatte. Zwar sollen nun keine bestimmten Frameworks mehr zum Einsatz kommen, sondern ein offener Ansatz gewählt werden – dennoch hat das junge Vue.js damit verstärkte Aufmerksamkeit gewonnen.

In der aktuellen Version 2.5 wurden die TypeScript-Integration und die Fehlerbehandlung verbessert.

 

Das Vue.js-Projekt selbst resiediert unter vuejs.org, Entwickler Evan You bloggt unter medium.com/the-vue-point.

Die Einführung findet sich unter vuejs.org/v2/guide/.