SvelteKit [1] ist ein Frontend-Framework, das Svelte [2], eine UI-Library / -Sprache, verwendet und um eine komplette Toolchain ergänzt. Dazu gehört unter anderem ein Entwicklungsserver mit Hot Module Replacement (via Vite), ein Produktionsserver, der auch als vollwertiges Backend erweitert werden kann, vorkonfiguriertes Server Side Rendering (SSR), Static Site Generation (SSG), Routing und vieles mehr.
Nicht im Lieferumfang dabei sind typische Bestandteile eines Backend-Frameworks, wie z.B . eine Datenbankanbindung. Die Serverseite ist also eher als Backend for Frontend (BFF) vorgesehen, um Features wie SSR/SSG zu ermöglichen.
Directory Based Routing
… ist wohl die auffälligste Eigenheit von SvelteKit. Dabei wird der Pfadanteil der URL durch eine entsprechende Verzeichnisstruktur unter <root>/src/routes abgebildet.
Routing Beispiel
src/
+–– components/
+–– lib/
+–– routes/
+–– +error.svelte
+–– +layout.svelte
+–– +page.svelte
+–– users/
+–– [name]/
│ +–– +page.svelte
│ +–– +page.ts
+–– +page.server.ts
+–– +page.svelte- In jedem Verzeichnis wird das Svelte-Component der jeweiligen +page.svelte gerendert. Daten können in der jeweiligen +page.ts (oder +page.server.ts) aggregiert werden.
- Eckige Klammern im Verzeichnisnamen bedeuten Route-Parameter (doppelte eckige Klammern umfassen optionale Parameter).
Einige Vorteile:
- Die Struktur ist recht intuitiv.
- Mit +layout.svelte, +layout.ts, +layout.server.ts und virtuellen Routes (unsichtbare Zwischenverzeichnisse) sind umfangreiche Möglichkeiten gegeben, um detaillierte Layouts zu realisieren
Pet Peeves
- Die speziellen Dateinamen (z.B. +page.svelte) führen dazu, dass viele Dateien mit gleichem Namen existieren, was in der IDE schnell unübersichtlich wird.
- Sonderzeichen in Datei- und Verzeichnisnamen (z.B. eckige Klammern) sind in der Kommandozeile sehr unhandlich.
Eindruck
Ein komplettes Setup mit SSR, CORS usw. zu konfigurieren, kann traditionell schon recht fummelig sein, da ist der Batteries-Included-Ansatz von SvelteKit eine echte Erleichterung. Wenn man Sonderwünsche hat, muss man natürlich trotzdem selbst Hand anlegen, dabei werden einem aber keine allzu großen Steine in den Weg gelegt.
SvelteKit ist noch jung, aber wirkt inzwischen produktionsreif. In den letzten Jahren hat es eine rasante Entwicklung durchlebt, während derer auch viele speziellere Use Cases berücksichtigt wurden.
Die offizielle Dokumentation ist umfangreich und gut geschrieben. Allerdings ist es schwer, darüber hinaus aktuelle Informationen zu finden. Das initiale Setup ist einfach und ermöglicht einen schnellen Einstieg.
