Was ist Svelte?

Svelte is a radical new approach to building user interfaces. […]

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

von svelte.dev

Was is Svelte?

• Node.js-basierter Compiler für Frontend-Komponenten
• Übersetzt Svelte-Komponenten (HTML+CSS+JS/TS) in Vanilla HTML+CSS+JS
  ⇨ kein Framework-Code zur Laufzeit^*
• Datenfluss über reaktive Variablen mit direkten DOM-Updates (kein VDOM etc.)

Anatomie einer Svelte-Komponente

Component.svelte:
					
					<script lang="ts">
					    // JavaScript oder TypeScript Code der Komponente
					</script>

					<style>
					    /* lokale Styles (werden vom Compiler in
					       Namespace verpackt) */
					</style>

					<!-- HTML Fragment -->
					<div>[…]</div>
					<p>[…]</p>
					[…]
				

Anatomie einer Svelte-Komponente - HTML

• Standard-HTML-Fragment mit (möglicherweise) mehreren DOM-Nodes
  ⇨ kein Root-Node, kein <React.Fragment />
• Spezielle <svelte:..>-Elemente zur Steuerung spezieller Features (Fenster-Titel etc.)
• Template-Anweisungen für Bedingungen ({#if…}), Schleifen ({#each…}), Promises ({await…}) etc.
• Zusätzlich Attribute für Event-Handling (on:event) & Data-Binding (bind:…) etc.

Anatomie einer Svelte-Komponente - CSS

• Standard-<style>-Block
• Unterstützung von LESS, SASS und anderen (via svelte-preprocess)
• Selectoren sind scoped innerhalb der Komponente
  ⇨ keine Kollision mit anderen Komponenten
  • Ausnahme: Selectoren mit global(…)

Anatomie einer Svelte-Komponente - Code

Properties

							User.svelte:
							
							<script lang="ts">
							  export let title: string;
							  export let name: { first: string, last: string };
							</script>

							
Hello {title} {first} {last}!
						

							UserComponent.svelte:
							
								<script lang="ts">
								import User from './User.svelte';
								</script>

								<User title="His Highness" name={{first: "John", last: "Doe"}} />
						

Anatomie einer Svelte-Komponente - Code

Reaktivität

					<script lang="ts">
						let clicked: boolean = false;

						$: buttonTitle = clicked ? "Click me!" : "Yeah!";
					</script>

					<button on:click={() => {clicked = true;}>
						{buttonTitle}
					</button>
				

• reaktive Variablen-Zuweisungen ⇨ Update aller abhängigen Elemente
• Blöcke mit $:-Präfix werden bei jeder Änderung verwendeter Variablen ausgeführt (vgl. React.useEffect())

Anatomie einer Svelte-Komponente - Code

Events

• Verwendung des DOM-Event-Mechanismus
  ⇨ kein globales Event-Handling wie bei React
• Standard-DOM-Events + CustomEvents mit einheitlicher Syntax: on:eventname
• Modifier für Standardaufgaben: on:event|modifier

					const dispatch = createEventDispatcher();
					[…]
					dispatch("myEvent", {some: "additional", data: 10});
				

					<MyComponent on:myEvent={ev = console.log(ev.details)} /> ;
					<form on:submit|preventDefault={submitHandler} />
				

Source/Slides

• GitHub