Einstieg in Svelte

Von Florian Mayr am 08.02.2022

Begriff „Svelte“

Der englische Begriff „Svelte“ bedeutet so viel wie schlank, grazil, anmutig, elegant oder vornehm. So ungefähr kann man sich auch das Konzept des gleichnamigen JavaScript Compilers SvelteJS vorstellen, welchen ich hier vorstelle.

Die Idee

Vater von SvelteJS ist ein gewisser Rich Harris, welcher bei der New York Times beschäftigt ist. Er hat vor SvelteJS schon die Libraries „Reactive“, „Rollup“ und „Bublé“ programmiert. Er kritisierte an etablierten Frameworks wie React, Vue und Angular, dass diese von der Datenmenge zu groß sind, langsam im Bezug auf die Performance und dass die Kompatibilität zu anderen JavaScript Libraries nicht einwandfrei funktioniere.

Geschichte

Die Version eins wurde im Jahr 2016 veröffentlicht. Zwei Jahre später, also 2018 die Version zwei. Ab Version drei ist SvelteJS in TypeScript geschrieben – diese wurde 2019 veröffentlicht. Eine große Neuerung war die Veröffentlichung von SvelteKit im Jahr 2021. Näheres dazu folgt später, also weiterlesen zahlt sich aus 😊

Warum sollte man SvelteJS verwenden?

SvelteJS ist ein Compiler, keine Library oder Framework
Dieser Comiler erzeugt hoch optimierten JavaScript Code
Das heißt auch, dass kein Virtual DOM verwendet wird.
Laut eigenen Angaben ist SvelteJS 30% schneller als die Konkurenz.
Megacoole Animationen und Transitions, welche Out-Off-The-Box funktioniern.
Mit SvelteKit kann man Router und Store gleich mitverwenden.
SvelteNative als Möglichkeit für Mobile Anwendugen.
Und zum Schluss mein persönlicher Hauptgrund: SvelteJS ist wirklich einfach zu erlernen.

Verwendung

Es liegt nahe, dass SvelteJS von der New York Times verwendet wird, da Rich Harris dort wirkt. Aber auch andere prominente Beispiele gesellen sich zu dieser Aufzählung hinzu: Apple, Spotify, Rakuten, Bloomberg, Ikea, derStandard.at.

Die allseits beliebte Website „Stack Overflow“ kam bei einer Abstimmung ihrer User:innen, zum Thema „Most Loved Web Framework“ ebenfalls auf SvelteJS. Auch bei StateofJS ist SvelteJS auf Platz eins bei „Most Satisfaction“.

Frontend Battle

Vergleich

Svelte	React	Angular	Vue
Compiler	Library	Framework	Framework
Smallest, fast bundles	Small, fast bundles	Medium-sized, fast bundles	Small, fast bundles
Core set of features	Core set of features	Huge set of features	Medium-sized set of features
No additional improvements	Lots of additional improvements	Lots of additional improvements	Some additional improvements

Popularität

Svelte	React	Angular	Vue
Popular but small / new	Pupular and relatively mature	Popular and relatively mature	Extremely popular and relatively mature

Team oder Organisation

Svelte	React	Angular	Vue
one man show	Developed by Facebook	Developed by Google	Open-source team effort

Quelle: Max Schwarzmüller https://www.youtube.com/watch?v=DZyWNS4fVE0

Syntax

Klammern

Variablen werden mit einfachen Klammern geschrieben, also so: {dasIstMeineVariable}
Ebenfalls lässt sich innerhalb der Klammer JavaScript Code ausführen.

CSS

In SvelteJS ist automatisch das geschriebene Stylesheet scoped für das jeweilige File, oder die jeweilige Komponente.

Filename

Die Dateien haben die wunderschöne Dateiendung MyFile.svelte

Aufbau

Der Aufbau lässt sich einfach Erklären: es sollen ein Script Tag, ein Tag für alle Html Elemente, zum Beispiel Main, und ein Style Tag vorhanden sein.

Das sieht dann ca. so aus:

<script></script>

<h1>Headline</h1>
<p>Paragraph<p>

<style></style>

Syntax Beispiele

Wie kann man eine Variable mit dem Inhalt
„Hello Masterklasse Mobile“ rendern?

<script>
	let hello = 'hello masterklasse mobile';
</script>

<h1>{hello}</h1>

Wie schreibt man eine For-Schleife?

<script>
  let cats = [
    { id: 1, name: 'Garfield' },
    { id: 2, name: 'Simons Cat' },
    { id: 3, name: ‘Minki’ }
  ];
</script>

<h1>Best Cats</h1>

