Es ist ein Kompiler!!

Als ich zum ersten Mal von Svelte gehört habe, war ich auf der Suche nach einem leichtgewichtigen Webframework, mit dem ich eine simple persönliche Website in mehrere kleine Komponenten teilen kann. Komponenten sind immer schön, weil sie mir helfen, eine Website zu strukturieren und wartbar zu halten. Ich wollte React aufgrund seines Footprints nicht nutzen, obwohl ich es immer noch für eines der besten Frameworks halte. Aber will ich wirklich ein vollumfängliches Framework mit über 30KB an Größe auf meiner Website haben, die lediglich ein, zwei Bilder und eine Handvoll Links zu meinen sozialen Profilen besitzt? Über 30KB bevor ich überhaupt eine einzige Zeile Code geschrieben habe?

Natürlich nicht. Und zum Glück bin ich bei meinen Nachforschungen auf Svelte gestoßen, welches eine Hello-World-Webapp mit 3.2KB erzeugen kann.

Wer zu faul zum Lesen ist und/oder einen tieferen Einblick in Svelte wünscht, kann hier meinen Vortrag im Rahmen unserer Senacor StreamedCon anschauen.

Als ich das erste Mal über Svelte gelesen habe, klang das Ganze wie jedes andere Single-Page-Applikation-Framework auch. Obwohl Svelte immer betont, dass es ein Kompiler ist, konnte ich zu dem Zeitpunkt nicht das volle Ausmaß dieser Tatsache begreifen. Nach mehr als einem halben Jahr und ein paar kleine private Projekte später, habe ich Svelte lieben gelernt.

Es ist für alle generell schwer, aus gewohnten Mustern auszubrechen. Svelte hat es geschafft, aus diesen mentalen Schranken herauszukommen, was ein langer und harter Weg war. Sogar Rich Harris, der Mensch hinter Svelte, muss sich manchmal selbst daran erinnern, nicht in diese Muster zu fallen.

Während andere Frameworks wie React, Vue, {füge hier andere Frameworks ein} ihr Produkt mit den bekannten Grenzen von JavaScript und deren Ökosystem bauen und innerhalb dieser Grenzen optimieren, nutzt Svelte JavaScript nur um einen Kompiler zu bauen und hat damit effektiv eine neue Programmiersprache erschaffen (manche nennen es SvelteScript). Dieser Ansatz hat natürlich auch Grenzen und Nachteile, ermöglicht aber im Gegensatz zu anderen Frameworks folgende Vorteile:

Weil es ein Kompiler ist, sieht eine vollständige Komponente wie folgt aus:

<script>
  let count = 0;
</script>
<p>You clicked {count} times</p>
<button on:click={() => count += 1} >
  Click me
</button>

Ja, diese Komponente ist wirklich vollständig und funktionsfähig. Kein Boilerplatecode, nur um JavaScript oder das Framework zu befriedigen. Keine explizite, funktionale Komponentendeklaration notwendig; keine exports für die Komponente notwendig; keine useHook-Syntax, kein JSX notwendig und HTML als primäre Entität. Das einzige, was stehen bleibt, ist meine tatsächliche fachliche Logik.

Weil es ein Kompiler ist, kann ein üblicher Fall wie das Anzeigen eines Ladebalkens während einer asynchronen Anfrage wie folgt implementiert werden:

<script>
  import Loading from './Loading.svelte';
  const getQuote = async () => {
    let url = '[...]/quotes/random';
    const res = await fetch(url);
    return await res.json();
  };
  let promise = getQuote();
</script>
{#await promise}
  <Loading />
{:then quote}
  <!-- -->
{:catch error}
  <!-- -->
{/await}

Ich brauche keine Lade-Variable, ich muss nicht auf undefined-Werte prüfen (was in einem sehr strengen Sinne übrigens sogar falsch ist), weil der Kompiler mir den Code dafür herausgeneriert und sich damit um alles Notwendige kümmert.

Weil es ein Kompiler ist, kann reaktiver Code sehr präzise ausgedrückt werden. Die Implementierung, um eine Funktion bei jeder Änderung einer Variable aufzurufen, sieht wie folgt aus:

<script>
  import { executeSomething } from './coolFunctions.js'
  let param = 0;
  $: executeSomething(param)
</script>
<input type="number" bind:value={param} />

executeSomething() wird nun jedesmal ausgeführt, wenn param sich über das Input-Feld ändert.

Meine Reise mit Svelte begann, weil ich nach einem leichtgewichtigen Framework gesucht habe. Gefunden habe ich ein Framework, welches so viel mehr ist. Ich erreiche gleiches Verhalten mit weniger Code im Vergleich zu den Alternativen auf dem Markt. Wer Svelte noch nicht kennt, sollte sich in einer ruhigen Minute wirklich einmal intensiv damit auseinandersetzen!