Vue.js Review: Vor- und Nachteile, Vergleich

Wenn Sie ein Front-End-Entwickler sind, werden Sie früher oder später darüber nachdenken, ein bestimmtes JS-Framework zu erlernen. In diesem Moment, würden wir sagen, kommt die Angst, die falsche Wahl zu treffen, ins Spiel. Niemand möchte veraltete Technologien oder Werkzeuge lernen, die irrelevant sind.

Ähnliche Bedenken könnten auch bei Kunden aufkommen, was zu einer Verringerung der Anzahl der Entwickler führt, die solche Technologien nutzen, und entsprechend die Kosten für die Unterstützung eines darauf basierenden Produkts erhöht.

Jetzt werden wir versuchen zu erklären, warum wir nach dem Ausprobieren der besten JS-Frameworks uns auf Vue.js beschränken.

Zunächst ein kurzer Hintergrund

Im Jahr 2014 wurde ein Google-Ingenieur beauftragt, Schnittstellen schnell zu prototypisieren. Zu diesem Zeitpunkt war Angular bereits in vollem Gange, und React war gerade erst aufgetaucht. Aber keines der vorhandenen Werkzeuge erfüllte die Anforderungen der Aufgabe vollständig. So entstand die Idee, ein eigenes Werkzeug zu schaffen, was zu Vue.js führte, das heute zu den drei führenden JS-Frameworks gehört.

Aber was macht Vue.js so beliebt?

Der offensichtlichste Grund ist die niedrige Einstiegshürde. Um mit Vue.js zu schreiben, reicht es aus, die Grundlagen der Webentwicklung wie JS, HTML und CSS zu kennen. Der Entwickler muss sich nicht mit TypeScript (wie bei Angular) auseinandersetzen und wird keine Unannehmlichkeiten aufgrund mangelnder Kenntnisse der ES6+ Standards verspüren (wie es bei React der Fall sein kann). Vue ist etwas zwischen React und Angular. Der Autor hat die besten Praktiken dieser beiden Frameworks übernommen und ein einfaches, schnelles und flexibles Werkzeug geschaffen.

Die einfachste Vue-Komponente besteht aus drei Blöcken: Template, Script und Style. Hier ist es etwas detaillierter.

• Template ist im Grunde ein Layout-Template, ein einfaches HTML, das dem Entwickler ermöglicht, jeden HTML-Präprozessor (wie PUG, Haml) zu verwenden, was die Entwicklung beschleunigt. Es wird keine Unannehmlichkeiten für diejenigen verursachen, die von Angular gewechselt haben, da dieser Ansatz im Angular-Umfeld weit verbreitet ist. Vue.js erlaubt auch die Verwendung von JSX-Syntax, was den Entwicklern den Umstieg von React erheblich erleichtern wird.
• Style ist ein Block mit in CSS geschriebenen Stilen. Wie bei Layout-Templates kann ein Entwickler beim Schreiben von Stylesheets CSS-Präprozessoren (SASS, Less) verwenden, was die Produktivität steigert.
• Script ist ein Block von JS-Code, der als JS-Objekt dargestellt wird, wobei jedes Feld ein Datenblock oder ein Hook des Lebenszyklus der Komponente in Form einer Funktion ist. Da für diesen Block reines JS verwendet wird, kann der Entwickler leicht Code in einem für ihn bequemen Standard für ES oder TypeScript schreiben und ihn durch Babel konvertieren.

Jetzt listen wir die Gründe auf, warum man Vue.js wählen sollte