{#each cats as cat}
  <p>{cat.name}</p>
{/each}

Wie kann man einen Html String rendern/parsen?

<script>
	let string = `here is my <strong>Bold Text</strong>`;
</script>

<p>{@html string}</p>

Wie kann man das aktuelle Datum
in einem <p> Tag ausgeben?

<script>
</script>

<p>
{new Date()}
</p>

Wie kann man beim Click auf einen Button
eine Funktion ausführen?

<script>
	let count = 0;

	function incrementCount() {
		count += 1;
	}
</script>

<button on:click={incrementCount}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Wie kann man eine Nested Component
importieren und aufrufen?

<script>
	import Nested from './Nested.svelte';
</script>

<Nested/>

Wie kann man props an eine Component übergeben?

<script>
import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>


// Nested.svelte
<script>
	export let answer;
</script>

<p>The answer is {answer}</p>


//The anwer is 42

Wie kann man eine Computed Property benutzen?

<script>
	let count = 5;
	$: doubled = count * 2;
</script>

<p>{count} doubled is {doubled}</p>

Wie schreibt man IF Conditions?

{#if user.loggedIn}
	<p>hello!</p>
{/if}

{#if !user.loggedIn}
	<p>go to hell!</p>
{/if}

Wie schreibt man einen Else Block?

{#if user.loggedIn}
	<p>hello!</p>
{:else}
	<p>go to hell!</p>
{/if}



// A # character always indicates a block opening tag. 
// A / character always indicates a block closing tag. 
// A : character, as in {:else}, indicates a block continuation tag.

So schaut Else If aus:

{#if x > 10}
  <p>{x} is greater than 10</p>
{:else if 5 > x}
  <p>{x} is less than 5</p>
{:else}
  <p>{x} is between 5 and 10</p>
{/if}

Wie kann man Statements mit $ benutzen?

<script>
	let count = 5;
		
	$: if (count >= 10) {
	   alert(`count is dangerously high!`);
	}	
</script>

Wie kann man ‚object of properties‘ an eine Component übergeben?

<script>
	import Info from './Info.svelte';

	const pkg = {
		name: 'Florian',
		workshop: 'Svelte'
	};
</script>

<Info name={pkg.name} workshop={pkg.workshop}/>

Welche Lifecycle Events gibt es in Svelte?

onMount
onDestroy
beforeUpdate
afterUpdate
tick

Noch mehr Syntax?!

Hier eine kleine Auswahl an spezielleren Lösungen:

Await Blocks

{#await promise}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

DOM Events

<div on:mousemove={handleMousemove}>
	The mouse position is {m.x} x {m.y}
</div>

Bindings

<script>
  let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>


//__________________________

<script>
  let toggle = false;
</script>

<label>
  <input type=checkbox bind:checked={toggle}>
  Newsletter abonieren?
</label>

{#if toggle}
  <p>Ich schicke dir 1000 Mails am Tag</p>
{:else}
  <p>Bitte Bitte Bitte</p>
{/if}

Spezial Elements

<svelte:head>
  <link rel="stylesheet" href="tutorial/dark-theme.css">
  <title>das ist meine Headline {My Value}</title>
</svelte:head>

Was ist SvelteKit?

Die Eigendefinition lautet: „SvelteKit is a framework for building extremely high-performance web apps.”

Also ein Framework für einen Compiler? Ja, ganz genau! Grob gesagt verhält sich SvelteKit zu SvelteJS ähnlich wie Next zu React oder Nuxt zu VueJS.

Routing ist eingebaut, und ersetzt damit „Sapper“. Praktisch finde ich auch Folder Based Routing, welches ebenfalls dabei ist.

Ein weiterer Vorteil von SvelteKit ist Server Side Rendering, welches ebenfalls dadurch möglich ist.

Hands On! Worauf wartest du?

npm init svelte@next my-app
cd my-app 
npm install 
npm run dev

==> Localhost:3000

Fazit

Nach einigen kleinen Projekten und einer umgesetzen Firmenwebsite kann ich sagen: Ich bin noch immer begeistert.

SvelteJS ist wirklich einfach zu erlernen und auch zu verwenden. Je nach Komplexität der Webanwendung würde ich es auf jeden Fall empfehlen, sich es zumindest anzusehen.

Ein kleines Manko ist jedoch festzustellen: sucht man, in Österreich nach Stellenausschreibungen, wo das Wort Svelte vorkommt, wird man leider enttäuscht (Stand Februar 2022). Es ist schon klar, dass nicht jede Firma sobald ein neues Tool am Markt erscheint, den Gesamten Sourcecode wegschmeißt, und sofort auf das neueste Ding umsteigt – dennoch wäre es wünschenswert, wenn man zum einen von großen Firmen (Angular = Google, React = Facebook) wegkommt, und zum anderen eine unabhängige, schnelle und einfache Lösung wie SvelteJS verwendet.

Der Autor wurde übrigens nicht von SvelteJS bezahlt 😊

Im Repository findest du ein Beispiel für eine simple Webapp, welche eine Filterfunktion für eine Liste beinhaltet und natürlich eine Todo Liste welche auch auf den Store zugreift – Viel Spaß damit!

https://git.nwt.fhstp.ac.at/it201505/svelte.git

Quellen

Max Schwarzmüller: https://www.youtube.com/watch?v=DZyWNS4fVE0

Official Docs: https://svelte.dev

SvelteKit: https://kit.svelte.dev/