Svelte
Svelte
Svelte ist eine JavaScript-Bibliothek, die es Entwicklern ermöglicht, effizient und elegant Webanwendungen zu erstellen. Wie der Name schon sagt, ist Svelte schlank und effizient. Svelte unterscheidet sich grundlegend von anderen JavaScript-Frameworks wie React oder Angular.
Grundlagen
Svelte ermöglicht es, JavaScript Variablen direkt im HTML zu integrieren. In diesem Beispiel erstellen wir eine einfache "Hello World"-Komponente:
<script>
let name = 'World';
</script>
<h1>Hello {name}!</h1>
Das gleiche funktioniert auch mit Attributen. Wir könnten also zum Beispiel ein Bild mit der URL einer Variable erstellen:
<script>
let src = '/img/image.png';
</script>
<img src={src} />
Svelte ermöglicht hier noch eine kürzere Schreibweise. Da unsere Variable "src" gleich wie das Attribut "src" heisst, können wir das Element auch so darstellen:
<img {src} />
Um HTML formatiert auszugeben, verwendet man "@html". Dabei sollte man aber aufpassen, dass der auszugebende Wert vertrauenswürdig ist, da sonst XSS-Attacken möglich sind. Falls es sich zum Beispiel um Werte von Benutzern handelt, sollte man sie ausreichend validieren.
<script>
let htmlString = 'This string contains <strong>bold</strong> words';
</script>
<p>{@html htmlString}</p>
Die Ausgabe würde so aussehen: This string contains bold words
Komponenten
Ähnlich wie in Blazor kann man mit Svelte Komponenten erstellen. Dafür erstellt man eine neue Svelte-Datei und gestaltet dort seinen Komponenten:
<h1>Hello World</h1>
Nun können wir sie in der anderen Svelte-Datei importieren und anzeigen lassen:
<script>
import Nested from './Nested.svelte'
</script>
<Nested />
Parameter
Um seinem Komponenten Parameter zu geben, verwendet man das Schlüsselwort "export" vor den Variablen.
Nested.svelte
<script>
export let name = 'John Doe';
</script>
<h1>Hello {name}</h1>
App.svelte
<script>
import Nested from './Nested.svelte';
</script>
<Nested name={} />
<Nested {name} /> <!-- Kurze Schreibweise -->
Funktionen
Svelte vereinfacht einem auch das Aufrufen von Funktionen über die HTML-Elemente. In diesem Beispiel haben wir einen Button, welcher die Zahl bei jedem Klick um 1 erhöht:
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Clicked {count} times
</button>
Der Vorteil hier ist, dass Svelte automatisch das DOM aktualisiert und die neue Zahl angezeigt wird.
Reaktive Deklarationen
Manchmal hat man Variablen, welche auf anderen Variablen basieren. Svelte ermöglicht es, die Variable automatisch zu aktualisieren, wenn sich eine der Abhängigkeiten ändert. Für eine reaktive Deklaration verwendet man "$:".
<script>
let count = 0;
$: doubled = count * 2;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Clicked {count} times
</button>
<p>{count} * 2 = {doubled}</p>
Durch eine reaktive Deklaration wird der Code immer ausgeführt, wenn sich eine Variable darin ändert. Somit können wir also "count" erhöhen, wodurch "count * 2" erneut ausgeführt und in der Variable "doubled" gespeichert wird.
Fazit
Svelte ist ein spannendes Framework, das einem viele Möglichkeiten bietet und die Arbeit mit JavaScript sehr vereinfacht. Mit seiner Kompilierung zur Build-Zeit, reaktiven Deklarationen und den Komponenten, kann man mit Svelte effizient moderne Webanwendungen erstellen. Obwohl es noch relativ jung ist, gewinnt es stetig an Popularität und wird von Entwicklern auf der ganzen Welt eingesetzt. Ich kann auf jeden Fall empfehlen, es mal auszuprobieren.
Kommentare
Kommentar veröffentlichen