Welches JavaScript Framework passt zu mir? – Vue.js

Im mittlerweile vierten Post der Blog-Serie “Welches JavaScript Framework passt zu mir?” wird das Framework Vue.js und dessen Besonderheiten betrachtet.

Alle Beiträge dieser Blog-Serie:

Einführung

Vue.js ist ein sehr modular gehaltenes JavaScript Framework zur Entwicklung von komponentenbasierten Oberflächen. Im Kern dient Vue.js ausschließlich der Oberflächenentwicklung, kann deshalb aber ganz einfach in andere Bibliotheken integriert werden. Vue.js wurde im Jahr 2014 von Evan You veröffentlicht. Evan You arbeitete jahrelang für Google und hatte in seinem Projektalltag viel mit Angular zu tun. Grundlegende Features wie Databinding und datenorientierter DOM-Manipulation imponierten You, jedoch benötigte Angular ihm zu viel Mehraufwand und war “zu groß” für seinen Anwendungsfall. You kam dabei auf die Idee, ein rudimentäres Framework zu entwickeln, das nur die Grundfeatures mitliefert:

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved? I was also curious as to how its internal implementation worked. I started this experiment just trying to replicate this minimal feature set, like declarative data binding. That was basically how Vue started.” – Evan You

Komponenten

Komponenten werden in Vue.js in .vue-Dateien implementiert. Diese Dateien enthalten alle Informationen zu der jeweiligen Komponente. Eine einfache HelloWorld Komponente sieht wie folgt aus:

HelloWorld.vue

<template>
    <h1>Hello World</h1>
</template>

<script>
	export default {
	  name: 'hello-world',
	}
</script>

<style scoped>
    h1 {
        font-size: 2em;
    }
</style>

Im Template-Block wird die Struktur der Komponente definiert. Die Syntax besteht aus normalem HTML, das um diverse Attribute von Vue erweitert wird. Im Script-Block ist mit dem Controller der Komponente das Kernstück. Im Style-Block stehen Styleanweisungen, die nur für die Komponente gelten.

Je nach Komponente können die jeweiligen Blöcke schnell unübersichtlich werden. Daher bietet Vue.js die Möglichkeit, die einzelnen Blöcke in eigene Dateien auszulagern:

<template src="./HelloWorld.html"></template>
<style src="./HelloWorld.css" scoped></style>
<script>
	export default {
		name: "hello-world"
	}
</script>

In diesem Beispiel werden das Template und die Styleanweisungen in separate Dateien ausgelagert, die im gleichen Ordner wie die .vue-Datei liegen. Über das src-Attribut ist es ebenfalls möglich, die Logik in eine eigene JavaScript-Datei auszulagern.

Data Binding

Eines der Kernfeatures von Vue ist das Databinding. Es dient dazu, aus dem Template auf Werte aus dem Controller zuzugreifen oder aber die Werte sogar synchron zu halten, sodass zum Beispiel auch bei Benutzereingaben der Controller stets den aktuellen Wert eines Eingabefeldes kennt.

<template>
    <h1>Hello {{name}}!</h1>
</template>

<script>
	export default {
		name: 'hello-world',
		data () {
			return {
				name: 'World'
			}
		}
	}
</script>

<style scoped>
  ...
</style>

In diesem Beispiel ist ein einfaches Databinding zu sehen. Der Controller der Komponente übergibt seinem Template die Variable name mit dem Wert “World”. Im Template wird dann mit doppelten, geschweiften auf die Variable verwiesen.

Einfaches Databinding in Vue

Einfaches Databinding in Vue


Beim einfachen Databinding übergibt der Controller den Wert nur dem Template. Wenn sich der Wert im Controller ändert, wird das Template neu gerendert und erhält den neuen Wert.

Neben dem einfachen Databinding überstützt Vue.js das 2-Wege-Databinding. Das heißt, dass ein Wert zwischen Template und Controller synchronisiert wird, egal ob der Wert im Controller oder im Template geändert wird.

2-Wege-Databinding in Vue

2-Wege-Databinding in Vue


Der Controller übergibt wie beim einfachen Databinding eine Variable an das Template. Das Template registriert anschließend über das Attribut v-model die Variable als Model. Dadurch wird der Controller über Änderungen der Variablen aus dem Template informiert. Allerdings kann nach wie vor der Wert im Controller geändert werden.

Methoden

