Vue.js – it’s simple until you make it complicated

Das JavaScript-Universum ist voller Tools, und man hat oft die Qual der Wahl. Prinzipiell unterscheiden wir hier zwischen Development Frameworks und Libraries. Eines dieser Frameworks ist Vue.js, und in der Beliebtheit geht es bei den Entwicklern gerade durch die Decke. Als Einführung in das Vue.js Framework schauen wir uns die Besonderheiten, Vor- und Nachteile an. Die Entscheidung, ob ihr zukünftig mit Vue.js arbeiten wollt, und ihr euch darin wohl fühlt, trefft letzten Endes ihr.

Wieder ein neues Framework und warum?

Vue.js hilft euch beim Erstellen von Webinterfaces oder einfachen Anwendungen, da es sich wunderbar in andere Frameworks wie electron oder sogar react integrieren lässt. Ihr braucht kleine Komponenten in euren Anwendungen ohne großen Overhead? – Dann solltet ihr euch mit Vue.js beschäftigen. Es verfolgt den Ansatz „Get shit done“, und so fühlt es sich auch in der Entwicklung an. Man erzielt schon mit wenigen Zeilen Code erstaunliche Ergebnisse.

In den letzten Monaten und Jahren stieg die Beliebtheit des Frameworks kontinuierlich an, und die Community wächst rasant. Dies zeigen auch die Trends in Google und Github , aber überzeugt euch selbst davon.

Als modernes Web Framework nutzt Vue.js das von react.js bekannte virtual DOM (Document Object Model), legt viel Wert auf Performance und hat eine sehr flache Lernkurve. Das virtual DOM ist eine Abstraktion des bekannten DOM aus dem Browser, es ist leichtgewichtiger und schneller im Abarbeiten von Befehlen, die wir über das Framework herein geben können. Vue.js ist sowohl reaktiv als auch deklarativ und erlaubt es euch somit, visuelle Elemente zu erstellen und diese erst bei Anfrage zu darzustellen. Dies passiert natürlich auch, wenn sich bestimmte Zustände und Daten in euren Komponenten ändern.

Das beste Feature ist das Arbeiten mit den Single File Components (SFCs). In der Vergangenheit habe ich viel im Bereich wartbare CSS- und HTML- Architektur gearbeitet. Der Ansatz des Atomic Principles zieht sich in Vue.js wie ein roter Faden durch. Idealerweise könnt ihr diese kleinen Komponenten in einer riesigen Applikation zusammenfassen, oder ihr pickt euch einfach die Komponenten raus, die ihr benötigt, und integriert diese in ein bestehendes Projekt.

Welche Vorteile habe ich durch Vue.js?

Es geht hier nicht um die Frage danach, ob react, angular, svelte oder irgendein anderes Framework, das euch gerade über den Weg läuft, besser oder schlechter als Vue.js ist. Viel mehr liegen die Vorteile eines Frameworks darin, wie es euch die Arbeit erleichtern kann, sauberen, wartbaren Code und die entsprechenden Anwendungen zu entwickeln. Somit hat jedes dieser Frameworks seine Daseinsberechtigung, und sie helfen euch beim Lösen der alltäglichen Probleme in der Entwicklung. Die Entscheidung liegt letzten Endes bei euch, und ihr müsst euch darin wohlfühlen.

Das spricht aus meiner Sicht für Vue:

