Warum Sie das Framework Vue.js testen sollten

Das kleine, aber mächtige Vue.js ist ein besonderes JavaScript-Framework. Hier erfahren Sie, worauf Sie sich einstellen können und warum Sie Vue.js testen sollten.

Das Wichtigste in Kürze

• Vue.js ist ein kleines Framework, dafür aber reich an Features.
• Das Framework ist durch viele Plugins sehr gut anpassbar.
• Es gibt eine sehr aktive Community.

So ist Vue.js entstanden

Der Erfinder von Vue.js ist Evan You. Er nutzte für seine Arbeit, die hauptsächlich aus Prototyping im Browser bestand, AngularJS. Grundsätzlich gefiel ihm dieses Framework, doch einige Unstimmigkeiten störten ihn. Konzepte, die nichts mit seiner Arbeit zu tun hatten, aber trotzdem erfüllt werden mussten, brachten ihn schließlich dazu, ein eigenes kleines Framework zu schreiben.

You übernahm die benötigten Konzepte und nannte sein eigenes Framework „Vue.js“. Im Februar 2014 ging er damit an die Öffentlichkeit und erhielt hohen Zuspruch. Da er bis zu diesem Zeitpunkt der einzige Entwickler war, wurden aber auch skeptische Stimmen immer lauter. Was würde passieren, wenn You sich plötzlich gegen Vue.js und seine Weiterentwicklung entschied?

Dieser Verantwortung war sich You bewusst. Er arbeitet seit 2016 unter anderem daran, dass Vue.js auch weiterhin existieren wird, wenn er selbst nicht mehr beteiligt ist.

Vue.js – eine Einführung.

Vue.js ist ein progressives Framework. Es kommt nicht mit überladenen Features daher, sondern ist modular aufgebaut –  also nur mit den Funktionen, die Sie auch wirklich benötigen. Die wichtigsten Funktionen sind der Virtual DOM, der auch bei React – dem hoch performanten Framework von Facebook – zu finden ist sowie das Deklarative Rendering bei Single File Components von Angular.

Was ist ein Virtual DOM?

Für bessere Performance wird eine abstrakte Kopie des eigentlichen DOMs erstellt, deren Größe wesentlich geringer ist. Es werden nur die veränderbaren Komponenten geladen. Bei jedem Update werden diese erst im virtuellen DOM vorgenommen und über einen intelligenten Algorithmus mit dem tatsächlichen DOM verglichen. Anschließend werden nur die Änderungen gerendert.

Was sind Single File Components?

Der gesamte Code kann in eine Datei geschrieben werden (HTML, JavaScript und CSS). Durch dynamisches Bundling ist es möglich, alle Komponenten in jeweils einer einzigen Datei zusammenzuführen. Dadurch sind kleine Komponenten wartbar, testbar und vor allem leicht erweiterbar. Sie sind allerdings nicht darauf festgelegt, alle Angaben in eine Datei zu schreiben. Sie können auch alles direkt in unterschiedlichen Dateien ablegen.

Eine Komponente erfüllt nur einen einzigen Zweck. Dieses Prinzip wird „Separation of Concerns“genannt und macht die verschiedenen Bereiche einer App oder einer Webseite getrennt voneinander wartbar, ohne dass sich verschiedene Entwickler in die Quere kommen.

Eine .vue-Datei sollte dabei immer nach dem gleichen Prinzip aufgebaut werden: Zuerst erfolgt das Markup als Template zum Beispiel in HTML, anschließend die Logik als JavaScript und zum Schluss das Styling in CSS. Wenn Sie lieber in SCSS oder SASS stylen möchten, ist das auch kein Problem. Legen Sie diese Option einfach im Sprachattribut fest und Sie können in Ihrer bevorzugten Sprache schreiben.

Gestaltungsmöglichkeiten in Vue.js

Grundsätzlich kann das Template auch in verschiedenen Sprachen geschrieben werden. Die Sprache legen Sie in der Konfigurationsdatei fest und beim Veröffentlichen wird der Code anschließend in die richtige Sprache übersetzt.

Sie können zum Beispiel HTML, JSX oder Pug verwenden, was Ihnen mehr Freiheit bietet. Wenn Sie bereits eine der verfügbaren Sprachen kennen, müssen Sie sich also bei der Einarbeitung in Vue.js nicht noch zusätzlich mit den Feinheiten einer neuen Programmiersprache beschäftigen.

Um ein einfaches Databinding mit dem Script herzustellen, können Sie die Mustache-Syntax von Handlebars verwenden. Ein einfaches

reicht dabei schon aus. „hello“ wird im Data-Attribut des Skripts als Wert für „greeting“ festgelegt. Ändern Sie den Wert von „greeting“ im Skript, wird automatisch das Template angepasst. Sie müssen also nicht mehr den Selektor anfragen, um den Wert spezifisch zu ändern.

Auch sind EventHandler direkt am HTML-Tag möglich, zum Beispiel @click. Sie können also mit sehr wenig Code viel bewirken. Dies erleichtert die Arbeit mit Vue.js im Vergleich zu anderen Frameworks ungemein.

Einfacher Einstieg mit Vue CLI

Um einfach in Vue.js einzusteigen, können Sie Vue CLI nutzen. Es bietet eine grafische Oberfläche, mit der Sie sofort in die Programmierung einsteigen können. Durch die sehr aktive Community sind schon einige interessante Plugins entstanden, die Vue CLI an Ihre Bedürfnisse anpassen. So existiert beispielsweise ein Plugin, mit dem Sie Ihren Code in TypeScript schreiben können. Dieser wird dann in die korrekten Komponenten übersetzt.

Vue.js ist recht unkompliziert, wenn es um Styleguides und Dateistrukturen geht. Daher existieren bereits eine Menge Boilerplates, die Sie für Ihr Projekt nutzen können. Vue Core Mitglied Chris Fritz stellt dafür das Vue Enterprise Boilerplate zur Verfügung. Diese Sammlung wird ständig erweitert und deckt einige Teile der Möglichkeiten ab. Aber Chris ruft auch dazu auf, sich aktiv daran zu beteiligen.

Über mangelndes Interesse kann er sich dabei nicht beklagen, denn das Repository wächst kontinuierlich weiter.

Vue.js anpassen mit Plugins

Nicht nur Vue CLI, auch Vue.js selbst kann durch Plugins erweitert und angepasst werden. Auf der Webseite madewithvuejs.com/plugins finden Sie einige nützliche Plugins – unter anderem ein Fehler Tracking und sogar die Grundlage für ein komplettes CMS.

Mit Vue.js ist viel möglich – diese Vielfalt verblüfft selbst alteingesessene Entwickler immer wieder.

Warum Sie das Framework Vue.js testen sollten - Fazit

Auch wenn immer wieder kritische Stimmen laut werden spricht der Erfolg von Vue.js eine klare Sprache: Es handelt sich um ein ernstzunehmendes Framework, das stetig weiterentwickelt wird und Ihren Arbeitsalltag erleichtert. Vue.js ist in der kleinsten Version nur 20 kB groß, was angesichts der reichen Features durchaus bemerkenswert ist.