Projekt

Homepage

  • Zusammenschnitt der Seiten für mobile.

    Figure 2:Zusammenschnitt der Seiten für mobile.

1 of 2

    Das Ziel dieses Projekts war, tailwindCSS und headlessUI zu lernen.

    Für meine Webapplikationen benutze ich aktuell Next.js, ein React-Basiertes Meta-Framework, welches Fontend und Backend sehr effizient verbindet. Bei Webapplikationen ist es nämlich so, dass eine Seite auf dem Server oder auf dem Browser gerendert (HTML/CSS aus JavaScript generieren) werden kann. Server-Side Rendering hat den Vorteil, dass der Server Daten direkt von der Datenbank holen kann und das resultierende HTML viel kleiner als das JavaScript fürs Client-Side rendering ist. Client-side Rendering hat den vorteil, dass direkt mit User Input gearbeitet werden kann. Next.js rendert per se alle Seiten auf dem Server und rendert nur Komponenten, welche User-Input brauchen, auf dem Client.

    Bisher habe ich für das Frontend Mantine benutzt. Dieses Package liefert fertige Komponenten, welche sich dann schnell und einfach in einem Frontend zusammenstellen lassen. Allerdings hat Mantine zwei Nachteile: Es ist relativ mühsam, das Aussehen zu konfigurieren, und Mantine kann nicht auf dem Server vorgerendert werden. Deswegen versuchte ich mich mal an tailwind.

    Tailwind ist ein CSS-Framework, bei welchem styles direkt in die Klassen von Elementen geschrieben werden. Tailwind generiert dann aus diesen Klassennamen das zugeörige CSS, welches dann an den Browser geschickt werden kann. Entsprechend ist für das Styling keinerlei JavaScript mehr notwending, und (fast) die ganze Homepage kann auf dem Server gerendert werden. Entsprechend funktioniert fast alles auch ohne JavaScript, und die Seite lädt viel schneller als bisher. Ausserdem habe ich so viel mehr Kontrolle über das Aussehen der Applikation.

    Fazit: Tailwind macht Spass und erlaubt, effizientere Applikationen zu schreiben. Entsprechend werde ich tailwind in Zukunft regelmässig benutzen.