Grundsätzlich kann man sämtliche Logik, die aus dem Template aufgerufen wird, auch im Template schreiben. Allerdings wird das gerade bei komplexeren Methoden unübersichtlich. Außerdem ist normalerweise der Controller für die Logik der Komponente zuständig. Daher bietet Vue.js eine Möglichkeit, dem Template Methoden des Controllers bereitzustellen:

export default {
	name: "mycomponent",
	data() {
		return {
			value: ""
		}
	},
	methods: {
		resetValue: function() {
			this.value = "";
		}
	}
}

In diesem Beispiel wird dem Template die Variable value übergeben. Außerdem wird dem Template die Methode resetValue bereitgestellt, über die der Wert von value zurückgesetzt werden kann.

<button v-on:click="resetValue">Reset Value</button>

Im Template kann die Methode einfach aufgerufen werden. In diesem Beispiel wird die Methode beim Klick auf einen Button ausgeführt. Eventhandler können in Vue.js auf zwei Arten registriert werden: Entweder mit v-on: wie im Beispiel oben oder mit @ (@click=”…”).

Formulare

Die Grundidee von Vue.js ist es, möglichst schlank und modular zu sein. Daher unterstützt Vue.js von Haus aus keine Formularvalidierung. Jedoch gibt es diverse externe Bibliotheken, die das ermöglichen. Mit reinem Vue.js werden Formulare über das v-model-Attribut realisiert:

Template

<form v-on:submit="formSubmitted">
	<input v-model="value" />
	<button type="submit">Submit</button>
</form>

Controller

export default {
	name: "mycomponent",
	data() {
		return {
			value: ""
		}
	},
	methods: {
		formSubmitted: function() {
			console.log(this.value);
		}
	}
}

In diesem Beispiel zeigt die Komponente ein Formular mit nur einem Eingabefeld und einem Button an. Das Eingabefeld wird über das v-model Attribut mit dem Controller verknüpft. Wird nun das Formular abgeschickt wird die Methode formSubmitted am Controller aufgerufen, die wiederum den aktuellen Wert des Textfeldes ausgibt.

Routing

Aufgrund der Modularität von Vue.js wird darauf verzichtet, standardmäßig einen Router mitzuliefern. Sollte Routing dennoch nötig sein, steht das vue-router Paket zur Verfügung. Mit Hilfe des Routers kann auf Seitennavigation reagiert und abhängig von der aktuellen URL Komponenten ein- und ausgeblendet werden. Der Vue Router unterstützt dynamische URL Parameter. Ein Beispiel für hierfür ist “/user/:username/post/:post_id”. In diesem Fall würde der Router reagieren wenn beispielsweise die URL “/user/oio/post/42” aufgerufen werden würde. Die Komponente, die für die URL angezeigt wird, erhält anschließend die beiden dynamischen Parameter und kann diese verwenden.

Testen

Um einfach Unit Tests erstellen zu können, liefert Vue die offizielle Bibliothek vue-test-utils, die grundlegende Funktionalitäten anbietet. Da vue-test-utils nur dazu dient, Unit Tests schreiben zu können, allerdings keine Funktionalität zum Ausführen von Unit Tests bietet, muss zusätzlich zu vue-test-utils noch ein Test Runner eingesetzt werden. vue-test-utils funktioniert zwar mit allen Test Runnern, es gibt allerdings zwei Test Runner, die im Vue-Umfeld am meisten verwendet werden.

Jest

Jest ist ein von Facebook entwickeltes Framework zum Ausführen und Schreiben von Tests. Ursprünglich wurde Jest auch für die Verwendung in React vorgesehen, ist aber komplett abstrahiert und kann daher auch zum Testen anderer Frameworks eingesetzt werden. Für die Verwendung von Jest in Vue wird noch das Zusatzpaket vue-jest benötigt, das als Konverter zwischen Vue und Jest dient.

Karma

Karma wurde ursprünglich für Angular entwickelt und stammt daher ebenfalls von Google. Um Einfachheit zu gewährleisten, wurde Karma als Kommandozeilentool umgesetzt und kann ohne große Konfiguration verwendet werden. Karma bietet die Möglichkeit, Tests sowohl in Headless Browsern wie PhantomJS als auch in realen Browsern wie Firefox und Chrome gleichzeitig auszuführen. Karma ist auf kein Testframework spezialisiert, sondern kann mit diversen Testframeworks verwendet werden.

Quellen

Short URL for this post: https://wp.me/p4nxik-2WQ
This entry was posted in Web as a Platform and tagged , , , . Bookmark the permalink.

Leave a Reply