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

7 Kommentare

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.

vue js logos frameworks

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.

google trend vue react angular

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.

Toni Haupt

Toni arbeitet seit Mai 2017 bei der codecentric als Lead UI Consultant. Seine Schwerpunktthemen sind die Erstellung moderner Frontend Applikation mit einem starken Fokus auf UI und Usability. Dabei spielen Rapid Prototyping nach Atomic Design Prinzipien eine große Rolle. Eine weitere Leidenschaft ist die Rolle als Core Entwicker im WordPress Umfeld.

Kommentare

  • Fabian

    28. Juni 2018 von Fabian

    Eine „flache Lernkurve“ bedeutet, dass mit viel Zeitaufwand nur wenig Wissen/Fähigkeiten erreicht werden. Ob das wohl wirklich gemeint war?

  • Christian

    16. Juli 2018 von Christian

    Mich würde interessieren wie Vue-JS in Enterprise WebApps skaliert.
    Mir fehlen bisher Controller und Service Klassen, aber das ist vielleicht auch meinem Background geschuldet…

    • Toni Haupt

      24. Juli 2018 von Toni Haupt

      Hallo Christian und danke für deine Fragen. Im Enterprise-Bereich hat sich Vue.js in Kombination mit TypeScript etabliert. Dort hat man die Möglichkeit die von dir erwähnten Controller, Service-Klassen oder sogar Interfaces zu definieren. Vielleicht hast du ja einen genauen Use-Case oder wir können uns auch gerne so austauschen wenn du weitere Fragen hast. Gerne auch per E-Mail oder einen anderen Kanal deiner Wahl.

      • Dieter

        Hallo Toni, informativer Block.
        Ich bräuchte für ein Problem welches für einen vue.js Entwickler sicher nicht viel Aufwand wäre Hilfe. Kannst du mir da helfen. Ich übergebe in einer foreach schleife eine id an eine vue function und möchte jetzt per Klick Event den gewählten Datensatz einblenden. Bei meiner Lösung werden beim Klick alle DS angezeigt. Die dynamische Übergabe in data scheitert bei mir.

        Lg Dieter

        • Toni Haupt

          29. Oktober 2018 von Toni Haupt

          Hallo Dieter und danke für deine Anfrage. Ich habe dir eine E-Mail geschickt und dann können wir uns darüber austauschen. Und Aufwände werden hier keine große Rolle spielen und ich helfe da natürlich gerne. Herbstliche Grüße aus Berlin 🙂

      • Dieter

        Hallo Toni dieter.golfen@gmx.at ist die richtige E-Mail. Sorry.
        Würde bei der Lösung des Problems auch deinen Aufwand übernehmen.
        Lg Dieter

  • Dmitri Pisarenko

    13. Oktober 2018 von Dmitri Pisarenko

    Ich übersetze gerade die Vue.JS-Doku ins Deutsche. Bei Interesse bitte melden.

Kommentieren

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.