Sahara Frost | shutterstock.com

Wenn es um Code geht, ist weniger mehr. Insbesondere wenn Sie mit KI-Assistenten arbeiten, wissen Sie das: Die Tools spucken gerne Code in rauen Mengen aus, obwohl ihre Benutzer eigentlich eine starke Fokussierung anstreben, die den jeweiligen Kontext berücksichtigt. Das quelloffene JavaScript-Framework Svelte folgt hingegen dem eingangs genannten Prinzip. Das resultiert in einer geringeren mentalen Belastung der Entwickler, auch weil die Systeme leichter zu warten sind. Darüber hinaus ist Svelte aber auch schnell, voll ausgestattet und kann mit einer starken Community überzeugen.

Und: Das durch Svelte eingeführte Konzept, einen Compiler zu nutzen, um spezielle Syntax zu optimieren und in Frontend-Komponenten umzuwandeln, hat sich inzwischen bei einer Vielzahl weiterer Frameworks durchgesetzt – unter anderem React. Allerdings sendet etwa React den Komponenten-Code an den Browser um ihn auszuführen. Svelte hingegen wandelt diesen in direkte DOM-Manipulationsoperationen, die dann im Browser ausgeführt werden. Das Team hinter dem Open-Source-Framework hat zudem SvelteKit entwickelt, das einen festgelegten Pfad bereitstellt, um Applikationen auf Svelte-Basis zu erstellen und zu managen. Das kann es erheblich vereinfachen, die serverseitigen Elemente einer realen Anwendung zu händeln.

Der wesentliche Vorteil von Svelte liegt jedoch in seiner übersichtlichen Syntax, wie dieses Tutorial demonstriert. Den zugehörigen Code können Sie über GitHub herunterladen.

Svelte Build einrichten

Einen Compiler zu verwenden, erfordert einen Build für Ihr Projekt. Um eine simple Build-Umgebung mit Svelte einzurichten, füttern Sie Ihre Kommandozeile mit dem Befehl:

$ npx sv create

Das startet einen interaktiven Creator. Dieser demonstriert direkt die Leistungsfähigkeit von SvelteKit, das unter anderem Support für TypeScript und Vanilla JavaScript (das wir für dieses Tutorial verwenden) bietet und es auch ermöglicht, Test-Frameworks einzubinden. Für diesen Artikel setzen wir auf eine minimalistische Konfiguration, um den Fokus auf Svelte zu setzen.

Sobald alles bereits ist, starten Sie das Projekt im Dev-Modus mit dem Befehl $ npm run dev -- --open. Nun können Sie die Basis-Seite unter localhost:5173 aufrufen.

Dateibasiertes Page-Routing

Svelte nutzt standardmäßig dateibasiertes Routing, ähnlich wie Next.js. In unserem Fall wird die Hauptseite über folgenden Pfad bereitgestellt:

src/routes/+page.svelte

