Stefan Baumgartner Angestellt bei Dynatrace

„Vue.js ist vielleicht nicht das innovativste Framework, macht aber zwei Dinge absolut richtig: Zum einen ist es sich selbst nicht im Weg. Zum anderen ist es in Vue.js schwierig, etwas zu finden, was nicht geht.“

Schon wieder ein JavaScript-Framework? Ja, ist denn heut’ schon Dienstag? Keine Bange, Vue.js ist anders. Die schlanke Bibliothek bedient alle Nischen, die bislang von Frameworkentwicklern außer Acht gelassen wurden, und dank der inkrementell einsetzbaren Zusatzbibliotheken aus dem Umfeld auch alle anderen gängigen Fälle gleich mit.

Schon die Entstehungsgeschichte von Vue.js ist anders. Hinter dem neuen Stern am JavaScript-Himmel steckt diesmal kein Großkonzern oder Social-Media-Haus, sondern eine Einzelperson. Evan You hat als Creative Coder zwar mal bei den Google Creative Labs gearbeitet, sein JavaScript-Framework entstand aber aus eigenem Interesse. Nach der Veröffentlichung 2014 nahm die Beliebtheit der Bibliothek Fahrt auf. Das Release der Version 2 im September 2016 hat Vue.js dann auch unter großen Firmen etabliert. Mittlerweile kann Evan You durch Sponsoren, OpenCollective und Patreon-Spenden seit über zwei Jahren in Vollzeit an Vue.js arbeiten, was man dem Fortschritt und der Stabilität auch anmerkt.

Doch was kann Vue.js, was andere nicht können? Halten wir das für den Rest des Artikels an zwei Begriffen fest: Progressivität und inkrementelle Einsetzbarkeit. Vue.js kann man für Teile einer bestehenden Applikation oder Webseite einsetzen, aber auch als vollständigen Ersatz für jQuery-basierte JavaScript-Anreicherungen in interaktiven Widgets. Schrittweise kann man nun wiederverwendbare Komponenten, moderne JavaScript-Syntax und Präprozessoren dazuschalten. Will man von ein paar Widgets zu einer vollständigen Applikation, kann das umfangreiche Ökosystem der Bibliothek mit Authentifizierung, Routing und State Management aufwarten. Ganz wie die Großen!

Hello, Vue!

Darüber hinaus braucht man kein Fachdiplom, um mit Vue.js zu starten. Es reicht eine 20 KB große JavaScript-Datei (minifiziert und mit GZIP ausgeliefert) und ein wenig eigenes JavaScript. Keine langwierigen Build Prozesse, keine Commandline-Tools, keine Syntaxerweiterungen wie TypeScript oder JSX. Das heißt nicht, dass diese Dinge nicht alle möglich und vorhanden sind. Es gibt auch Fälle, in denen es durchaus sinnvoll ist, ein komplexeres Set-up einzusetzen. Doch für den Beginn reichen ein wenig Markup, ein bisschen CSS und erstaunlich wenig JavaScript. In den folgenden Listings sehen Sie alles, was man für ein einfaches „Hello World“ mit Vue.js benötigt. Unsere HTML-Datei reichern wir mit ein wenig Markup an.

...
<div id="app">
<h1> {{ msg }} </h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
...

Wichtig ist die eindeutige ID app unseres Elternelements. Dieses Element ist der Einstiegspunkt für unsere Applikation. Von da an wird alles von Vue. js übernommen, und wir erkennen auch gleich die allseits bekannte Templatesyntax mit den geschwungenen Klammern wieder. Hier erwarten wir uns von Vue.js Daten mit dem Namen msg. Nun, wenn man das schon erwartet, wollen wir das auch kurz zur Schau stellen:

new Vue({
data: {
msg: 'Hello World! '
},
el: '#app'
})

Dies ist das gesamte JavaScript, das wir benötigen. Wir legen eine neue Vue.js-Instanz an und hängen sie an das Element #app. Elemente selektiert man mit CSS-Selektoren, das kennen wir von jQuery. Auch das data-Objekt ist selbsterklärend. Die Property msg hier ist analog zu dem, was wir in unserem Template haben. Einfach? Ja! Langweilig? Das auch. Also weiter zu etwas Ansprechenderem: Einem Counter Widget.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Windows Developer 8.18 - "Versammlung im Web"

Alle Infos zum Heft
579848432Vue.js: Einführung in das JavaScript-Framework
X
- Gib Deinen Standort ein -
- or -