Prototypen zu coden ist nicht so schwierig, wie es auf den ersten Blick erscheinen mag. Ein mögliches Hilfsmittel dafür stelle ich in diesem Post vor.
Aufmerksame Leser dieses Blogs werden den Namen VueJS bestimmt schon einmal gehört haben. Das Framework ist unter anderem auf meiner Bookmarks-Seite verlinkt und kommt auch bei diesem Blog zum Einsatz. Auch sonst habe ich schon ein paar mal damit gearbeitet, weshalb ich mir gedacht habe, dass es an der Zeit ist, einmal einen Post darüber zu verfassen 🙌
Vornweg: Dieser Artikel wird nicht ein ausführliches Tutorial, sondern soll einen Überblick über das Thema geben. Falls mir einmal danach ist, werde ich sicher noch das ein oder andere kurze, dafür konkrete Tutorial publizieren.
Was ist Vue überhaupt?
An dieser Stelle beschreibt der erste Absatz der Vue-Doku das Framework wohl am besten:
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Also, noch einmal auf Deutsch: Vue ist im wesentlichen ein Javascript-Framework zum Realisieren von UIs. Es ist so aufgebaut, dass es sowohl für eine einfache Website, als auch für komplexe Webapps eingesetzt werden kann. Dafür gibt es bestimmte Libraries (siehe am Ende dieses Posts), die bei Bedarf eingesetzt werden können.
Nachfolgend ein «Hello World»-Vue-Projekt 👇
Wer mehr über den Code erfahren will, wie er funktioniert und was im Hintergrund genau passiert, kann gerne die «Introduction»-Seite der Doku lesen. Dort wird alles, was in diesem Beispiel vorkommt, sehr einfach und anschaulich erklärt. Was ich hier an dieser Stelle hervorheben möchte, ist der Javascript-Teil des Programmes:
var app = new Vue({
el: '#app',
data: {
name: '',
emoji: false
}
})Diese sieben Zeilen sind alles, was Vue benötigt, damit das Programm läuft. Mit dem ersten Befehl wird eine neue Vue-Instanz erzeugt. Dieses Objekt bekommt anschliessend zwei Eigenschaften, die eigentlich jede Instanz besitzt: Mit el: '#app' wird Vue mitgeteilt, dass es um das Element mit der id app geht. In dem data-Objekt werden die für das Programm relevanten Daten gespeichert. Das sind in diesem Fall ein String mit dem Namen des Benutzers, sowie eine Boolsche-Variable, die angibt, ob Emojis angezeigt werden sollen oder nicht. Der Rest der «Magie» geschieht im HTML-Teil des Programms über sogenannte Direktiven. Mehr Infos dazu findet ihr wie gesagt in der Vue-Doku.
Natürlich ist Vue nicht das einzige Javascript-Frontend-Framework, das es gibt. React von Facebook ist beispielsweise sehr populär, oder auch Angular von Google. Beide sind aber für meinen Geschmack etwas zu komplex. Seit kurzem gibt es auch noch Svelte, das Vue zumindest in Sachen Einfachheit ziemlich ähnlich ist. Damit gearbeitet habe ich aber noch nicht, da ich eigentlich mit Vue ganz zufrieden bin 😅
Warum ich Vue gerne benutze
Das Vue in vielen meiner Webprojekte zum Einsatz kommt, ist kein Zufall. Hier ein paar Gründe, warum ich das Framework gerne nutze 👇
Einfacher Einstieg
Vue ist im Vergleich zu anderen Javascript-Framework wirklich einfach zu lernen. Vorausgesetzt werden eigentlich nur Kenntnisse in HTML, CSS und JS. Da diese Sprachen sowieso für jedes Webprojekt eingesetzt werden, ist die Einstiegshürde also nicht sonderlich hoch.
Für ein erstes Projekt kann Vue ganz einfach mittels script-Tag eingefügt werden:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Damit ist man auch schon startklar und kann gleich loslegen. Meist wird dann als erstes eine neue Vue-Instanz erstellt, die Teile der Applikation steuern kann (👀 vorheriges Kapitel). Dadurch, dass das Einbinden mit dieser Methode so einfach funktioniert, kann man Vue gut in bestehende Projekte integrieren und so die Funktionalität Schritt für Schritt erweitern.
Irgendwann wird man aber an den Punkt kommen, wo die oben beschriebene Methode nicht mehr ausreicht. Da kommt dann Vue-Cli ins Spiel (Cli steht hierbei für «Command-line Interface»). Dieses Tool hilft dabei, ein Vue-Projekt aufzubauen und zu konfigurieren. Hat man es via npm installiert, muss lediglich folgender Befehl ins Terminal eingegeben werden und man wird durch den Erstellungsprozess geführt:
# Herkömmliche Methode im Terminal
vue create my-project
# oder
# Konfiguration über ein GUI
vue uiNach der Konfiguration hat man nun ein «richtiges» Vue-Projekt aufgesetzt, das nun alle Vorteile des Frameworks bietet. Dazu gehören:
- Routing
- Components
- Hot-Reload
- Production-Ready Builds
- und noch viel mehr...
Zusammengefasst kann man also sagen, dass Vue einen relativ einfachen Einstieg bietet. Kennt man sich dann bereits etwas mit dem Framework aus, gibt es eine einfache Methode, ein Vue-Projekt aufzusetzen, welches alle Möglichkeiten verfügbar macht.
Komplexität (bzw. Einfachheit)
Dieser Punkt geht ein wenig mit dem vorhergegangenen einher. Vue ist nicht nur einfach zu erlernen, es ist auch einfach zu benutzen. Hier greift die berühmte Pomodoro-Regel ganz gut: Mit 20% der Syntax, können bereits 80% der Funktionen realisiert werden. Viele häufige Use-Cases sind direkt von Haus aus integriert, zum Beispiel das bereits aus Angular bekannte Two-Way-Databinding. Generell vereint Vue viele Konzepte aus zum Beispiel React oder eben auch Angular. Die besten Eigenschaften bereits etablierter Projekte werden so zu einem neuen Framework. Und das merkt man Vue auch an, denn es ist wirklich sehr praktisch einsetzbar.
Community
Nicht zu vernachlässigen ist bei einem Frontend-Framework wie Vue natürlich die Community, die dahinter steht. Ursprünglich von Evan You ins Leben gerufen, wird das Tool mittlerweile von einer grossen Zahl Freiwilliger weiterentwickelt.
Doch nicht nur am Framework selber arbeiten viele Freiwillige. Es gibt nämlich sehr viele Vue-Komponenten und Packages, die einem zur Verfügung stehen. Ganz egal ob man ein Drag & Drop Interface bauen, oder einfach nur ein Formular validieren möchte; für fast alle möglichen Funktionen gibt es eine Library die ein Mitglied der Community entwickelt hat. Dies hat den Vorteil, dass viele Features nicht von Grund auf neu entwickelt werden müssen und man sich so anderen Dingen widmen kann. Für mehr Informationen zu Vue-Libraries siehe die Linkliste am Ende dieses Artikels.
Nicht zuletzt hat eine grosse Community auch den Vorteil, dass einem bei einem Problem schnell geholfen werden kann. Viele Bugs sind schon einmal irgendwo aufgetaucht und wurden von jemandem gelöst. Mit einer einfachen Google-Suche oder auf StackOverflow findet man meistens die passende Antwort für sein Vue-Problem.
Ein konkretes Beispiel
Damit ihr euch etwas besser vorstellen könnt, wie so ein Vue-Prototyp aussieht, hier ein Beispiel: Die «Serviceapp» 👇
Dabei handelt es sich um einen eher Content-lastigen Prototypen, der vor allem dazu dienen sollte, die neuen Module in unseren Niederlassungen zu erklären. Die Navigationsstruktur sah so aus:
Startseite (Level 0; Übersicht über Teile der App)
|_ Orientieren* (Level 1; Auflistung aller Module)
|_ Module* (Level 2; Detailbeschreibung des jeweiligen Moduls)
|_ Buchen* (Level 1; Links zum Reservationstool)
|_ Profitieren* (Level 1; Links zu Promotionen)
|_ Rückmelden (Spezialseite; NPS Formular)
* Dynamisch generierte SeiteWie ihr seht, ist eigentlich die ganze App in «Levels» (oder Stufen) aufgebaut. Einzige Ausnahme ist das Feedback-Formular, das eine Spezialseite ist. Das Besondere an den anderen Seiten ist, dass diese dynamisch generiert werden. Dafür arbeitete ich mit einem Vuex-Store, der alle Daten beinhaltet (also als eine Art «CMS» funktioniert). Hier ein kleiner Auszug daraus:
export default new Vuex.Store({
state: {
counter: 0,
lang: 'de',
langChoice: 'fr',
ui: {
title: {
de: 'BEKB à la carte',
fr: 'BCBE à la carte'
},
...
},
...
areas: [
{
id: 'orientieren',
iconPath: 'img/area/orientieren.svg',
title: {
de: 'Orientieren',
fr: 'Orienter'
},
info: {
de: 'BEKB à la carte – was darf es sein?<br/>Entdecken, auswählen und nutzen',
fr: '« BCBE à la carte » : comment pouvons-nous vous être utile ?<br/>Découvrir, choisir et utiliser'
},
modules: [
{
id: 'marktplatz',
imagePath: 'img/module/marktplatz.jpg',
title: {
de: 'Marktplatz',
fr: 'Place du marché'
},
slogan: {
de: 'Wo man sich trifft',
fr: 'Le lieu où l’on se rencontre'
},
useCases: [
{
de: 'mit aktuellen Fragestellungen in Berührung kommen.',
fr: 'approfondir des questions actuelles ;',
},
{
de: 'Zugang erhalten zu wichtigen finanziellen Themen.',
fr: 'en apprendre davantage sur des sujets-phares du monde de la finance ;',
},
{
de: 'sich mit uns austauschen.',
fr: 'aborder les questions qui vous tiennent à cœur avec nous.',
}
],
text: {
de: '<p>Der Marktplatz ist der Mittelpunkt in unseren Standorten, an dem man sich begegnet, Neues erlebt und sich austauscht. Hier können Sie sich mit aktuellen Themen auseinandersetzen und sich mit unseren Beraterinnen und Beratern ins Thema vertiefen.</p><p>Unsere Standorte sind modular aufgebaut und modern eingerichtet – so fördern wir den Kontakt und den Dialog. Sind Sie interessiert? Herzlich willkommen.</p>',
fr: '<p>La place du marché est le centre névralgique de nos sièges. C’est le lieu convivial où l’on se rencontre et où l’on échange. Ici, vous pouvez discuter des questions actuelles et approfondir diverses thématiques avec nos conseillers.</p><p>Nos sièges sont organisés de manière modulable et aménagés de façon moderne, favorisant ainsi le contact et le dialogue. Avons-nous éveillé votre intérêt ? Bienvenue à la place du marché !</p>'
},
gallery: [
{
imagePath: 'img/module/galleries/marktplatz1.jpg',
description: {
de: 'Am Marktplatz haben Sie die Gelegenheit, sich mit neuen Themen auseinanderzusetzen.',
fr: 'À la place du marché, vous avez l’occasion de discuter avec d’autres personnes de questions actuelles.'
}
},
{
imagePath: 'img/module/galleries/marktplatz2.jpg',
description: {
de: 'Am Marktplatz haben Sie die Gelegenheit, sich mit neuen Themen auseinanderzusetzen.',
fr: 'À la place du marché, vous avez l’occasion de discuter avec d’autres personnes de questions actuelles.'
}
}
]
},
...
]
},
...
]
},
...
})Der state-Teil des Files ist hierbei am wichtigsten. Hier werden alle statischen Daten gespeichert. Ich habe ihn in zwei grössere Teile aufgesplittet; den ui-und den areas-Part. Ersterer enthält die Texte aller UI-Elemente, wie zum Beispiel Titel, Labels, etc. Im entsprechenden Template werden diese dann so ausgegeben:
<h1>{{ ui.title[lang] }}</h1>Dies hat den Vorteil, dass einerseits alle Daten zentral an einem Ort gespeichert sind und dort verwaltet werden können und andererseits die Zweisprachigkeit relativ simpel umzusetzen ist. Die Eigenschaft lang wird aus dem Localstorage-Speicher des Browsers gelesen (oder der default-Wert wird verwendet, wenn die App zum ersten Mal geöffnet wird) und bewirkt so, dass im obigen Beispiel entweder der deutsche oder französische Titel ausgegeben wird.
In den areas werden dann die einzelnen Teile der App gespeichert, «Level 1» sozusagen. Jede dieser Areas hat dann untergeordnet ebenfalls die einzelnen Module (modules). Damit ich jetzt nicht für jedes dieser Areas bzw. Module eine eigene Seite machen musste, habe ich mit einem Template und dem sogenannten «Dynamic Route Matching» gearbeitet. Das funktioniert so:
- Der User navigiert zu einer bestimmten URL, beispielsweise bekb.ch/serviceapp/area-orientieren/module-marktplatz
- Die dynamischen Teile der URL, d.h.
area-orientierenbzw.module-marktplatzwerden an die Vue-Komponente weitergegeben. - Anhand dieser Parameter werden anschliessend die richtigen Daten aus dem Vuex-Store geholt und auf der Seite dargestellt.
Wie bereits erwähnt hat das den grossen Vorteil, dass ich so einfach ein Template (bzw. eine Vue-Komponente) erstellen musste, welches dann aber alle möglichen Inhalte darstellen kann. Dadurch lässt sich die App viel einfacher verwalten, als wenn jede Seite von Hand generiert werden müsste.
An diesem kleinen Beispiel erkennt man denke ich ganz gut, wie Vue vom Konzept her funktioniert und wo es einem die Arbeit erleichtert.
Nützliche Ressourcen
Nachfolgend eine Liste mit ein paar nützlichen Links und Ressourcen rund um VueJS 👇
- Offizielle Website: https://vuejs.org/
- Vuex: https://vuex.vuejs.org/
- Nuxt (um SSR-Applikationen zu erstellen): https://nuxtjs.org/
- Gridsome (SSG, der unter anderem auf dieser Website verwendet wird): https://gridsome.org/
- Liste mit allen möglichen Vue Ressourcen: https://awesome-vue.js.org/
Schlusswort
VueJS ist als Frontend-Framework ein ziemlich gutes Tool, um einfache Prototypen umzusetzen. Dadurch, dass es vergleichsweise einfach zu erlernen und einzusetzen ist, ist es auch für Kreative wie Designer (oder eben auch Mediamatiker 😁) eine gute Möglichkeit, eigene Ideen in die Tat umzusetzen.
Ich hoffe, ich konnte euch mit diesem Post einen kleinen Einblick geben, euch das Framework etwas erklären und zeigen, weshalb ich es so praktisch finde. Ansonsten kann ich die oben angegebenen Links empfehlen, dort gibt es noch mehr (und vor allem gut dokumentierte) Infos zu finden.