Erfahrungsbericht

Ein kleiner Einblick in Vue.js

Sind wir auf der Suche nach einem JavaScript Framework, um eine Webseite zu erstellen, kann es leicht zu einem Gefühl der Überforderung durch das Angebot am Markt kommen.

 

Gefühlt kommen jeden Tag 5 weitere neue Frameworks hinzu und es ist schwer zu entscheiden, welches nun am besten eingesetzt werden sollte. Neben den beiden bekanntesten Frameworks Angular und React gewinnt mittlerweile ein weiteres Framework immer mehr an Beliebtheit: Vue.js. Doch was macht es aus? Taugt es etwas? Warum also Vue.js benutzen und nicht eines der beiden beliebtesten (oder eines der vielen anderen) Frameworks?

Für mich war die Antwort darauf ganz einfach: Vue.js ist leicht verständlich und sehr flexibel. Es bietet die Möglichkeit, in bestehende Projekte teilweise oder komplett eingebunden zu werden und wenn das nicht genug ist, kannst du mittels vue-cli das volle Potential des Frameworks nutzen und es dabei einfach mit weiteren Features/Bibliotheken erweitern - Vue.js ist nicht umsonst das Progressive JavaScript Framework!

Was genau steckt hinter vue-cli? Es ist ein build tool, das ein Grundgerüst für Vue.js-Projekte erstellt. Dabei fragt das Tool ab, welche Features/Einstellungen für das Projekt gewünscht sind, darunter z.B. TypeScript Support, einen CSS Pre-Processor, einen Linter, Grundgerüste für das Testing und, und, und ...
Ist alles soweit ausgewählt, werden die benötigten Dependencies per Package Manager (z.B. npm) heruntergeladen. Und schon kann das Programmieren losgehen!

Bei Projekten, die mittels vue-cli erstellt wurden, wird der Code in sogenannten Single File Components geschrieben. Wie der Name schon andeutet, werden Komponenten jeweils komplett in einer einzigen Datei beschrieben. In diesen .vue-Dateien befindet sich alles, was eine Komponente ausmacht: ein Template, ein Script-Teil sowie das Styling. Das Template ist quasi das HTML-Gerüst der Komponente, das aber noch mittels Vue-Direktiven und Mustache Templating mit Variablen und/oder Methoden aus dem Script-Teil angereichert werden kann, womit sich Inhalte z.B. dynamisch ein-/ausblenden lassen. In dem Script-Teil können Variablen, Methoden, weitere Komponenten (und noch einiges mehr) definiert werden, die von der Komponente benötigt werden und benutzt werden sollen. Zum Schluss wird noch das Styling in den Style-Teil eingefügt. Dabei kann festgelegt werden, ob das Styling nur für die Komponente selber oder übergreifend angewendet werden soll.

Da Bilder (bzw. in diesem Fall Code) mehr sagen als 1000 Worte, ist hier noch ein sehr einfaches „Hello World“-Beispiel zu sehen:

Da Browser aber nichts mit diesen .vue-Dateien anfangen können, benötigt es noch eine Übersetzung dieser in für den Browser lesbare .html-, .js- und .css-Dateien. Dies wird ebenfalls vom vue-cli übernommen bzw. vom module bundler webpack, das vom vue-cli schon vorkonfiguriert wird und letztendlich einfach nur ein Script gestartet werden muss. Am Ende purzeln abgespeckte, für den Einsatz optimierte Dateien heraus, die dann nur noch zum Aufrufen bereitgestellt werden müssen.

Vue.js wird nachgesagt, dass es Ähnlichkeiten zu Angular und React aufweist.

Für Angular stimme ich dem vollkommen zu. Wer schon einmal Kontakt mit Angular oder Vue.js hatte, findet sich schnell in dem jeweils anderen Framework zurecht. Dies ist darauf zurückzuführen, dass sich die Entwickler von Vue.js einiges von der Syntax von Angular abgeschaut haben und somit die Ähnlichkeiten auch sofort sichtbar sind.

Doch was ist mit React? Nun, hier sieht das Ganze etwas anders aus, denn die Gemeinsamkeiten sind nicht so klar erkennbar wie bei Angular. Sie beziehen sich hier auf grundlegende Prinzipien, wie dem komponentenbasierten Modell (was aber auch bei Angular der Fall ist) und dem Einsatz des virtual DOM. Kommt es auf die Programmierung selber an, könnten die Frameworks nicht unterschiedlicher sein: React verwendet JSX, Vue.js das oben gezeigte Templating.

Wie eingangs schon erwähnt, verliert sich schnell der Überblick bei den vielen verfügbaren Frameworks auf dem Markt. Sucht man etwas, um schon bestehende HTML/JS Konstrukte zu erweitern, kleinere Projekte für z.B. den persönlichen Gebrauch oder auch Webseiten für Kundenprojekte zu erstellen, lohnt es sich auf jeden Fall, Vue.js in Betracht zu ziehen.

Mein Fazit: Für mich bleibt Vue.js mein persönlicher Allzeit-Favorit, da es für jede Situation gewappnet ist!

Jetzt teilen: