Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 52

Javascript-Frameworks: Neue Gestaltungsfreiräume mit Vue

(Shutterstock/ oatawa)

Vue gehört zu den beliebtesten Javascript-Bibliotheken für die Entwicklung ­größerer Single-Page-Anwendungen. Es bietet Entwicklern besondere Freiräume bei der ­Gestaltung der Anzeigelogik. Eine Einführung.

Wer größere Applikationen umsetzen will, kommt ganz schnell auf eine der drei Javascript-Bibliotheken Angular, React oder Vue. Jede verfolgt eine grundlegend andere Strategie, obwohl sie alle dazu gedacht sind, leistungsfähige Single-Page-Applikationen umzusetzen. Vue ist im Vergleich zu den anderen beiden noch sehr jung – der erste Commit in das Github-Repository war im April 2016. Zwar liegt seine Verbreitung deshalb natürlich noch hinter seinen Konkurrenten, doch in den vergangenen Monaten ist es in der Community immer beliebter geworden und hat sich erstaunlich schnell verbreitet. Das hat gute Gründe: Im Kern ist Vue ein schlankes Framework, das sich lediglich um die Darstellung der Inhalte und das Databinding kümmert. Die Architektur ist gut durchdacht, stabil und mittlerweile praxiserprobt.

Im Gegensatz zu Angular ist Vue ein spezialisiertes Framework. Es konzentriert sich auf die Anzeigelogik, also den View-Teil des MVVM-Patterns. Deshalb lässt das Framework einem Entwickler auch mehr Gestaltungsspielraum und macht weniger strikte Vorgaben als andere Frameworks. Gerade in größeren Applikationen kommen neben Vue weitere Bibliotheken zum Einsatz, etwa Vuex für das State-Management. Auf diese Weise können Entwickler je nach Anforderungen ganz unterschiedliche Bibliotheken miteinander kombinieren, um eine optimale Lösung für genau einen bestimmten Fall zu finden. Neben der Flexibilität ist die Performance von Vue ein weiterer Pluspunkt. Ähnlich wie React hat auch Vue eine Abstraktionsschicht zum DOM. Bei anzeigelastigen Applikationen mit hoher Frequenz an ­Änderungen – bei denen die vielen DOM-Modifikationen ein Performance-­Problem sein können – sorgt Vue für optimierte Zugriffe.

Vue ist Community-getrieben. Das bedeutet, dass Firmen höchstens als Sponsoren auftreten. Erfinder und treibende Kraft hinter dem Framework ist Evan You, in der Entwicklergemeinschaft auch bekannt als @youyuxi. Seit dem ersten Commit sind mittlerweile über 2.500 weitere Commits in das ­Repository gelaufen und das von fast 200 Beitragenden. Auch die übrigen ­Github-Statistiken von Vue können sich sehen lassen: über 90.000 Stars und mehr als 13.000 Forks. So hat Vue mittlerweile die Version 2.5 erreicht und lässt sich unter anderem über den Paketmanager NPM installieren. Dort erreicht das Vue-Paket regelmäßig über 300.000 Downloads pro Woche, ebenfalls ein recht eindrucksvoller Wert. Einer der Gründe für den kometenhaften Aufstieg des Frameworks ist die niedrige Einstiegshürde. Vue ist im Vergleich zu anderen Frameworks relativ einfach zu erlernen. Außerdem gibt es eine sehr gute Dokumentation. Mehr Infos liefert die offizielle Projektwebsite unter vuejs.org.

Vue installieren

Als erstes müssen Entwickler Vue einbinden. Das geht, wie bei jedem anderen Framework auch, auf mehrere Arten. Es empfiehlt sich jedoch, Vue entweder per NPM mit dem Kommando npm install vue oder über die Vue CLI zu installieren. Die CLI soll die initiale Entwicklung einer Applikation beschleunigen, indem sie die Basisstruktur aufsetzt und alle Abhängigkeiten ­installiert. So können Programmierer direkt mit der Entwicklung beginnen. Vue CLI ist ein separates Projekt, das allerdings in der Vuejs Github-Organisation entwickelt wird. Installieren lässt sie sich mit dem Kommando npm install -g vue-cli. Durch die globale Installation steht CLI systemweit zur Verfügung. Mit dem Kommando vue init webpack my-project können Entwickler dann ein neues Projekt mit dem Namen „my-project“ auf Basis des Webpack-Templates erzeugen. Neben Vue selbst sind anschließend auch weitere Bibliotheken aufgesetzt, wie der „vue-router“ oder optional auch eine Testinfrastruktur. Nach erfolgreicher ­Initialisierung können Entwickler das Projekt mit dem Kommando npm run dev im Entwicklungsmodus starten.

Nachdem Entwickler Vue erfolgreich initialisiert haben, können sie das Projekt mit dem Kommando „npm run dev“ im Entwicklungsmodus starten. (Screenshot: Vue)

Grundlegende Konzepte

Mit Vue kann man Applikationen komponentenbasiert ent­wickeln. Das bedeutet, dass sich die Applikation aus zahlreichen kleinen Bausteinen – den Komponenten – zusammensetzt. Jede Komponente sollte sich im Idealfall nur um eine bestimmte Aufgabe kümmern. Auf diese Weise können Entwickler die Komponenten leicht wieder verwenden und testen. Außerdem sollte es pro Datei nur eine Komponente geben. Das bedeutet allerdings, dass umfangreichere Applikationen sehr viele Dateien erfordern. Um hierbei den Überblick zu behalten, sollten Entwickler die Komponentendateien in einer Verzeichnishierarchie ablegen. Sind sie fachlich gruppiert, lassen sie sich relativ einfach lokalisieren. Der nachfolgende Codeblock enthält eine einfache Komponente.

<template>
  <div>
    <button v-on:click="handleClick">Say hello</button>
    <h1 v-if="buttonClicked">Hello {{ name }}</h1>
  </div>
</template>

<script>
export default {
 name: 'HelloWorld',
  created() {
    console.log('created');
  },
  data() {
    return {
      buttonClicked: false,
      name: 'Klaus',
    };
  },
  methods: {
    handleClick() {
      this.buttonClicked = true;
    },
  },
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

 

Das CLI-Werkzeug erzeugt bei der Initialisierung automatisch die Komponente HelloWorld. Im Beispiel handelt es sich um eine Variante dieser Komponente. Sie ist im ­src/components-­Verzeichnis in einer Datei mit dem Namen „HelloWorld.vue“ zu finden. Die Datei gliedert sich in drei Teile: Zunächst gibt es die Definition des Templates. Dabei handelt es sich um die HTML-Struktur, die die Applikation beim Einbinden der Komponente rendert. Dem folgt ein Script-Tag mit dem Javascript-Teil der Komponente. Am Ende der Datei findet sich ein Style-Tag mit dem Attribut scoped. Dieses sorgt dafür, dass das CSS nur für diese Komponente gilt.

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Stilwaechter

Danke für die übersichtliche Zusammenfassung! Habe jetzt schon von mehreren Stellen Liebesgedichte an Vue gehört, scheinbar sollte man sich das mal genauer ansehen ;)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden