Javascript-Frameworks und -Bibliotheken sind bereits seit Monaten das heiße Eisen in der Frontend-Entwicklung schlechthin. Auch hier bei 4c haben wir schon so ziemlich alles ausprobiert, was relevant ist - egal ob Angular, Vue oder Aurelia. Bei meiner früheren Agentur bin ich selbst mit Vue.js in Kontakt gekommen und habe es bei einem Projekt für einfaches Templating benutzt. Da ich in den letzten Monaten nicht mehr damit gearbeitet hatte, habe ich mich dazu entschlossen, meine Kenntnisse wieder aufzufrischen und zu erweitern - um einen kleinen App-Prototypen zu bauen!
Nix von der Stange
Da ich einen thematischen Aufhänger für meine App brauchte, schnappte ich mir erstmal Stift und Papier und schrieb ein paar Ideen nieder. Von den ersten Gedanken à la Notizbuch, Rechner, etc. verabschiedete ich mich schnell, da es dafür bereits zahlreiche Beispiele gibt und ich gleich etwas spezielleres machen wollte. Nach einigem Grübeln hatte ich dann eine musikalische Idee - eine App, mit der man kurze Notensequenzen von Liedern und Übungen in Tab-Schreibweise notieren, speichern und verwalten kann (leider konnte ich die Funktionalität noch nicht auf einen prägnanten Begriff herunterbrechen, den auch Nicht-Musiker verstehen).
Kurze Erklärung hierzu: normalerweise werden Musikstücke schriftlich mithilfe von einem Notensystem festgehalten, das jeder irgendwann in der Schule einmal gesehen hat. Für Saiteninstrumente wie Gitarre oder Bass gibt es noch die alternative Tab-Schreibweise, bei der nicht die Notenwerte, sondern der Bund, der für eine Note gegriffen werden muss, notiert wird. Diese Notation ist in der Pop- und Rockmusik sehr beliebt, da man hierfür keine Noten lesen können muss und im Internet massenweise Tabs für alle möglichen Songs der Welt zur Verfügung stehen (z.B. bei Ultimate Guitar).
Zur Veranschaulichung ein Ausschnitt des Intros von Stairway To Heaven jeweils in Noten- und Tabschreibweise:
Aller Anfang ist…relativ leicht
Nachdem mir klar war, was meine App können sollte, skizzierte ich zunächst ein paar Mockups und erstellte ich mein Projekt mithilfe der vue-cli. Mir war wichtig, meine Styles in den Vue-Komponenten gleich in SCSS schreiben zu können, weshalb ich zu Beginn noch die Webpack-Konfiguration erweiterte. Dann ging es auch schon los, ich gestaltete zunächst das Hauptmenü der App mit den zwei zentralen Menüpunkten „Create“ und „Show Collection“ und befasste mich ein bisschen mit dem Vue-Routing, um von der Main-Seite über die Menüpunkte auf die weiteren Seiten zugreifen zu können.
Das Herzstück...
…war in meinen Augen die Funktion, einen neuen Tab erstellen zu können. Wie im obigen Bild zu sehen ist, besteht so ein Tab aus (in diesem Fall) 6 Linien, die jeweils für eine Saite auf der Gitarre stehen. In diesen Linien sind die „Noten“, die für eine Melodie zu spielen sind, eingefasst. Mir war früh klar, dass die akkurate Darstellung inklusive sauberer Editierbarkeit der Noten etwas tricky werden könnte. Ich nahm mir zunächst vor, nur eine Saite abzubilden und bastelte die Struktur mithilfe eines 16er Grids (für Sechzentelnoten) mit innenliegenden "<textarea>“s zusammen. In diesen Textareas wird der Notenwert mithilfe einer Zahl zwischen 0 und üblicherweise 22 eingetragen oder einfach leergelassen.
Den Inhalt dieser Textareas greife ich mir dann mit Javascript ab und speichere sozusagen eine „Konfiguration“, die später beim Zugriff auf einen gespeicherten Tab wieder in die Tab-Schablone gespeist werden soll. Als Vorbild diente mir hier das TodoMVC - Beispiel von Vue.js, mit dessen Hilfe ich mich ein wenig besser ins Data-Binding und die Arbeit mit dem Local Storage reinfuchsen konnte.
Ist es wirklich schon so spät?
Leider ja! Da ich mir ein recht ehrgeiziges Ziel gesetzt hatte und viel Zeit meines InnovationDays schon für Konzeption und das Basteln der Grundstruktur meiner „Create“-Page draufgegangen war, blieb gar nicht mehr so viel Zeit mich wirklich mit Vue zu beschäftigen. Dennoch habe ich in folgenden Bereichen einiges lernen können:
- Konzeption einer App (Problemstellung herausarbeiten, Architektur einer App planen)
- App-Routing mit vue-Router
- Data-Binding mit v-model und v-bind
- Speicherung von Daten in Local Storage
Generell bin ich mit dem Start meiner App ganz zufrieden und plane als nächstes, die Tab-Ansicht zu optimieren und auf sechs Saiten zu erweitern sowie die gespeicherten Tabs abrufen zu können. To be continued ;-)