Ausgangslage und erste Entscheidungen

Nachdem die Idee für Hunae entstanden war, stellte sich zunächst die Frage nach dem passenden Framework für die Umsetzung. Da ich bereits gute Erfahrungen mit Single Page Applications (SPA) auf Basis von Vue.js gesammelt hatte, wollte ich dieses Wissen gezielt weiter nutzen. Mir war wichtig, möglichst wenig Zeit in das Erlernen komplett neuer Technologien zu investieren. Ganz ohne neues Lernen geht es für mich jedoch nicht, dafür ist die Neugier zu groß. Dennoch war von Anfang an klar: Ich wollte mich nicht in technischen Details verlieren, sondern schnell ein erstes funktionierendes Ergebnis erreichen. Aus Erfahrung scheitern viele private Hobbyprojekte bereits in der frühen Phase, weil nie ein präsentierbares Resultat entsteht. Dieses Risiko wollte ich bewusst vermeiden und den Fokus auf schnelle sichtbare Fortschritte legen.

Entscheidung für Nuxt

SEO als zentrales Kriterium

Das größte Problem bei Single Page Applications ist die unzureichende SEO-Tauglichkeit. Da alle Inhalte clientseitig nachgeladen werden, stehen sie Suchmaschinen erst verspätet zur Verfügung, was die Sichtbarkeit deutlich einschränkt. Aus diesem Grund habe ich meinen Fokus auf Nuxt gelegt.

Vorteile von Nuxt

Bei Nuxt handelt es sich um ein Framework, das auf einem schlanken JavaScript-Webserver (Nitro) basiert. Nuxt rendert die Seite zunächst vollständig als statisches HTML und erzeugt dabei auch direkt die entsprechenden Meta-Tags. Dadurch sind alle wesentlichen Inhalte von Anfang an verfügbar. Besonders überzeugend war für mich, dass in Nuxt alles direkt integriert ist und sofort ein konsistentes Entwicklungssetup bereitsteht. Ein weiteres zentrales Feature ist die sogenannte Hydration: Bereits serverseitig erzeugte Daten müssen nicht erneut im Browser geladen werden, was die Performance und Effizienz erhöht. Zumindest in der Dokumentation klang das Konzept vielversprechend. Da Software-Entwicklung immer auch vom Ausprobieren lebt, habe ich beschlossen, diesem Ansatz eine Chance zu geben und zu sehen, wie gut es in der Praxis tatsächlich funktioniert.

Anforderungen an Performance und Qualität

Meine Anforderung an mich selbst ist ein Pagespeed von über 90 Prozent. Zusätzlich sollen alle anderen Werte in den gängigen Tests, insbesondere SEO, Barrierefreiheit und Best Practices, bei 100 Prozent liegen. Diese Vorgaben gelten vor allem für den Anfang, da die Performance mit zunehmender Funktionsvielfalt erfahrungsgemäß eher abnimmt. Deshalb ist es für mich essenziell, bereits zu Beginn ein technisch perfektes Fundament zu schaffen. Weniger ist in diesem Fall keine Option.

Motivation durch Freiraum

Das Schöne an einem Hobbyprojekt ist, dass man sich dafür unbegrenzt Zeit nehmen kann, genau so viel, wie man selbst für notwendig hält. Wichtig war mir dabei aber vor allem, dass das Projekt möglichst geringe laufende Kosten verursacht, weil ich den teilnehmenden Menschen eine kostenfreie Webseite bieten möchte, die dennoch professionell und schnell ist.

Erstes Setup mit Nuxt

Nachdem ich ausführlich auf der Nuxt-Website recherchiert hatte, war es Zeit für das erste Demo-Projekt.

yarn create nuxt hunae-app

Mit diesem Befehl habe ich die Basis für die „hunae-app“ erstellt und konnte direkt mit der praktischen Umsetzung starten.

Wahl des Editors

Für die eigentliche Entwicklungsarbeit fiel die Entscheidung auf das kostenlose Microsoft Visual Studio Code. Ausschlaggebend dafür waren meine bisherigen positiven Erfahrungen mit dem Editor. Zudem zeigte die erste Recherche, dass es eine Vielzahl an hilfreichen Erweiterungen gibt, die den Arbeitsalltag als Software-Entwickler deutlich erleichtern.

Da Nuxt auf Vue.js basiert, habe ich die offizielle Visual Studio Code Extension von vuejs.org installiert.

Framework für die visuelle Gestaltung

Generelle Überlegungen

Als nächstes stellte sich die Frage nach dem passenden Framework für die visuelle Gestaltung. Da ich selbst kein Designer bin und in diesem Bereich häufig Unterstützung benötige, war mir wichtig, ein Framework zu wählen, das die Umsetzung so einfach wie möglich macht, aber dennoch genügend Flexibilität bietet. Ich persönlich habe kein großes Interesse an CSS und empfand die Arbeit damit über die Jahre hinweg oft als mühsam und frustrierend. Daher habe ich bisher lieber Frameworks wie Bootstrap oder Vuetify verwendet. Diese binden zwar stärker an vorgegebene Designstrukturen, nehmen einem dafür aber die direkte Arbeit mit CSS ab.

