VueJS Webapplikationen in der Entwicklung

Angular, React und VueJS. Drei wichtige Frameworks, die für den modernen Entwickler von essentieller Bedeutung sind. Alle verfolgen das gleiche Ziel: Entwicklern das Leben bei der Erstellung moderner Webanwendungen leichter machen.

Welches Framework man schlussendlich für seine Anwendung einsetzt, mag auch etwas Geschmackssache sein. Nicht jeder findet die Vorteile des jeweiligen Frameworks überzeugend und greift dann doch zu dem seiner Wahl.

Quelle: Google Trends

Dabei ist anzumerken, dass Angular im direkten Vergleich zu VueJS ein wirklich überaus großes Framework ist. Bereits in der Standardinstallation beheimatet es eine Unmenge an Packages. Im Vergleich hierzu wirkt VueJS durchaus schlank und unkompliziert. Es erlaubt die schnelle Erstellung von Anwendungen. Hilfreich ist es, wenn man bereits Erfahrungen mit JavaScript/TypeScript und einem anderen Framework vorzuweisen hat.

Doch auch wenn dem nicht so sein sollte, kann sich jeder Entwickler schnell in dieses Framework einarbeiten, denn es ist sehr übersichtlich gestaltet und wirkt dabei dennoch durchdacht. Es stellt sämtliche wichtigen Funktionen zur Verfügung und integriert dank TypeScript auch Standards wie ECMA-Skript.

Auch gestalterisch kann man sich austoben, neben Element UI und Vuetify gibt es weitere Erweiterungen, die ein Erstellen von ansprechenden User Interfaces erlauben. Ich selbst habe bereits Element UI sowie Vuetify ausprobiert, wobei ich nicht sagen kann, welches ich persönlich bevorzugen würde. Beide Erweiterungen bieten praktische Möglichkeiten und stellen die wichtigsten Komponenten zur Verfügung.

Der richtige Package-Manager für VueJS

Das Dependecy Management der eigenen Anwendung benötigt den richtigen Package Manager. Doch den richtigen Package Manager, kann man in meinen Augen nicht nur an Merkmalen festmachen. Viel mehr spielt das persönliche Empfinden eine große Rolle und das eigene Gefühl entscheidet darüber, welchen man denn nutzen möchte.

Persönlich habe ich VueJS bereits mit Yarn sowie NPM getestet und empfinde bei den gängigen Funktionen keinen großen Unterschied. Schlussendlich sieht es sowieso so aus, dass Yarn auf die Packages von NPM zurückgreift und sie sich lediglich im reinen Funktionsumfang unterscheiden.

Meine persönliche Website wurde mit NPM entwickelt, während ich im Job auf Yarn gesetzt habe. Mein eigenes Ziel soll dabei sein, mich mit möglichst unterschiedlichen Tools zu beschäftigen. Je mehr Erfahrung man mit unterschiedlichen Tools vorweisen kann, desto flexibler kann man später in Teams arbeiten. Es kann daher nie schaden, sich einmal etwas anderes anzusehen und sich selbst dazu zwingen, ein anderes Tool zu verwenden.

Quelle: Google Trends

Wie sich eine VueJS-Anwendung unterteilt

Mein grundsätzliches Vorgehen bei der Erstellung einer Webapplikation mit VueJS besteht darin, dass ich mir ein Bild darüber mache, welche Komponenten wiederverwendbar sein könnten. Diese einzelnen Komponenten werden in Vue als Components entwickelt und können so einfach integriert werden. Alle anderen Teile der Anwendung werden in eine Seite gepackt und bilden damit die einzelnen Unterseiten der Website ab.

Die einzelnen Components werden dabei so gestaltet, dass sie universell auf der Seite einsetzbar sind. Die oben genannten Erweiterungen bieten hierfür hervorragende Möglichkeiten, unter anderem auch beispielsweise das Sortieren von Tabellen anhand der unterschiedlichen Spalten.

Alle meiner Seiten bestehen aus Single File Components. Hierbei handelt es sich um Vue-Dateien, in die sämtliche Bestandteile integriert sind: Template, Scripts und Style. So lassen sich einzelne Seiten angenehm und individuell gestalten, ohne dass dafür in der globalen Style-Datei entsprechende Klassen angelegt werden müssen, die nur für eine einzelne Datei oder eine einzelne Komponente entscheidend sind.

Geladen wird die komplette Anwendung durch das Einbinden in eine index.html.

Der Vue-Router und Apache

VueJS liefert von Haus aus einen Router mit. Er gehört zu den Core-Funktionalitäten und unterstützt dabei alle wichtigen Funktionen, die ein Entwickler für sein Projekt braucht. Dazu gehört unter anderem:

• komponentenbasierte Router-Konfiguration
• Routing von Parametern und Queries
• Links mit automatisch aktiven CSS-Klassen
• History Mode und Hash Mode für HTML 5

Er ist zudem einfach in das Projekt zu integrieren und eignet sich damit auch für neue Entwickler, die sich gerade erst mit dem Thema Frameworks beschäftigen. In meinen Augen war Angular an dieser Stelle damals etwas komplizierter. Man muss allerdings dazu sagen, dass ich während meines Studiums mit Angular eingestiegen bin und dieses ein Semester lang genutzt habe. Im privaten Bereich hat es mich nie gereizt, da in meinen Augen die Notwendigkeit von NodeJS eine Hürde war.

Meine Websites liefen immer über einen Apache oder Nginx, wobei diese natürlich kein Server Side Rendering von JavaScript-Frameworks unterstützten. Erst als ich dann auf einen eigenen VPS umgestiegen bin, habe ich mich doch nochmal genauer mit der Thematik beschäftigt und festgestellt, dass diese Frameworks nach einem erfolgreichen Building durchaus von einem Apache oder Nginx ausgeführt werden können.

