Svelte [1] ist eine UI-Library / -Sprache für den Browser, ähnlich wie React und Vue.js. Die technische Umsetzung unterscheidet sich etwas und verspricht bessere Performance und Bundlegröße – ob diese als ausschlaggebendes Kriterium für die Wahl gelten sollte, muss man im Einzelfall selbst entscheiden.
Der Svelte-Compiler nimmt eine wesentlich umfangreichere Code-Transformation vor als dies beispielsweise bei JSX (React) der Fall ist. Die Syntax kann dadurch eher wie eine eigene Sprache betrachtet werden, während JSX noch als Syntax-Zucker für simple Funktionsaufrufe zu verstehen ist.
Component Beispiel
Counter.svelte
<script lang="typescript">
export let start = 1 // property
$: count = start // "reactive" state
</script>
<h1>Counter</h1>
<span>Current count: {count}</span>
<button on:click={() => { count += 1 }}>
Increment
</button>
<style lang="scss">
button { // will be namespaced as a random .class
appearance: none;
background: white;
color: black;
border: 1px solid black;
}
</style>- Mit export let definiert man Properties, die bei der Verwendung des Components von außen gesetzt werden können. Beispiel: <Counter start={5} />
- Das Statement-Label $ erlaubt es, Code zu schreiben, der automatisch Änderungen in den Abhängigkeiten des jeweiligen Blocks bemerkt und diesen neu ausführt.
Einige Vorteile:
- Etwas einfachere Regeln für "reactive" State (looking at you, useEffect dependency lists), kann allerdings dennoch verwirrend sein
- Es gibt klare Konventionen dafür wie und wo Styling untergebracht wird – nämlich direkt in der Component-Datei. Keine Diskussionen über Styled Components vs. JSS vs. CSS modules nötig.
- Native Unterstützung für Two-Way Bindings, die in React nur aufwändig über Callbacks gelöst werden können.
Pet Peeves
- Das Sonderzeichen $ hat mehrere verschiedene, nicht allzu intuitive Bedeutungen, die auch durch ein etwas ausdrucksstärkeres Keyword lösbar gewesen wären.
- Inline Code im "Template"-Bereich des Components (z.B. Event Listeners) ist immer plain JavaScript, hier können also beispielsweise keine TypeScript Type Casts verwendet werden.
- Innerhalb eines HTML-Tags sind keine Kommentare möglich – man kann also beispielsweise nicht einzelne Attribute auskommentieren.
Eindruck
Svelte wirkt modern und löst einige der Performance- und Developer-Experience-Probleme von React auf elegantem Weg. Die Library/Sprache wirkt ausgereift und verfügt über ein umfangreiches Ökosystem. Mit SvelteKit [2] gibt es zudem ein Batteries-Included Framework mit gutem offiziellen Tutorial, das einen schnellen Einstieg ermöglicht.
