Svelte

Gleich und doch anders: Einführung in Svelte

2 Kommentare

Verglichen mit den letzten Jahren ist es im JavaScript-Umfeld in letzter Zeit verhältnismäßig ruhig geworden. Gerade im Frontend sind React, Angular und, mit etwas Abstand, Vue etabliert und erfreuen sich einer wachsenden Nutzerbasis. Komponentenbasierte Ansätze haben sich hier durchgesetzt und WebComponents sind weiterhin ein möglicher nächster Entwicklungsschritt, welcher aber vielmehr Fundament für die etablierten Frameworks als wirkliche Alternative sein könnte.

Svelte erfindet das Rad nicht neu, gewinnt aber immer mehr Aufmerksamkeit in der Community. Was Svelte mit den etablierten Ansätzen gemeinsam hat und wo es dann doch neue Wege geht, möchte ich in diesem Artikel beleuchten.

Was ist Svelte?

Svelte ist ein komponentenbasiertes Framework, so wie wir es von React, Angular und Vue bereits kennen, unterscheidet sich allerdings in einem wichtigen Punkt von den etablierten Platzhirschen: Diese erfordern deklarativen, State-getriebenen Code, welchen der Browser mit Techniken wie einem Virtual DOM in DOM-Operationen konvertieren muss.

Svelte versteht sich hier weniger als klassisches Framework, sondern vielmehr als Compiler, welcher den Code in hocheffizienten imperativen Code umwandelt und direkt das DOM manipuliert. Da Svelte keinen Framework-Code benötigt, produziert es kleinere Bundles, und ohne Virtual DOM im Speicher verspricht es eine bessere Performance.

Dies klingt ziemlich vielversprechend und fühlt sich in der Praxis auch schon sehr gut an. Der IDE Support ist leider noch nicht vergleichbar mit dem etablierter Frameworks, die offizielle Seite hilft hier aber gut weiter.

Ein Blick auf Svelte

Sobald die eigene IDE eingerichtet ist, kann eines der vorgefertigten Templates genutzt werden, um ein Svelte-Projekt aufzusetzen. Hierzu wird auf svelte.dev der Einsatz von degit empfohlen und einfache Projekttemplates für Rollup und webpack stehen zur Verfügung.

Mit webpack sieht das ganze so aus:

npx degit sveltejs/template-webpack svelte-app
cd svelete-app
npm install
npm run dev

Hello-World-Beispiel

Jetzt, wo wir ein laufendes Projekt haben, können wir einen Blick auf die Komponenten werfen: Diese werden in .svelte-Dateien gespeichert und sehen auf den ersten Blick den Komponenten, wie man sie aus Vue kennt, relativ ähnlich. Innerhalb eines <script>-Elements kann JavaScript-Code geschrieben werden und innerhalb eines <style>-Elements steht der zugehörige CSS Code.

Wir öffnen im Ordner src die Datei App.svelte und ändern den Inhalt folgendermaßen ab:

<script>
  const name = "world!"
</script>
 
 
<style>
  h1{
    color:blue;
  }
</style>
 
<h1>Hello {name}</h1>

Svelte wandelt diesen Code im Build-Prozess nun in JavaScript-Code um. In der Svelte REPL kann man sich diesen übrigens auch direkt ansehen und ein wenig mit Svelte rumspielen.

Um unsere Anwendung etwas spannender zu gestalten, erstellen wir eine neue Headline-Komponente, die wir über Properties steuern können:

<script>
  export let text = "A sample headline";
</script>
 
 
<style>
  h1 {
    color: purple;
  }
</style>
 
<h1>{text}</h1>

Properties werden im script-Element einfach exportiert und können dort auch mit einem Standard-Wert versehen werden.
In unserer App.svelte importieren wir nun die Headline und ergänzen sie im Code:

<script>
  import Headline from "./Headline.svelte";
  const name = "world!"
</script>
 
 
<style>
  h1{
    color:blue;
  }
</style>
 
<h1>Hello {name}</h1>

Wenn wir uns die Anwendung nun im Browser ansehen, fällt auf, dass beide Überschriften unterschiedliche Farben haben.

Svelte Appliation in the browser

Grund hierfür ist, dass jede Svelte-Komponente ihr eigenes Styling (scoped styles) hat, was es enorm einfach macht, Komponenten mit CSS zu gestalten.

Kontrollstrukturen

