jQuery ist ein Framework, welches gegen Ende der 2000er sehr Populär wurde. Damals waren die Möglichkeiten mit purem JavaScript die DOM zu manipulieren doch eher mühselig und unschön. jQuery sollte die Lösung dafür sein und hat eine neue Ära für die Web-Sprache eingeleitet. Aber wie aktuell ist das Framework überhaupt?
Viele Probleme wurden mit neueren JavaScript-Normen behoben und machen jQuery bis auf seine Bequemlichkeit redundant. Neuere Frameworks liefern viel mehr Komfort mit dem Vorteil auch mehr an Fähigkeiten zu liefern und eines dieser Frameworks kristallisiert sich besonders als der Ablöser für jQuery heraus: Vue.Js.

Vue.Js ist ein OpenSource-Framework, welches von Evan You in 2014 veröffentlicht wurde. Vor allem durch neue Möglichkeiten wie das Two-Way-Databinding oder das Erstellen von Komponenten hat es seine Berechtigung in der modernen Webentwicklung erkämpft. Das Framework wurde besonders dadurch populär, dass es zwar sehr ähnlich zu Angular ist, aber dabei deutlich schlanker und verständlicher.

Der direkte Vergleich

In diesem Beispiel haben wir einmal das Two-Way-Databinding in beiden Frameworks demonstriert.
Two-Way-Databinding heißt nichts anderes, als dass eine Variable sowohl abgerufen wird wie auch übernommen wird. Das klingt etwas abstrakt ist aber im Grunde sehr einfach. Wenn man z.B. mehrere Text-Input Felder hat, welche alle die selbe Variable verändern will man auch, dass die anderen Felder diese Variable aktualisieren, oder das irgendwo dieser Text in Echtzeit mit verändert wird. Two-Way-Databinding macht das auf sehr einfache Art und Weise möglich.
In unserem Beispiel haben wir jeweils ein Element mit einem Text-Input. Wenn man etwas eingibt wird der Text in Echtzeit über dem Input angezeigt.


Der Editor kann übrigens bearbeitet werden um zu experimentieren 😉

Mit jQuery müssen wir einen Eventlistener erstellen, der dauerhaft prüft, ob im Input eine Taste gedrückt wurde. Wenn das zutrift, dann wird der Inhalt des Inputs zwischengespeichert und dem <p>-Element übergeben.

Bei Vue.Js gibt man in HTML dem Input ganz einfach den Attribut v-model und schreibt im <p>-Element mit doppelten geschweiften Klammern den Variablenname und den Rest übernimmt das Framework.

Von der Codelänge unterscheidet sich das in diesem Fall nicht, aber bei größeren Projekten kann das schon viel ausmachen. Vue.Js ist sehr modular und lässt viel wiederverwenden. Im Grunde war der effektive Code für dieses Beispiel eigentlich nur eine Zeile lang. Die Initialisierung von Vue muss nur einmal geschehen, danach können im Inneren alle Funktionen geschrieben werden. Bei jQuery müsste man sich das Setup jedesmal von neuem aufbauen oder selber eine Art modulares System erschaffen.

Komponenten

Vue.Js protzt vor allem mit seinen Komponenten. Eine Vue-Komponente ist wie ein eigener HTML-Tag, den man selbst Definiert und eigene Funktionalität gibt. In unserem Beispiel haben wir eine kleine To-Do Liste gebaut

In Vue können wir die komplette Liste als eine eigene Komponente schreiben, da so eine Liste wiederverwendbar ist. Wir haben dem Todo-Element zwei Attribute gegeben, die es einfach machen dieses Element dynamisch für andere Zwecke verwenden zu können. Man kann einen Titel vergeben der dann als Überschrift verwendet wird und man kann ein Array an Todos vergeben.

jQuery hingegen ist sehr statisch. Wir können unsere jQuery-Liste nur einmal verwenden und würden wir sie ein zweites mal haben wollen, müssten wir den gesamten Code kopieren und anpassen.

Fazit

Vue.Js bringt alles mit sich, was jQuery kann und noch viel mehr. Es ist viel eleganter und übersichtlicher. jQuery bietet einfach nicht mehr die Notwendigkeit, die es in 2009 noch hatte. Für kleinere Projekte kann jQuery aber dennoch sehr sinnvoll sein, z.B. wenn jQuery bereits als Library integriert ist oder es nur um kleine Manipulationen im Frontend geht.


Was sind eure Erfahrungen mit Vue.Js? Habt ihr weitere interessante Beispiele? Schreibt uns eure Meinung oder kommentiert diesen Beitrag.