• Gute Dokumentation. Eines der wichtigsten Dinge ist eine gute Dokumentation. Sie zeigt alle Optionen, die das Framework bietet und entsprechende Best-Practice-Beispiele. Die Dokumentation bei Vue.js wird ständig verbessert und aktualisiert, enthält einen leichten Einstiegsleitfaden und eine sehr gute Übersicht der API . – Ich tendiere dazu zu behaupten, mit eine der besten, die mir je über den Weg gelaufen ist.
• Lernkurve. Verglichen mit anderen Frameworks, ist das Konzept hinter Vue.js und dessen API viel einfacher und leichter zu verstehen. Gerade für Entwickler, die bereits viel Erfahrung im Frontend haben, ist das extrem hilfreich. Hinzu kommt der gute Unterbau von Vue.js, der auf bekannte Technologien wie JavaScript, HTML und CSS setzt. Es setzt keine weiterführende Sprachen wie TypeScript am Beispiel von Angular oder JSX bei react voraus. Ihr könnt mit HTML-basierten Templates, einfachem JavaScript (ES5/ES6) und CSS/SASS loslegen.
• Weniger Restriktionen, mehr Flexibilität. Hier könnt ihr euch austoben, denn Vue ist sehr flexibel im Vergleich zu den anderen bekannten Größen im JS-Framework-Umfeld. Die Core Library konzentriert sich auf den ‚View‘ Part; kombiniert mit dem modularen Ansatz, und dem Einsatz diverser Libraries, erlaubt es euch Probleme auf unterschiedliche Weise zu lösen. Ein Beispiel ist die einfache Formatierung von Zeitstempeln (new Date()) mithilfe von moment.js. Braucht ihr eine Lösung für das State Management, nutzt einfach VUEX (inspiriert durch Redux, Elm, Flux, aber komfortabler). Routing ist auch kein Problem. Greift einfach auf die vue-router Library zurück. Wenn ihr zum Beispiel VUEX nicht nutzen wollt, könnt ihr auch Redux benutzen, denn Vue.js schränkt euch hier nicht ein. Auch JSX oder TypeScript könnt ihr in Kombination und ohne Bedenken benutzen.
• Performance. Einer der Hauptgründe, warum viele Teams auf Vue setzen, ist die Geschwindigkeit. Es ist sehr schlank, und mit ein paar minimalen Optimierungen performt es gefühlt und getestet besser als die anderen Schwergewichte. Ein Grund dafür ist die bessere Implementierung des virtual DOM. Aber macht euch selbst ein Bild anhand des Javascript Performance Benchmarks.
• Tooling. Für den täglichen Einsatz ist das Framework natürlich gewappnet. Ihr bekommt vieles an die Hand. Die mächtige vue-CLI (Command Line Interface) bringt alles mit, damit ihr sofort loslegen könnt, unter anderem auch verschiedene Projektvorlagen (Progressive Web Apps, Webpack, Routing …). Zu Vue.js gehören auch die Vue-DevTools für Chrome. Mit ihnen könnt ihr eure Komponenten untersuchen, VUEX States anzeigen und deren Änderungen nachvollziehen, Events anzeigen und auch nachverfolgen. Hot Reloading ist auch mit an Bord, also kein lästiges Nachladen des Browsers, alles passiert automagically ? und auch nur für die Komponenten, die sich ändern.
• Community. Kein Framework ohne Community, und hier glänzt Vue.js. Ich habe seit langem keine so aktive und freundliche Community mehr getroffen, die konstruktiv und so fachlich versiert unterwegs ist. Dafür gibt es an der Stelle mal dicke Kudos ?.

Im nächsten Teil dieser Serie werde ich auf diese Vorteile mit konkreten Praxisbeispielen näher eingehen. Viele fragen sich wahrscheinlich, ob das  Framework nur für Webanwendungen zu gebrauchen ist. Natürlich nicht! Durch die Flexibilität und den modularen Ansatz, könnt ihr zum Beispiel Electron für komplette Desktopanwendungen nutzen oder WEEX (powered by Alibaba) für Hybridapps (IOS, Android).

Zusammenfassung

Vue.js macht Spass, es ist enorm leistungsstark, einfach zu lernen und fühlt sich im täglichen Flow unheimlich gut an. Denkt bei eurer Wahl an Folgendes: „The right tool for the job“. Es wird immer Situationen geben, in denen ein Framework dem anderen überlegen ist oder die Lösung auf andere Art einfacher umzusetzen ist. Doch es ist ja auch unser Bestreben, die eigene Komfortzone zu verlassen und gerade diese kniffligen Probleme zu lösen. Mit diesem Input im Hinterkopf schaut euch Vue.js einfach an und entscheidet selbst.

Zukünftig werde ich euch mit spannenden Tutorials aus dem JavaScript- und Vue.js-Umfeld versorgen. Themen wie Progressive Web Apps, Microservices mit Node.js, Static Site Building, Realtime Communication tbc. stehen auf dem Programm.

Nutzt ihr Vue.js schon in bestehenden Projekten oder habt Fragen? Dann berichtet gerne von euren Erfahrungen und hinterlasst einen Kommentar. Ich freue mich von euch zu hören.