Server
Weil das hier eine normale Webseite ist, spielt die Musik hauptsächlich auf dem Server. Doch auch da ist es nicht sonderlich kompliziert. Eigentlich braucht es nur eine beliebige Template-Engine. Damit wir Teile wiederverwenden können, sollte sie die Möglichkeit bieten, Komponenten zu verwenden.
In diesem Beispiel hier habe ich Quarkus und Qute verwendet. Quarkus basiert auf der Java Virtual Machine. Der Server startet nach Änderungen automatisch neu (< 1 Sekunde), was bei einer Template-Engine praktisch ist. Anwendungen lassen sich auch in native Binaries kompilieren. Der Server startet dann innert Millisekunden. Das hat mir die Möglichkeit gegeben, die Anwendung auf Google Cloud Run auszuführen. Das ist eine Serverless-Umgebung, der ich belibeige Docker-Images zur Ausführung geben kann.
State Management
Der State der Webanwendung wird auf dem Server verwaltet. Das kommt daher, dass der Client ja hauptsächlich mit HTML und CSS auskommen soll. Bevor Du jetzt aber rufst "Das skaliert ja nicht!": Der State ist ganz einfach in einem Cookie abgespeichert. Der Server bleibt also stateless. Falls der State grösser würde und ich den nicht immer über die Leitung schicken will, kann ich auf Redis oder Memcached ausweichen. Google bietet ebenfalls einen Dienst an, der mit beiden Tools kompatibel ist, aber in der Google-Cloud vewaltet wird: Memorystore
Client-Library
Unpoly
Hier kommt nun der Teil, von dem die meisten noch nichts gehört haben. Der Grund, warum sich
die Seite eher wie eine Single Page App anfühlt, ist Unpoly.
Unpoly sorgt dafür, dass Links nicht die ganze Seite neu laden, sondern nur den Teil
auswechseln, der sich geändert hat. Das führt dazu, dass nur ein Teil des HTMLs wirklich
gerendert werden muss. Das CSS und JavaScript ist schon da. Unpoly macht obendrauf noch ein
Preload, sobald du mit der Maus auf einen Link im Menü fährst. Es unterstützt mich auch beim
Validieren und Abschicken von Formularen.
Neben Unpoly gibt es noch eine Reihe anderer Libraries, die ähnliche Lösungen bieten. Hier eine kleine Auswahl:
Web Components
Manchmal reichen die Standardkomponenten nicht aus. Dann muss man in die JavaScript-Trickkiste greifen. Hier gibt es bereits viele Web Components, die fix fertige Komponenten wie Kalender-Widget, Rich-Text-Editoren, sortierbare Tabellen und mehr. https://www.webcomponents.org/ bietet ein Verzeichnis dieser frei verfügbaren Komponenten.