Hendrik-Loesch.de – Teil 2: Einstieg in VueJS

Wie bereits im ersten Teil der Blogserie geschrieben, setze ich bei meiner persönlichen Seite gezielt auf VueJS. Damit verstoße ich gewissermaßen gegen den Trend für jeden Anwendungsfall Angular oder React einsetzen zu wollen. Tatsächlich hatte ich sogar mit Angular begonnen, aber mir kam das Framework insgesamt zu umfangreich für meinen Anwendungsfall vor. Immerhin wollte ich eigentlich nichts anderes als ein Webseite mit ein paar Goodies basteln und dabei handelt es sich um die sprichwörtlichen Spatzen.

React wäre in diesem Fall eigentlich keine schlechte Wahl gewesen und ich habe mich auch ein wenig damit beschäftigt. Mehr als dieses „wenig“ ist es aber dann doch nicht geworden und ich kann auch nicht einmal zufrieden stellend sagen warum. Da ich mir React und VueJS zeitgleich angesehen habe und Vue sich für mich so anfühlt wie AngularJS hätte sein sollen, ist React wohl einfach hinten runter gefallen.

Damit sind wir auch schon bei der Einschätzung zu Vue. Bis auf wenige Ausnahmen kommt mir das Framework einfach perfekt für meinen Anwendungsfall vor.

  • Es ist sehr leicht zu lernen
  • Die Dokumentation ist sehr gut.
  • Die Community ist sehr aktiv.
  • Es sieht sich selbst als Front-End-Bibliothek und versucht nicht ein Applikationframework zu sein.
  • Mit ES2015 verwendet es ein JavaScript ohne Schnörkel aber mit vielen Erleichterungen
  • Alles was komplexer ist und man nicht direkt braucht (siehe Router oder Vuex) liegt als Plugin vor und kann auf Bedarf einfach nachinstalliert oder sogar ersetzt werden.
  • Es gibt funktionierende Komponentenbibliotheken, die den Einstieg noch weiter vereinfachen, da man sich nur bedingt mit Styling rumärgern muss.
  • Es bietet eine Vielzahl von Templates durch die man sehr einfach sogar Progressive Web Apps oder Elektron Apps umsetzen kann.
  • Legt man eine neue App an wird man komfortabel durch die Konfiguration geführt.
  • Die Infrastrukturbestandteile wie WebPack, Linter und Testing, merkt man kaum. Sie sind da und man kann sie nutzen. Sie funktionieren von Beginn an und müssen nicht zusammen gefrickelt werden.

Alles in allem ist es somit perfekt für Personen geeignet die erst in das Thema Web-Frontend-Entwicklung einsteigen. Man bekommt die volle Bandbreite von Technologien und Frameworks, muss sich aber nicht komplett darin einarbeiten sondern kann sie erst einmal nutzen und verstehen, bevor man sich auf die Einzelheiten stürzt.

Man merkt, ich bin voll des Lobes und begeistert. Dies kommt auch daher, dass ich über die letzten 15 Jahre immer wieder Ausflüge ins Web gemacht habe und dennoch nicht darin verhaften blieb. Erst als Jungendlicher, der mit Texteditoren Plain Html gebastelt und seine Layouts mit Tabellen zusammen klickte. Später dann mit jQuery, welches mich durch den entstehenden Spagetthicode zum schnellen aufgeben zwang. Immer wieder bin ich zurück auf Desktopapplikationen bzw. Apps gefallen, weil sich dort alles wie aus einer Hand anfühlte. Umso schöner ist es also, dass dieses Gefühl nun auch im Web angekommen ist.

Womit ich aber nicht sagen möchte, dass dies nur auf VueJS bezogen ist. 2015 hatte ich mit AngularJS einen sehr ähnlichen Eindruck. Dort fühlten sich Dinge wie die $Scrope Variable nur nicht richtig an. Mit dem Umstieg auf Angular wurde dieser Eindruck dann wieder eingedellt, da das Transpilieren von Typescript zu Beginn die Infrastruktur verkomplizierte, deren Verwendung regelmäßig durch Updates behindert wurde, welche Breaking Changes enthielten. Der Umstand hat sich aber mittlerweile wieder beruhigt und es gut zu sehen, dass man nicht alle 2 Monate über einen Rewrite der ganzen App nachdenken muss…

Kommen wir aber noch einmal darauf was ich mit der leichten Erlernbarkeit bei VueJS meine. Nachfolgend findet sich der typische Aufbau einer Komponente. Diese wird üblicherweise in einer einzigen Datei hinterlegt und besteht aus drei Teilen.

  • Das Template enthält die eigentliche Darstellung in Form von Html.
  • Der Script-Bereich enthält die eigentliche Logik in Form von Javascript.
  • Der Style-Bereich enthält mögliche Style sheets.

<template>
  <div id="myComponent">
    
  </div>
</template>

<script>
  export default {
    name: 'myComponent'
  }
</script>

<style>

</style>

Alle Eigenschaften der Komponente werden als Felder in das entsprechende Objekt eingefügt. Die eigentlichen Daten werden unter data zusammen gefasst und können, wie bei vielen anderen Frameworks dieser Art, mit {{ }} in der Oberfläche gebunden werden. Neben diesen „normalen“ Daten gibt es aber auch die Möglichkeit von computed Properties, als Eigenschaften die auf Basis anderer Eigenschaften berechnet werden. Mit watch kann zudem auf die Änderung von Werte reagiert werden. Die Methoden werden unter methods zusammen gefasst und mit filters können Funktionen hinterlegt werden, die Daten in der Oberfläche verändern. Im Beispiel wird hierbei der Link ohne http://www dargestellt. Last but not least gibt es eine Reihe von Laufzeitereignissen, von denen created und mounted nur die am häufigsten verwendet werden. Created ist dabei der Konstruktor und mounted wird aufgerufen sobald die Komponente in das DOM eingehangen wird.


<template>
  <div id="myComponent">
    <span :click="open({{link}})">{{link | shortenUrl}}</span>
  </div>
</template>

  export default {
    name: 'myComponent',
    data: () => ({
      link: 'http://www.just-about.net'
    }),
    watch: {
      ...
    },
    computed: {
      ...
    },
    methods: {
      open (url) {
        open(url, '_blank')
      }
    },
    filters: {
      shortenUrl (value) {
        ...
      }
    },
    created () {
      ...
    },
    mounted() {
      ...
    }
  }

Das mag jetzt etwas viel auf einmal gewesen sein, zeigt aber ein sich wiederholendes Muster und einen sehr großen Teil der eigentlichen Features, die man täglich benutzt. VueJS basiert demnach vor allem auf solchen Konventionen und jene zu verinnerlichen ist vergleichsweise einfach. Daher noch einmal: Wer ohne größeren Aufwand eine Webseite bauen möchte bei der er mit Plain-Html nicht weit kommt, der ist hier hervorragend aufgehoben.