Vue.js: Zeitgemäße und wartbare JavaScript-Client-Anwendungen

Inhaltsverzeichnis

Vue.js ist ein populäres JavaScript-Web-Framework, mit dem sich sowohl kleine als auch große Clientanwendungen erstellen lassen. Es bietet vielseitige Funktionen und kontinuierliche Weiterentwicklung, aber auch stabile APIs und ein aktives Ökosystem. Damit ist es eine mögliche Alternative zu Angular und React.

Derzeit liegt Vue.js in Version 2.5 vor. Für 2018 ist Vue.js 3 geplant. Die API soll zu Version 2 unverändert bleiben. Die Änderungen finden unter der Haube statt, um von heutigen Browsern profitieren zu können. Das Vue-Team plant Vue.js 2 parallel dazu weiterentwickeln, um weiterhin ältere Browser wie den Internet Explorer 9 zu unterstützen.

Alles gute Gründe, sich Vue.js genauer anzuschauen. Der Autor selbst setzt Vue.js seit Anfang 2016 ein.

Was kann Vue.js?

Zunächst ist Vue.js nur eine einzelne Bibliothek ohne weitere Abhängigkeiten zu anderen Bibliotheken. Sie kümmert sich um die Anzeige von Daten auf einer HTML-Seite (View-Binding), Übernahme von Werten aus Formularen (Input-Binding) und Behandlung von Nutzer-Interaktionen (Event-Binding). Dabei bietet Vue.js Unterstützung für Templates, Mixins, Strukturierung der Anwendung in Komponenten, berechnete und gecachte Werte und Übergänge (Transitions).

Über APIs kann die Programmlogik auf Ereignisse im Lebenszyklus einer Komponente reagieren, zum Beispiel auf das Laden der Komponente. Zusätzliche Bibliotheken des Vue.js-Projekts können weitere Funktionen aktivieren. Dazu gehören unter anderem Routing für die Navigation zwischen verschiedenen Komponenten der Anwendung, Vuex für State-Handling in der Anwendung und Server-Side Rendering.

Optional können Entwickler statt JavaScript auch TypeScript einsetzen. Statt HTML-Templates sind JSX-Templates ebenfalls möglich.

Mehr Infos

iX-Workshop zu Vue.js

Am 13. September findet in Hürt bei Köln ein iX-Workshop zum Thema "Einstieg in Vue.js" statt. Die Trainer führen die Teilnehmer an die Entwicklung von Single-Page-Anwendungen mit Vue.js heran. Anhand von vielen Hands-on-Übungen werden die Basis-Komponenten der Konzepte von Vue.js vermittelt.

Welche Werkzeuge benötigt das Entwicklungsteam?

Bei der Entwicklung helfen zusätzliche Plug-ins in der jeweiligen Entwicklungsumgebung. Für die JetBrains-Produkt-Familie wie IntelliJ Ultimate, PHPStorm und WebStorm existiert ein Vue.js-Plug-in. Für Visual Studio Code gibt es das Vetur-Plug-in, das das Vue.js-Team selbst bereitstellt. Um Vue.js-Anwendungen im Browser zu analysieren und zu debuggen, hilft ein ein offizielles Devtools-Plug-in für Chrome und Firefox weiter.

Anwendungen können Vue.js als Bibliothek direkt in einer HTML-Seite einbinden. Für ein komplexeres Setup mit Build-Werkzeugen wie Webpack oder bei Setups wie Progressive Web Apps hilft das Kommandozeilen-Werkzeug "vue-cli", das im Laufe des Artikels noch ausführlicher zur Sprache kommt.

Anwendungsentwicklung mit Vue.js

Ein Hello-World-Beispiel zeigt die notwendigen Schritte für eine erste Vue.js-Anwendung. Zusätzliche Werkzeuge wie Node, NPM und Webpack benötigt man hierfür noch nicht.

<div id="app"> <!--1-->
  {{ message }}
</div>
<script src="js/vue.js"></script> <!--2-->
<script>
  var app = new Vue({ // <!--3-->
    el: '#app',
    data: {
      message: 'Hello Vue.js!'
    }
 })
</script>

Zu jeder Vue.js-Anwendung gehören drei Teile:

1. Definieren des Teils der Website, für die Vue.js zuständig sein soll. In diesem Fall ist das DOM-Element eindeutig mit app benannt. Darin ist auch das Template enthalten, das Vue.js für die Anzeige benutzen soll.
2. Laden der JavaScript-Bibliothek für Vue.js. Für Entwicklungszwecke ist eine nicht minifizierte Version, die zusätzliche Fehler- und Warnmeldungen enthält, vorhanden.
3. Schließlich startet Vue.js innerhalb der Website. In diesem Fall wird die Referenz app auf die Seite mitgegeben, an die sich Vue.js binden soll. Mit data erhält Vue.js eine Struktur, die zum Beispiel Daten für die Anzeige enthält.

Lädt man diese HTML-Seite im Browser, startet Vue.js. An der Stelle, an der der Platzhalter message steht, erscheint nun Hello Vue.js!. Mit den Vue.js-Developer-Tools für Chrome oder Firefox können Entwickler die Vue.js-Instanz auf der Seite inspizieren und sogar die Werte innerhalb von data verändern.