Im Gegensatz zu Next hängt Svelte ein + an den Seitennamen an. Dadurch wird deutlich, dass es sich um eine aktives Route File handelt und nicht um eine Utility- oder Komponentendatei. Um die Seite zu befüllen, wollen wir in diesem Artikel mit Svelte und einem In-Memory-Array eine simple Liste besonders seltsamer und denkwürdiger Filme erstellen. Dazu fügen wir folgenden Code in +page.svelte ein:

  
Weird Movie List

  

    {#each mindBendingMovies as movie (movie.id)}
      

        
{movie.title}
        
Directed by {movie.director} ({movie.year})
        

          {#each movie.themes as theme}
            {theme}
          {/each}
        
      
    {/each}
  

Das Erste, was an dieser Seite auffällt, ist ihr minimalistischer Aufbau. Die drei Abschnitte Script, Style und Markup repräsentieren jeweils essenzielle Aspekte der Benutzeroberfläche. Diese Elemente bestimmen über das Verhalten der Seite, die zu einer Svelte-Komponente wird. Und so sieht unsere Seite momentan aus:

Matthew Tyson

Das einzige Skript, das wir momentan benötigen, ist die Definition des mindBendingMovies-Arrays. Wir durchlaufen das Array im Markup in einem Loop: {#each mindBendingMovies as movie (movie.id)}. Die relevanten Inhalte werden mithilfe der exponierten Iterator-Variablen movie dargestellt.

Template Expressions

Wann immer Sie in Svelte geschweifte Klammern sehen, handelt es sich um eine Template Expression. Mit dieser Syntax können Sie sowohl auf JavaScript-Variablen und -Funktionen zugreifen, die im Skriptabschnitt deklariert sind, als auch auf die optimierte JavaScript-ähnliche Syntax von Svelte (siehe #each-Loop).

Dabei dient movie.id als “Key”. Auch wenn Sie explizit keinen Schlüssel verwenden, ist es ratsam, einen anzugeben (nicht den Array-Index), damit Svelte Aktualisierungen der Listenanzeige intelligent verwalten kann. In jedem Block Key Expressions zu verwenden, ist bei sämtlichen Reactive-Bibliotheken üblich.

Sämtliche Markups werden innerhalb des #each-Blocks bei jeder Loop-Iteration aufgerufen. Diese Syntax ist sehr übersichtlich: Es wird keine map-Funktion verwendet und auch keine anonyme Funktion übergeben. Die Einrückung macht dabei Sinn und ist klar verständlich. Der innere Loop bei movie.themes ist ebenso selbsterklärend und schafft keine unnötige Unordnung in unseren Templates.

Reactive Sorting mit Svelte

Nehmen wir nun an, wir möchten Benutzern ermöglichen, unsere Liste dynamisch nach dem “Seltsamkeitsfaktor” der einzelnen Filme zu sortieren. Mit Svelte ist das ganz einfach. Zunächst fügen wir jedem Filmeintrag einen weirdnessFactor hinzu. Dann benötigen wir eine sortOrder-Eigenschaft und eine sortMovies-Funktion:

Zu beachten ist dabei, dass mindBendingMovies dem neu sortierten Array neu zugewiesen werden muss (anstatt es inline zu sortieren). Der Grund: Svelte achtet lediglich auf Änderungen an den Top-Level-Referenzen, nicht jedoch an den internen Elementen des Arrays.

Ein wichtiges Element das unser Template noch braucht, ist eine Schaltfläche, um die sortOrder-Variable umzuschalten:

      Sort by Weirdness ({sortOrder === 'asc' ? 'Descending' : 'Ascending'})
    

On:click ist die Svelte-Syntax für einen Button-Click-Handler und ruft die Funktion sortMovies auf, die wir gerade gesehen haben. Wir verwenden außerdem sortOrder innerhalb einer Template Expression und eines ternären Operators, um eine Meldung anzuzeigen, die den Toggle State angibt.

Zusätzlich fügen wir einen Output für das Weirdness Rating jeden Films hinzu:

Weirdness Factor: {movie.weirdnessFactor} / 10

Auch das Styling können wir jetzt aktualisieren, um (in etwa) folgendes Ergebnis zu erhalten:

Matthew Tyson

Reactive Filtering mit Svelte

Filtering gibt uns die Möglichkeit, zwei weitere Svelte-Funktionen kennenzulernen:

• Two-Way Binding und
• Derived Reactivity.

Two-Way Binding

Mit Two-Way-Binding lassen sich Input-Komponenten an eine Variable binden. Im Fall einer Änderung werden so beide aktualisiert. Das können wir nutzen, um einen Filter Term zu akzeptieren. Zunächst fügen wir jedoch die eigentliche Input-Komponente zum Template hinzu:

let searchTerm = '';

Das können wir jetzt an einem Input binden:

Die Eigenschaft bind:value übernimmt hierbei die bidirektionale Synchronisation: Was auch immer mit searchTerm und seinem Input geschieht, wird synchronisiert.

Derived Reactivity

Nun benötigen wir eine Möglichkeit, unsere Liste zu modifizieren:

$: filteredMovies = mindBendingMovies.filter(movie => {
    const lowerSearchTerm = searchTerm.toLowerCase();
    return movie.title.toLowerCase().includes(lowerSearchTerm) ||
           movie.director.toLowerCase().includes(lowerSearchTerm) ||
           movie.themes.some(theme => theme.toLowerCase().includes(lowerSearchTerm));
  });

Diese Funktion verwendet den Standardoperator filter, um alle Filme zu entfernen, deren Inhalt nicht auf den searchTerm passt. Die Art und Weise, wie sie mit der $-Syntax (eine “reaktive Deklaration”) deklariert wird, ist jedoch speziell für Svelte. Das gewährleistet, dass die Engine die Reactive-Variable bei jeder Änderung einer abhängigen Variablen aktualisiert, indem sie die Funktion ausführt.

In diesem Beispiel hängt filteredMovies von searchTerm ab, sodass die Funktion bei jeder Änderung ausgeführt wird und filteredMovies den neuen Wert erhält. Die filteredMovies-Variable hängt aber auch von mindBendingMovies ab, sodass jede Änderung daran ebenfalls zu einer Aktualisierung führt.

Nun müssen wir nur noch dafür sorgen, dass die Anzeige vom gefilterten Wert abhängig ist:

{#each filteredMovies as movie (movie.id)}

Jetzt können wir an einem Filterfeld arbeiten, das die Liste aktualisiert, während der Benutzer tippt:

Matthew Tyson

Die Sortierung funktioniert weiterhin und wir müssen nichts am Sortier-Code ändern. Das liegt daran, dass die reaktive Deklaration von filterMovies mindBendingMovies verwendet. Wird die Sortierfunktion verändert, wird auch filteredMovies automatisch aktualisiert.

Das ausgeklügelte Filtering von Svelte bietet uns genau das, was wir mit Reactive Code anstreben: Ausdrucksstärke und minimaler Impact auf die anderen Teile der Anwendung.

Async mit Svelte

Last, but not least wollen wir uns nun noch ein weiteres Deature von Svelte ansehen, nämlich #await. Damit lassen sich asynchrone Operationen auslösen und die Anzeige entsprechend aktualisieren – bei minimalem Aufwand.

Angenommen, die Benutzer der Seite sollten einen Film anklicken können, um dessen Details abzurufen und sie dann in ein neues Fenster zu laden. Dazu greifen wir in unserem Beispiel auf “The Open Movie Database” und deren OMDb-API zurück (dazu ist ein kostenloser Key nötig). Unser Fenster könnte folgendermaßen aussehen:

{#await selectedMovieDetailsPromise}
          
Loading details...
        {:then details}
          {#if details.Response === 'True'}
            
Plot: {details.Plot}
            
Genre: {details.Genre}
            
Runtime: {details.Runtime}
            
Awards: {details.Awards}
            
IMDb Rating: {details.imdbRating}
            {#if details.Poster && details.Poster !== 'N/A'}
              
            {/if}
          {:else}
            
No details found for "{selectedMovieTitle}".
          {/if}
        {:catch error}
          
Error fetching details: {error.message}
 {/await}

Wie Sie sehen, ist es möglich, mit #await ein Promise zu spezifizieren. Wird dieses aufgelöst, werden die Ergebnisse angezeigt – anderenfalls folgt eine Fehlermeldung. Das Promise:

async function fetchOmdbDetails(title) {
    const encodedTitle = encodeURIComponent(title);
    const url = `https://www.omdbapi.com/?t=${encodedTitle}&apikey=${OMDB_API_KEY}`;
    const res = await fetch(url);
    const data = await res.json();
    if (data.Response === 'True') {
      return data; // This will be the resolved value for {#await}
    } else {
      throw new Error(data.Error || 'Could not fetch movie details.'); // This will be the error for {:catch}
    }
  }

Der #await-Block verarbeitet das Promise, das von der async-Funktion zurückgegeben wird, automatisch. Diese Funktion verwendet den Filmtitel als 't'-Argument für die API. Der folgende Screenshot zeigt die Filmdaten, die nun wie gewünscht im Browser-Fenster angezeigt werden:

(fm)

Sie wollen weitere interessante Beiträge zu diversen Themen aus der IT-Welt lesen? Unsere kostenlosen Newsletter liefern Ihnen alles, was IT-Profis wissen sollten – direkt in Ihre Inbox!