@

Dynamische Web Oberflächen mit Vue.js

Und warum das so geil ist.

posted by Bernd Zelba

am 12. Apr 2016

Stell dir vor, dein Frontend ist abstrahiert in einzelne Objekte und alles was du an diesen Objekten änderst spiegelt sich im Frontend und umgekehrt wieder, nicht schlecht oder?

Genau das versuchen neue Technologien auf Basis von Ecma Script 5/6 umzusetzen, einige Beispiele wären da:

  • Vue.js
  • react.js (facebook)
  • angular.js (google)
  • ember.js
  • uvm.

Alle versuchen Sie auf ähnliche Weise das Frontend dynamischer zu gestalten und die stärken von JS auszuspielen, manche Bibliotheken bieten sogar ganze MVC ähnliche Strukturen an, eine APP in JS? Wieso nicht? Das Zusammenspiel mit Server basierten Sprachen wie PHP, Ruby und Co. basiert dabei dann idR auf eine Rest Schnittstelle die von diesen Frameworks angesprochen werden kann, nur um den Zusammenhang zu klären.

Vue.js und react.js bilden dabei die Ausnahme, die beiden Kandidaten arbeiten fast ausschließlich auf View Ebene und ermöglichen einige, sagen wir "Nettigkeiten". Jeder kennt das Problem, wenn man versucht einen Sync, eine Prüfung oder ähnliches auf einem Input Feld zu generieren, dann fängt man gerne aus Gewohnheit damit an einen Event Listener über jQuery auf das entsprechende Feld lauschen zu lassen, klappt auch ist aber auf Dauer und ab gewissen Projektgrößen mehr als ineffizient, vor allem im Team. Wäre es nicht besser, wenn wir einfach ein Model hätten welches unser Formular oder Teilkomponenten wiederspiegelt (wie eingangs erwähnt)?

Neben all den anderen Probanden hat sich dabei nach Recherche und ein paar Tests Vue.js hervor getan. Vue.js nutzt two way binding, d.h. jede Änderung am Model ändert die View und umgekehrt. Dazu ist die Doku und API Coder freundlich aufgebaut, die Syntax hat einige Kurzschreibweisen und ist logisch, das look & feel passt einfach. Mittlerweile hat Vue.js auch Version 1 geknackt und erweist sich als äußerst stabil in der Handhabe. Um euch die Funktionsweise kurz zu erläutern gibt es ein kleines Beispiel, das geht leichter runter :-)

Ein klassiches Formular mit ein paar Feldern, hier vereinfacht mit einer Eingabe:

<form id="my-form">
    <input type="text" name="amount" v-model="amount"/>
    <button type="submit">Senden</button>
</form>

Wir haben ein Formular und ein Model zugewiesen, nun müssen wir nur noch auf JS Ebene diese an Vue.js übermitteln:

Vue({
    el: '#my-form',//Wrapper Element für Models
    data: {//Alle Models im Wrapper
        amount: 0
    },
    methods: {//Methoden die mit den Models arbeiten können
        foo: function() {
            this.amount++;//alle attribute aus data können wie eine lokale variable abgerufen werden
        }
    }
    //Viele weitere Möglichkeiten wie z.B. computed, filter usw.
);

In der Regel sagen wir der Vue Konstanten welchen Wrapper wir nutzen und arbeiten dann über die festen Attribute unsere Logik ein. Generell braucht man fast immer el, data und methods. Alleine damit kann man schon eine Menge realisieren.

Weitere schöne Beispiele gibt es auf der offiziellen Webseite!

Natürlich hat auch Vue seine Schwächen, so ist das Projekt noch relativ jung und man findet nicht auf Anhieb direkt eine Lösung via Google, Stackoverflow und Co. Wer aber dennoch wagemutig ist kann sich die gut gemachte Lernserie auf Laracast anschauen (generell ist Laracast gut um Einblick in aktuelle Software und Technik rund ums Web zu bekommen).

Probieren geht über Studieren!

data-url="https://epunks.de/blog/artikel/dynamische-web-oberflachen-mit-vuejs-43.html" data-services="["facebook","twitter","xing","googleplus","linkedin","info"]"