Das Open-Source-Javascript-Framework Vue.js

article.detail.published-on:

March 23, 2021

article.detail.reading-time:

article.detail.minutes

article.detail.tags:

#Blogartikel #Blogreihe Javascript Frameworks #CSS #Javascript #Technologie #Website

Vue.js ist ein Open-Source-Javascript-Framework zum Erstellen von Benutzeroberflächen. Vue.js zeichnet sich durch eine einfache Integration in Projekte mit anderen Javascript-Bibliotheken aus und kann als Webframework für die Entwicklung reaktiver Einzelseitenanwendungen fungieren.

Derzeit wird es unterstützt von Schöpfer Evan Y. und anderen aktiven Mitgliedern des Kernteams verschiedener Unternehmen wie Netlify, Netguru, Baidu, Livestorm. Eine Umfrage zu Javascript aus dem Jahr 2016 ergab, dass Vue eine Entwicklerzufriedenheit von ca. 90 % aufweist. Auf GitHub verdient das Projekt durchschnittlich 95 Sterne und ist das drittgrößte Projekt in der Geschichte von Github.

Interessantes zu Vue.js

Im Jahr 2013 kam der Google-Mitarbeiter Evan You bei der Arbeit an einem seiner Projekte zu der Schlussfolgerung, dass es keine vorgefertigten Lösungen für das Rapid Prototyping komplexer Benutzeroberflächen von Webanwendungen gibt. React befand sich damals in einem frühen Entwicklungsstadium. Die Hauptwerkzeuge waren komplexe Frameworks wie AngularJS oder MVC-orientierte Backbone.js, die nicht sehr einfach waren und sich auf die Entwicklung großer Anwendungen konzentrierten. Um diese Lücke zu schließen, begann You mit der Weiterentwicklung von Vue.js, das sich zwar simpel hielt, sich jedoch nicht nur für das Prototyping, sondern auch für die vollständige Entwicklung als geeignet erwies.

Im Oktober 2015 wurde Version 1.0 der Bibliothek veröffentlicht, im September 2016 - Version 2.0. Seit Version 2.0 unterstützt das Framework ebenso serverseitiges Rendering, auch bekannt als SSR (Server-Side Rendering). Am 18. September 2020 wurde Vue.js 3.0.0 „One Piece“ veröffentlicht, laut den Entwicklern „bietet es verbesserte Leistung, kleinere Paketgrößen, bessere Integration in TypeScript, neue APIs zur Lösung umfangreicher Aufgaben und eine solide Grundlage für zukünftige Iterationen des Frameworks“.

Die Version 3.0 beinhaltet mehr als 2 Jahre Entwicklungsaufwand, darunter über 30 RFCs, über 2600 Commits, 628 Anfragen von 99 Entwicklern sowie eine enorme Menge an Entwicklungs- und Dokumentationsarbeit. Der gesamte Code wurde in effizienteres TypeScript (TypeScript 96,8 %) umgeschrieben, was Vorteile bei der agilen Entwicklung bietet. Außerdem wurde ein neuer Satz von API-Kompositionen eingeführt.

Konzept von Vue.js

Die Entwickler bezeichnen Vue.js als progressiv anpassbar im Vergleich zu anderen Web-Frameworks. Auf diese Weise kann der Entwickler die Struktur der Anwendung an seine eigenen Anforderungen anpassen. Viele Entwickler halten Vue.js für einfacher zu erlernen als AngularJS, da die API viel schneller zu verstehen ist. In Vue.js brauchen die Anwender Kenntnisse lediglich in Javascript, HTML und Typoskript, die für die Verwendung erforderlich sind.

Vue.js verfügt über eine eigene offizielle Dokumentation in vielen Sprachen, die auf vuejs.org mit einer recht umfangreichen Dokumentation als Beispiel für die Erläuterung von Design und Entwicklung im Browser bereitgestellt wird. Vue.js implementiert das MVVM-Muster, Vue.js bietet Javascript die Möglichkeit, Daten zu binden, sodass Ausgabe und Eingabe direkt mit der Datenquelle verbunden sind. Daher wird der Modus zum manuellen Definieren von Daten (z. B. über jQuery) aus dem HTML-DOM nicht benötigt. Gleichzeitig gibt es keine zusätzlichen Anmerkungen, wie in Knockout.js.

Adaptives Design und Übergangseffekte

Adaptive oder responsive Design bedeutet bei Vue, dass sich die Ansicht im MVC-Modell ändert, wenn sich das Modell verändert. In Vue binden Entwickler einfach eine Ansicht an das entsprechende Modell. Vue beobachtet automatisch Änderungen im Modell und zeichnet die Ansicht neu. Diese Funktion macht die Zustandsverwaltung von Vue einfach und intuitiv. Vue bietet verschiedene Möglichkeiten zum Anwenden von Übergangseffekten beim Einfügen, Aktualisieren oder Löschen des DOM.

Vue enthält die folgenden Tools:

CSS wendet automatisch Übergangs- und Animationsklassen an
Anwender können mit CSS-Animationsbibliotheken von Drittanbietern wie Animate.css arbeiten
Anwender können Javascript in einer Übergangsschnittfunktion verwenden, um das DOM direkt zu bearbeiten
Kann in Verbindung mit JavaScript-Animationsbibliotheken von Drittanbietern wie Velocity.js verwendet werden