Svelte

DevSnack 04.04.2022

New kid on the block?

Version 1 erschien schon 2016

Rich Harris

The Guardian → New York Times → Vercel

Aktuelle Version ist
3.46.6

„Was für den Guardian richtig war, kann für ZEIT ONLINE nicht falsch sein.“

— Helmut Schmidt, 2022

Möglichst klein und schnell

Svelte ist schnell

Svelte ist schneller als... React... und Preact... und Angular... und Vue... und Elm, Apline, Ember, Dojo... also als alle Frameworks die ich kenne.

JS-Frameworks Benchmark

Aber warum???

Svelte kompiliert HTML, CSS, Javascript und die wenigen sveltischen Module und Kommandos in Javascript-Module.

• Es muss kein Frameworkcode geladen werden.
• Es wird nur der Code ausgeliefert, der auch gebraucht wird.
• Svelte ist mit anderen Frameworks kombinierbar.
• Svelte ist leichter zu erweitern, weil neue Features nur dort zum Tragen kommen, wo sie gebraucht werden.

Einfach und schnell produktiv

Gute alte Bekannte

Komponentenlayout bei vue3 abgeschaut…

						

						
Say {name}!

												
						

• Komponenten sind in „HTML“ geschrieben.
• Sie können Scripte und Styles enthalten.
• Sie können andere Komponenten importieren.
• Diese haben jeweils ihren eigenen Scope.

Kontrollstrukturen

Events

Properties

Lifecycle functions

Tick?

Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none..

When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next microtask to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.

Reactive statements

Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the $: JS label syntax. Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.

Text expressions, <div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>, {@html}, bind:property (Daten vom Kind ans Elternelement reichen), bind:group (Gruppen von input verknüpfen), Actions (Funktionen die ablaufen, wenn ein Element erschaffen wird), in:fn/out:fn, --style-props (zur Übergabe von CSS custom properties), <svelte:self> (Rekursion, baby), createEventDispatcher (Events durch Komponenten bubblen lassen)…

Eine letzte Sache noch

Svelte Store(s)

• Komponenten können miteinander Daten austauschen über props, 2-way-data-binding und Events… das sind allerdings immer Eltern-Kind-Beziehungen…
• Aber nicht jede Information über den state unserer App, passt oder gehört in diese Komponentenhierachie.
• Beispielsweise will man nicht den Login-Zustand eines Nutzers immer durch einen Baum von Komponenten reichen.
• Dafür sind die drei Svelte Stores.

Ein Store ist ein Objekt mit einer subscribe() Methode, die interessierte Parteien benachrichtigt, wann immer der Inhalt des Stores geändert wird. Optional gibt es eine set() Methode, die neue Werte im Store setzen kann. Dieses minimale Interface nennt sich store contract.

Svelte: readable, writable and derived store.

Flüssige Animationen

Transitions

Tweening

Crossfade

Svelte Kit

New kit on the block?

• Sort of… in public beta seit 2021.
• Es gab einen Vorgänger: „Sapper“, der ähnlich gestrickt war.

„SvelteKit is a framework for building extremely high-performance web apps.“

Routing

• Seiten
• Endpunkte

Seiten

• Seiten sind Svelte-Komponenten. *.svelte
• Rendern typischerweise HTML zur Anzeige beim Nutzer.
• Plus alles CSS und JS das gebraucht wird.
• Werden auf dem Server (SSR) und auf dem Client (Hydration) gerendert.
• Das genaue Verhalten ist konfigurierbar.
• Dynamische Routen werden in eckigen Klammern notiert, bspw. src/routes/blog/[slug].svelte

Endpunkte I

• Endpunkte sind Module die in JS oder TypeScript geschrieben sind. *.js|ts
• Exportiert werden RequestHandler analog zu HTTP-Methoden (GET, POST, DELETE, etc.)
• Endpunkte laufen nur auf dem Server (ausser prerendering ist aktiviert, dann zum Build-Zeitpunkt).

Endpunkte II

• Stellen Daten zur Verfügung, die es nur auf dem Server gibt (bspw. Datenbank, Filesystem…).
• Seiten-Endpunkte: Heissen eine Seite und ein Endpunkt (bis auf die Extension gleich), bekommt die Seite automatisch ihre props von dem Endpunkt (per fetch oder Funktionsaufruf(SSR)).

Beispielprojekt

Beispielseite

Layouts

• Templates für Seiteninhalte, die auf allen Unterseiten vorkommen.
• Enthalten einen <slot></slot> in den dann der Inhalt gerendert wird.
• Per Konvention gilt die Datei __layout.svelte im Routing-Verzeichnis als Hauptlayout, es können über degleichen Dateien in Unterverzeichnissen auch Layouts gegenseitig eingebettet werden.
• Unterbinden lässt sich die Vererbung mit einer __layout.reset.svelte

Hooks

• Es gibt vier Hooks: handle, handleError,getSession und externalFetch.
• Mit diesen Funktionen kann das Standard-Request/-Responseverhalten von Svelte Kit angepasst werden.

Adapter

• Bevor eine App deployt werden kann, muss sie für das deployment target adaptiert werden.
• Der Standard-Adapter adapter-auto, baut passend zu Cloudflare Pages, Netlify oder Vercel.
• Mit dem adapter-node wird eine Node-App gebaut, die man in beliebgen Umgebungen laufen lassen kann.
• Mit adapter-static baut man statische Seiten, dann fungiert Svelte also als SSG.

Das ist natürlich längst nicht alles, nur alles, was ich bis jetzt ausprobieren konnte.

In der Doku findet sich natürlich noch einiges mehr an Funktionalitäten…