Vue.js

Vue.js

Vue.js

Heute soll es um Vue.js gehen. Das sagt Wikipedia:

Vue.js ist ein Webframework zum Erstellen von Single-Page-Webanwendungen nach dem MVVM Muster. Vue.js gilt als progressiv und inkrementell adaptierter sowie less opinionated im Vergleich zu anderen Webframeworks.

Wenn du, so wie ich, gehofft hast, dass man das verständlicher erklären kann, hier ein Versuch:

Webframework: Wenn du bereits HTML, CSS und JavaScript „kannst“, dann hilft dir ein Webframework bestimmte Aufgaben schneller zu erledigen. Bekannte Webframeworks sind beispielsweise Bootstrap, AngularJS, Ember.js, jQuery, MooTools und React.

Single-Page Anwendung: Darunter versteht man eine Webanwendung, die aus einem einzigen HTML Dokument besteht, dessen Inhalte dynamisch nachgeladen werden.

MVVM-Muster: MVVM ist die Abkürzung von ModelView ViewModel und ist eine Variante des Entwurfsmusters Model View Controller (MVC).

Entwurfsmuster: Ein Entwurfsmuster ist eine bewährte Lösungsschablone für wiederkehrende Probleme in der Softwareentwicklung und übrigens auch in der Architektur.
In der Architektur ist beispielsweise ein „Fensterplatz“ ein Entwurfsmuster in einem Haus. Jeder freut sich über einen gemütlichen Platz am Fenster.  

… gilt als progressiv … : Unter einer progressiven Web App (PWA) versteht man eine responsive Website, die sich wie eine native App „anfühlt“. PWAs können auch offline bedient werden und setzen zwingend das HTTPS-Protokoll ein. Eine gute PWA kombiniert die Website, die mobile Version der Website und die native App und spart dadurch erhebliche Entwicklungskosten.

… gilt als inkrementell adaptierter …: in Vue.js lassen sich Komponenten (pluggable components) schreiben, die man in jedem Projekt benutzen kann. Dadurch gibt es für fast alle „gängige Herausforderungen“ bereits existierenden Code, der nach und nach eingebaut und genutzt werden kann.

… gilt als less opinionated …: In manchen Webframeworks, beispielsweise Angular und React sind viele Strukturen vorgegeben. Vue.js ist dagegen einfacher gehalten und leichter erlernbar. HTML und JavaScript Kenntnisse reichen tatsächlich aus um Vue.js zu verstehen.

Hallo Welt

Um einen Eindruck zu bekommen, wie eine Programmiersprache funktioniert schreibt man meist ein „Hallo Welt“ Programm. Mit Vue.js geht das komplett im Browser, da du ja nur eine HTML und eine JavaScript Datei benötigt. Der folgende Screenshot lässt sich unter https://jsfiddle.net/HagenGraf/nct6hpfw/ online nachvollziehen.

jsfiddle - Hallo Welt
jsfiddle – Hallo Welt

Im HTML Fenster wird ein Bereich definiert mit der id app. Darin befindet sich in geschweiften Klammern der Text Hallo Welt. Im JavaScript Fenster wird die id „verbunden“ und ausgeführt.

Damit der Code ausgeführt wird, musst du auf Run klicken. Im JavaScript Fenster habe ich die das Vue 2.2.1 Framework ausgewählt.

jsfiddle - Auswahl des Frameworks
jsfiddle – Auswahl des Frameworks

Prinzipiell kannst du dir die HTML Seite wie ein Template vorstellen. In diesem Template werden Bereiche definiert, die von Vue.js mit Leben gefüllt werden.

Hier eine andere Version des Hallo Welt Programms, die das Prinzip besser verdeutlicht.

jsfiddle - Hallo Welt 2
jsfiddle – Hallo Welt 2

Die Daten im data Bereich können mit der id verbunden werden. Dazu werden Direktiven benutzt, deren Namen mit v- beginnen. In diesem Fall v-if=“seen“.  Wenn der Inhalt von seen true ist wird die Nachricht angezeigt, wenn er false ist, nicht.

If Direktive
If Direktive

Diese Art der Programmierung ist tatsächlich „leicht“ zu erlernen und macht Spass. Auf der Projektseite von Vue.js befindet sich eine ausführliche Einführung (https://vuejs.org/v2/guide/index.html).

Fazit

Mit der Anzahl der JavaScript Frameworks ist es ja so eine Sache. Jede Woche gibt es gefühlt ein neues Projekt und die Orientierung fällt schwer. Vue.js ist meiner Meinung nach mehr als einen Blick wert. Es ist mittlerweile stabil und ausgereift und verglichen mit Facebooks React kommt man tatsächlich relativ schnell zu Erfolgserlebnissen und kann besser entscheiden, ob man Vue.js einem Projekt benutzen will.

Links


tl;dr: Vue.js ist ein interessantes JavaScript Framework

 

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Ein Gedanke zu „Vue.js“

Kommentar verfassen