Apache und VueJS

Wie gerade erwähnt, waren Nginx und Apache für mich immer das Problem bei der Bereitstellung einer Webapplikation, die auf einem JavaScript-Framework basiert. Dabei ist das totaler Unfug, denn eine solche Anwendung kann durchaus durch einen anderen Webserver als NodeJS betrieben werden.

Für Apache beispielsweise genügt es, wenn er den fertigen Build-Ordner (bei Vue der Dist-Ordner) zur Verfügung hat. Er liefert die statische HTML-Datei aus, welche alle weiteren Inhalte referenziert. Der Webbrowser kümmert sich anschließend um das Laden der Dateien.

Einzig und allein an der .htaccess-Datei sollte etwas nachkonfiguriert werden. Damit das Routing durch VueJS ordentlich ablaufen kann, müssen alle Anfragen an die index.html des Projekts umgeleitet werden. Andernfalls kommt es zu 404 Fehlern im Projekt und die Besucher werden keine Freude an der Seite haben.

Über Nginx habe ich das Projekt nie getestet, jedoch wird es auch hier genauso ablaufen, dass man die Anfragen entsprechend umleiten muss. Denn die Umleitung hat nichts mit dem Webserver zutun, sondern ist von der Anwendung nötig. Ein NodeJS, insbesondere im Developer-Umfeld, richtet dieses Routing natürlich automatisch korrekt ein, ohne dass manuell etwas geändert werden muss.

Komplexität des Projekts

Immer wieder kommt es zu unterschiedlichen Meinungen, was die Komplexität von Projekten angeht. Auf der einen Seite gibt es die Personen, die VueJS nicht in komplexen Projekten einsetzen würden. Auf der anderen Seite hingegen sind auch die Meinungen vertreten, dass Vue durchaus für komplexe Projekte geeignet ist.

In meinen Augen ist das Framework durchaus für komplexe Projekte geeignet. Die Modularität durch einzelne Komponenten ermöglicht eine flexible Entwicklung und die Wiederverwendbarkeit ist durchaus ein Argument, das für komplexe Projekte spricht. Denn schließlich schaut jeder Entwickler darauf, möglichst viele Teile wiederverwenden zu können, um sie so bei Bedarf schnell anpassen zu können.

Vue vs. React vs. Angular

Vor einiger Zeit hätte ich wohl noch das genutzt, wofür ich eine Empfehlung bekommen hätte. Inzwischen sieht es allerdings so aus, dass ich bereits mit allen drei Frameworks mehr oder weniger Erfahrungen gemacht habe. VueJS ist tatsächlich das Framework, welches ich am interessantesten finde und welches ich auch tatsächlich selbst einsetze. Ich bin grundsätzlich nicht auf einer Schiene festgefahren und möchte nichts anderes, viel mehr ist es so, dass ich Vue als simpel und dennoch mächtig empfinde.

Nehmen wir als Beispiel Angular, was ja bekanntlich einiges an Funktionalität mitliefert. Es wirkt sehr umfangreich, an manchen Stellen vielleicht auch ein wenig überladen. Ohne Frage ist es dennoch für viele das Tool schlechthin, wenn es um Geschäftsanwendungen im Web geht. Doch die Einarbeitungszeit ist doch recht hoch und das behaupte nicht nur ich. Es braucht viel Zeit und auch ein wenig Geduld, bis man die Grundlagen und Strukturen verstanden hat.

React ist im Vergleich zu Angular schlanker. Man hat das Gefühl, es will den Entwickler von vorneherein gar nicht abschrecken, sondern ihm genau das zur Verfügung stellen, was er braucht. Meine kurze Erfahrung mit React hat allerdings gezeigt, dass die Nutzung nicht ganz selbsterklärend und einfach ist. Es wirkt anders als die anderen Frameworks und irgendwie bin ich mit diesem nicht ganz warm geworden. React ist auf jeden Fall eine Nutzung wert, allerdings denke ich, dass es nicht für die breite Masse an Entwicklern geeignet ist. Viele widersprechen nun und sagen, dass es einige bekannte Projekte mit diesem Framework gibt. Da stimme ich zu, doch ich habe nicht das Gefühl, dass es der nächste Hype wird.

Den letzten Blick widme ich wieder VueJS. Es vereint in meinen Augen die Vorteile von React und Angular. Es wirkt wie ein schlankes Framework, das schnell zu erlernen ist und womit man schon in kurzer Zeit angenehme Ergebnisse erzielen kann. Doch es ist nicht schlank und zu wenig zu gebrauchen. Es ist ein schlankes Framework, welches man durch die richtigen Erweiterungen zu einem mächtigen Werkzeug heranwachsen lassen kann. Ich denke, dass Vue es durchaus mit einem Rivalen namens Angular aufnehmen kann. Es liefert zwar von Haus aus nicht gerade eine umfangreiche Palette an Erweiterungen mit, kann jedoch jederzeit erweitert werden. Auch die Nutzung von UI Komponenten wie durch Element UI und Vuetify ist enorm angenehm. So kann man sich eine individuelle Anwendung in kurzer Zeit schaffen.

Was noch zu sagen bleibt

Insgesamt sehe ich in Vue ein sehr gutes Framework, welches zur Erstellung von Webanwendungen geeignet ist. Auch komplexe Projekte können damit gut umgesetzt werden. Entwickler, die auf dem neuesten Stand der Technik sein wollen und offen für Neues sind, sollten definitiv einen Blick auf dieses Framework werfen. Es macht einen guten Eindruck, ist durchdacht und bietet ausreichend Flexibilität für den Einsatz von Erweiterungen wie Element UI sowie Vuetify. Auch andere Erweiterungen kommen in Betracht.