Entscheidung für Tailwind CSS

Für das Hunae-Projekt wollte ich jedoch ein noch schlankeres System einsetzen, um meiner eigenen Anforderung an maximale Performance gerecht zu werden. Ich verfolge Tailwind CSS bereits seit seiner Entstehung und hatte es vor einigen Jahren auch einmal getestet, dann aber wieder zur Seite gelegt. Nach einer erneuten, intensiven Auseinandersetzung mit dem aktuellen Stand des Projekts war schnell klar: Es muss Tailwind CSS sein. Mir gefällt besonders, dass ich dabei vollständig auf das Schreiben von eigenem CSS verzichten und stattdessen ausschließlich mit Utility-Klassen arbeiten kann.

Ergänzung durch DaisyUI

Aber da ich nicht sehr viel Zeit ins Design stecken möchte und meine Begeisterung vor allem in der Backend-Entwicklung liegt, war Tailwind CSS allein nicht genug. Ich wollte nicht alles selbst gestalten, sondern lieber auf vorgefertigte Komponenten zurückgreifen und Tailwind CSS nur für die Detailanpassungen verwenden. Ich war bereits kurz davor, die professionellen Tailwind-Plus-Module zu kaufen. Da ich das Projekt jedoch kostenlos zur Verfügung stellen möchte, wollte ich diese zusätzlichen Kosten nicht auf mich nehmen. In diesem Zusammenhang bin ich auf DaisyUI gestoßen. Das Konzept hat mich überzeugt: einfache, sofort einsatzbereite Komponenten, kombiniert mit der Flexibilität, Details weiterhin mit Tailwind CSS zu verfeinern. Da ich beim Design selbst zusätzlich auf Unterstützung (pathfindva.com) zählen konnte, passte dieser Ansatz gut. Also begann ich damit, die ersten Komponenten zusammenzustellen, um eine erste einfache Seite aufzubauen.

Module und Versionsanforderungen

Nuxt selbst bietet Module an, mit denen sich neue Features einfach hinzufügen lassen. Ich wollte auch Tailwind CSS auf diese Art integrieren. Dabei ist mir jedoch aufgefallen, dass das offizielle Nuxt-Modul nicht die aktuellste Version von Tailwind CSS verwendet.

Damit war die Nutzung dieses Moduls aus meiner Sicht sofort ausgeschlossen. Wenn ein Projekt neu startet, müssen die eingesetzten Frameworks unbedingt auf dem neuesten Stand sein. Ich würde in diesem Fall sogar lieber Alpha-Versionen einsetzen, als mit einer veralteten Version zu beginnen. Was interessiert mich eine Software, wenn sie schon ein halbes Jahr alt ist. Dann lebe ich lieber mit Fehlern, warte aktiv auf Bugfixes und spiele regelmäßig Updates ein. Meine 20 Jahre Erfahrung als Software Engineer haben mir immer wieder gezeigt, dass Projekte, die nicht kontinuierlich auf dem neuesten Stand gehalten werden, langfristig unweigerlich scheitern. Irgendwann ist eine Migration auf eine aktuelle Version einfach nicht mehr realistisch oder nur noch mit enormem Aufwand möglich. Deshalb gilt für mich: lieber oft und regelmäßig kleine Updates einspielen, als irgendwann vor einem unüberschaubar großen Berg an Änderungen zu stehen. Ein neues Projekt braucht die aktuellsten Versionen, das ist eine Regel, die man nicht bricht.

Integration von Tailwind CSS und DaisyUI

Manuelle Installation

Zum Glück war schnell eine Anleitung gefunden, die die manuelle Integration von Tailwind CSS beschreibt. Dabei wurde Tailwind CSS über ein Vite-Plugin installiert. Vite war ohnehin meine bevorzugte Wahl, da ich Webpack als zu langsam empfinde, auch wenn es seinen Zweck grundsätzlich gut erfüllt. Mit den Schritten in der Anleitung war Tailwind CSS im Projekt bald verfügbar und einsatzbereit.

Setup von DaisyUI

Auch DaisyUI war sehr einfach zu installieren. Damit war der erste Rahmen geschaffen, um mit der eigentlichen Arbeit an Hunae zu starten.

Domain-Registrierung: hunae.de

Noch am selben Tag habe ich eine Domain für das Projekt reserviert, denn es war mir zu diesem Zeitpunkt bereits klar, dass ich dieses Projekt machen will und auch machen werde. Ich habe hunae.de als Domain gewählt und die Domain gleich für ein paar Jahre im Voraus bezahlt. Ziel ist ja, sehr schnell eine erste Version live zu bekommen, und da ist eine eigene Domain Pflicht.