1. Jeder Entwickler mit einem minimalen Stapel an Front-End-Technologien kann mit Vue arbeiten. Die von Vue angebotene Struktur ist ziemlich offensichtlich und reduziert die Zeit für die Code-Unterstützung, die Erweiterung der Funktionalität und die Fehlersuche erheblich.
2. Ein weiterer Pluspunkt von Vue.js ist sein Ökosystem. Es hat zwar keine so große Community wie React, aber das kann auch von Vorteil sein, da es oft schwierig ist, unter der Vielzahl von React-Plugins und -Paketen eine funktionierende Option zu finden. Und wenn man eine findet, ist es schwierig, sie zu erweitern oder zu personalisieren. Bei Vue sind wichtige Pakete (wie Vuex oder VueRouter), ohne die es kein größeres Projekt geben wird, tief in Vue integriert. Dies schützt den Entwickler vor Fehlern, die durch die Inkompatibilität von Bibliotheken verursacht werden, da die Entwickler von Vue.js alle Komponenten des Ökosystems auf dem neuesten Stand halten. Jede dieser Komponenten ist ausführlich in der Vue.js-Dokumentation beschrieben.
3. Dokumentation ist ein weiterer Pluspunkt für Vue.js. Es hat eine Dokumentation, die in 8 Sprachen übersetzt ist, mit vielen detaillierten Beispielen zur Code-Nutzung. Und für diejenigen, die geschriebene Informationen nicht verstehen, werden Videotrainingskurse angeboten.
4. Es wäre wert, das Einsatzgebiet von Vue.js hervorzuheben, besonders da dieses Framework längst über Browser hinausgeht. Aber wir beginnen mit den Browsern. Vue ist sowohl für das Schreiben einfacher Landschaften als auch für komplette CMS großartig. Je nach Projektanforderungen kann die Art und Weise, wie Sie Vue verwenden, variieren. Die einfachsten Projekte oder Webanwendungen, die keine umfangreiche Datenübertragung mit dem Server beinhalten, sind besser im SPA-Format zu implementieren, was sich negativ auf die Zeit bis zum Inhalt (das Hauptvolumen der Daten wird beim ersten Laden der Seite an den Client gesendet) und SEO (die Website ist ein einzelnes Dokument und der Inhalt wird von JS generiert) auswirkt. Um solche Probleme zu lösen und für groß angelegte Projekte schlägt die Vue-Dokumentation die Implementierung des SSR-Ansatzes vor. Bei einer solchen Implementierung wird jede Seite auf einem Server generiert, was die Zeit bis zum Inhalt beschleunigt, da nur die notwendigen Daten an den Client gesendet werden. Dementsprechend sind die SEOs mit dem SSR-Ansatz auch höher, da alle notwendigen Metadaten mit dem Inhalt der Seite kommen. Für die SSR-Implementierung empfiehlt Vue die Verwendung von Nuxt.js oder Quasar-Framework. Das erwähnte Quasar ermöglicht es auch, vollständige PWA-Anwendungen auf Vue zu schreiben. Quasar ist eine Entwicklungsumgebung, die auf Node.js und Webpack basiert und dem Entwickler eine Reihe von Werkzeugen für die Anwendungsentwicklung bietet, sowohl für die Arbeit mit dem Browser als auch auf mobilen und Desktop-Geräten.
5. Vue beschleunigt den Entwicklungsprozess. Und der Hauptverdienst hier ist nicht, dass man eine Vielzahl von Technologien verwenden kann, sondern dass man es nicht muss. Es ist ein bidirektionaler Datenverankerungsmechanismus oder Reaktivität. Mit anderen Worten, Vue verfolgt Änderungen, die an den initialisierten Daten stattfinden. Das bedeutet, dass der Entwickler nicht mit dem DOM manipulieren muss. Frameworks wie React und Angular haben ihr eigenes Reaktivitätssystem. Aber wenn es bei Vue ausreicht, eine bestimmte Variable neu zuzuweisen (zum Beispiel: this.someVar = “neuer Wert”), muss man bei React eine spezielle Methode setState verwenden (zum Beispiel: this.setState (() => ({ someVar: “neuer Wert”}))). Der Vorteil von Vue wird besonders bei Mutationen von Arrays oder Objekten deutlich. Bei Vue reicht es aus, die Standard-Array-Methode zu verwenden, um ein neues Element zu einem Array hinzuzufügen. Zum Beispiel: this.someArr.push (“neuer Wert”)), während man bei React den vorherigen Wert aktualisieren muss (Zum Beispiel: this.setState (state => ({someArr: [… state.someArr, “neuer Wert”]}))). Da Vue unter dem Einfluss von Angular geschrieben wurde, ist die bidirektionale Schnittstelle in beiden Frameworks ähnlich implementiert, aber die Einfachheit von Vue.js überwiegt immer noch.
6. Ein weiterer Vorteil, der den Entwicklungsprozess beschleunigt, ist die Möglichkeit, einen komponentenbasierten Ansatz zu implementieren. Global betrachtet bedeutet dies, dass es eine Hauptkopie von Vue gibt, die der Einstiegspunkt in die Anwendung ist, und das gesamte Projekt in kleinere Komponenten aufgeteilt wird, die in die Hauptkopie oder eine andere Komponente einbezogen werden. Der komponentenbasierte Ansatz bietet viele Vorteile. Das erste und wahrscheinlich wichtigste ist die Möglichkeit, vielseitige Komponenten zu schreiben, die im gesamten Projekt (oder sogar in anderen Projekten) wiederverwendet werden können, indem man einfach den notwendigen Satz von Parametern übergibt. In diesem Fall, wenn man die Funktionalität eines Teils der Anwendung ändern muss, der an mehreren Stellen vorkommt, muss man nicht den gesamten Code durchgehen. Es wird ausreichen, Änderungen in einer Komponente vorzunehmen. Wenn man sich vorstellt, dass die Anwendung Komponenten enthält, die zu 90 % ähnlich sind und minimale Unterschiede aufweisen, werden die Systemeigenschaften (Props, Eingabeparameter der Komponente) helfen. Durch das Übergeben bestimmter Parameter von der übergeordneten Komponente kann man das interne Verhalten der Komponente ändern (Polymorphismus aus der Sicht von Vue.js). Vue-Vererbung wird durch Slots implementiert, das heißt, man kann eine bestimmte abstrakte Komponente mit einem bestimmten Funktionsumfang erstellen und durch das Slot-System fortschrittlichere Module darauf aufbauen. Der komponentenbasierte Ansatz beschleunigt offensichtlich die Entwicklung.

   Er reduziert auch die Wahrscheinlichkeit von Copy-Paste-Fehlern. Der Code ist erweiterbar und kann wiederverwendet werden. Darüber hinaus ist die Struktur des Projekts für jeden Anfänger ausreichend offensichtlich und verständlich (eine nette Ergänzung ist Vue-devtools — eine spezielle Browser-Erweiterung, die von den Autoren von Vue.js entwickelt wurde, um die Projektstruktur durch chrome-devtools anzuzeigen. Natürlich gibt es den komponentenbasierten Ansatz sowohl in React als auch in Angular, aber für mich ist er bei Vue.js viel einfacher zu implementieren. Obwohl das Geschmackssache ist.

Vue.js vs. Angular.js vs. React.js: Statistischer Vergleich

Dank Ressourcen wie stateofjs.com haben wir die Möglichkeit zu sehen, wie Frameworks die Entwicklergemeinschaft erobern. Es ist offensichtlich, dass React.js derzeit die größte Gemeinschaft hat, aber den Statistiken nach zu urteilen, hat Vue.js in den letzten 3 Jahren den größten Zuwachs an Fans verzeichnet. Die Anzahl der Personen, die dieses Framework genutzt haben und es weiterhin nutzen möchten, ist um 20% gestiegen. Für mich ist dies der Hauptindikator für die Zufriedenheit der Nutzer mit dem Produkt. Stattdessen ist die Anzahl derjenigen, die das Framework genutzt haben und es nicht weiter nutzen möchten, unter den Top 3 am geringsten.

Gleichzeitig ist der Prozentsatz derjenigen, die vom Framework gehört haben und daran interessiert sind, es zu nutzen, am höchsten. Im Falle von Vue nimmt diese Zahl allmählich ab, hauptsächlich aufgrund derjenigen, die bereits begonnen haben, dieses Framework zu nutzen. Bei Angular wird die Anzahl der Interessierten durch die Anzahl der unzufriedenen Entwickler ausgeglichen. Bei React nimmt die Anzahl der Interessierten ab, teilweise auf Kosten derjenigen, die es entweder bereits nutzen oder damit unzufrieden sind.

Umfrageergebnisse zeigen, dass React die größte Anzahl an Nutzern hat. Schaut man jedoch auf die Repositories, sieht das Ergebnis etwas anders aus: Das Repository von Vue auf GitHub hat über 146.000 Sterne (dies ist die Anzahl der Personen, die ihre Zufriedenheit ausgedrückt haben), React hat über 134.000 Sterne, Angular — mehr als 50.000 Sterne.

Vue.js

Angular.js

React.js

Offensichtlich steht Vue.js erst am Anfang seiner Expansion in der Welt der Webentwicklung, und doch gibt es bereits eine Vielzahl ernsthafter Projekte, die mit diesem Framework geschrieben wurden. Die bekanntesten davon sind:

• gitlab.com — eine Webplattform für Versionskontrolle von Code
• wizzair.com — Wizzair nutzt Vue.js auf seiner offiziellen Website zur Verwaltung der Buchung von Flügen, Hotels und Taxis
• fontawesome.com — eine Ressource, die grafische Schriftarten für Web- und Desktop-Anwendungen anbietet
• laravel.com — Offizielle Website des Laravel-Backend-Frameworks. Darüber hinaus installiert Laravel Vue.js als Standardwerkzeug für die clientseitige Programmierung.

Zusammenfassung

Wir würden Vue.js als ein Framework definieren, das sich sehr dynamisch und sogar aggressiv entwickelt. Entwickler, die versucht haben, mit Vue.js zu arbeiten, werden sehr oft zu Anhängern dieses Frameworks. Einfachheit und Flexibilität sind ansprechend.

Obwohl der Aufgabenbereich dieses Tools die meisten Front-End-Entwicklungen abdeckt, verspricht die in naher Zukunft erwartete Veröffentlichung von Vue.js 3.0 viele angenehme Überraschungen für Entwickler.

Natürlich ist es vor der Durchführung von Aufgaben notwendig, zu analysieren, welche Tools verwendet werden sollen. Benötigen Sie Hilfe bei der Auswahl des richtigen Tech-Stacks für Ihr Projekt ? Kontaktieren Sie unser Team für eine Projektschätzung und -analyse. Wir helfen Ihnen beim Start und der Umsetzung Ihres Projekts, falls Sie unsere weitere Beteiligung benötigen.