Kontrollstrukturen lassen sich in Svelte über die Templates realisieren. Eine if-Bedingung sieht hier beispielsweise folgendermaßen aus:

<script>
  export let level = 2;
  export let text = "Some headline"
</script>
 
{#if level===1}
<h1>{text}</h1>
{:else}
<h2>{text}</h2>
{/if}

Besonders nützlich ist bei Schleifen die Möglichkeit, einen Fallback zu definieren, falls keine Elemente ausgegeben werden können:

<script>
  export let items = ["Hello", "World"];
</script>
 
{#each items as item}
{item}
 
{:else}
 
no item provided
 
{/each}

Last but not least: Svelte erlaubt es hier auch auf asynchrone Requests zu reagieren und sowohl den Ladezustand, das Ergebnis als auch den Fehlerfall mit Hilfe der Template Syntax abzubilden:

<script>
  async function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
</script>
 
{#await timeout(2000)}
sleeping
 
{:then}
 
awake!
 
{:catch}
 
error :(
 
{/await}

Auch wenn die Template-Syntax anfangs etwas ungewohnt ist, hat sie einige sehr nützliche Features, die die Lesbarkeit des Codes verbessern.

Und mehr…

Svelte weiß auch an anderer Stelle mit nützlichen Features zu überzeugen. Es ist relativ einfach 2-way binding umzusetzen, und auch die Freunde von Animationen finden einige Möglichkeiten, hier mit Svelte schnell ein vorzeigbares Ergebnis zu erstellen. Schön ist auch die Integration von slots, wie man sie aus Vue kennt. Hier gibt es einige Möglichkeiten sehr flexible Komponenten zu erstellen. Auch anspruchsvolles State Management ist mit einer eigenen Store-Implementierung möglich. Diese ist aber sicher einen eigenen Beitrag im Blog wert.

Wer hier einen genaueren Blick auf all die Möglichkeiten werfen möchte, die Svelte mitbringt, sollte das offizielle Tutorial ausprobieren.

Neben Svelte lohnt sich auch der Blick auf Sapper (App-Framework vergleichbar mit next.js) und Svelte Native (vergleichbar mit React Native).

TypeScript-Nutzer müssen sich bei Svelte noch etwas gedulden. Die Integration ist allerdings in Arbeit und hat auch hohe Priorität.

Fazit

Svelte ist ein interessanter Ansatz, der es erlaubt Anwendungen ohne viel Boilerplate zu erstellen. Leider ist der IDE Support noch nicht vergleichbar mit den anderen Lösungen am Markt, und auch bei den verfügbaren Komponenten muss man noch Abstriche machen. Ein guter Einstiegspunkt hier ist die offizielle Svelte-Community-Seite. Svelte sieht wirklich vielversprechend aus und bekommt in letzter Zeit auch mehr und mehr Aufmerksamkeit.

Foto: Ferenc Almasi

Daniel Mies

Daniel ist als IT-Consultant seit 2015 Teil des codecentric Teams. Er ist sowohl im Backend als auch im Frontend unterwegs.

Momentan konzentriert er sich auf die Themen IoT und Industrie4.0 und unterstützt Unternehmen als Product Owner bei der Umsetzung ihrer Projekte.

Über 1.000 Abonnenten sind up to date!

Die neuesten Tipps, Tricks, Tools und Technologien. Jede Woche direkt in deine Inbox.

Kostenfrei anmelden und immer auf dem neuesten Stand bleiben!
(Keine Sorge, du kannst dich jederzeit abmelden.)

Hiermit willige ich in die Erhebung und Verarbeitung der vorstehenden Daten für das Empfangen des monatlichen Newsletters der codecentric AG per E-Mail ein. Ihre Einwilligung können Sie per E-Mail an datenschutz@codecentric.de, in der Informations-E-Mail selbst per Link oder an die im Impressum genannten Kontaktdaten jederzeit widerrufen. Von der Datenschutzerklärung der codecentric AG habe ich Kenntnis genommen und bestätige dies mit Absendung des Formulars.

Kommentare

  • Kuntergunt

    4. März 2020 von Kuntergunt

    Das Beispiel funktioniert bei mir nicht. Die Komponente wird nicht sichtbar.

    • Daniel Mies

      5. März 2020 von Daniel Mies

      Hallo, welches Beispiel funktioniert denn nicht? Gibt es in der Browser Konsole oder im Terminal einen Fehler?

Kommentieren

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.