© Viktoria Kurpas/Shutterstock.com
Wie man schon heute Svelte produktiv aufsetzen und nutzen kann

Svelte in Produktion


Wieder etwas Neues aus der JavaScript-Welt, und natürlich soll es direkt die produktive Anwendung ersetzen. Wahrscheinlich funktioniert ein solcher Umbau aber in den wenigsten Projekten mal eben so. Svelte bietet einen eleganten Mittelweg: Es kann in Produktion eingesetzt werden, ohne dass alles Bestehende gleich neu entwickelt werden muss.

Svelte [1] wurde vor etwa drei Jahren von Rich Harris veröffentlicht und ist für JavaScript-Verhältnisse schon ein „alter Hase“, jedenfalls gewiss keine neue Technologie. Gefühlt hat es aber erst in diesem Jahr mit der Version 3 seinen Durchbruch feiern können. Gründe gibt es hierfür einige:

  • Svelte bietet Komponenten, die ressourcensparend und performant sind.

  • Es setzt auf etablierten Standards: HTML, CSS und JavaScript.

Wer sich noch nicht mit Svelte beschäftigt hat und eine kurze Einführung sucht, findet ein von mir verfasstes Tutorial unter [2].

Für Teams stellt sich womöglich die Frage, wie sie Svelte schon jetzt produktiv einsetzen können. So können Stärken und Schwächen evaluiert und tiefergehende Erfahrungen aufgebaut werden. Später ist dann der vollständige Wechsel denkbar. In diesem Artikel möchte ich daher zeigen, wie ein Svelte-Projekt aufgesetzt werden kann und wie wir es dann über Web Components (siehe Kasten: „Web Components“) in eine bestehende Anwendung integrieren können.

Web Components

Web Components ist ein Sammelbegriff für drei Technologien, die es Entwicklern ermöglichen, eigene HTML-Elemente zu erstellen. Zu ihnen zählen

  • Custom Elements: JavaScript APIs, die es ermöglichen, eigene Elemente zu erstellen.

  • Shadow DOM: JavaScript APIs, die die Erzeugung eines „Shadow DOMs“ ermöglichen. Dabei handelt es sich um ein zusätzliches DOM (Document Object Model), wodurch es möglich ist, Verhalten und Styling privat zu definieren und eine Kollision mit dem restlichen DOM zu vermeiden.

  • HTML-Templates: Die HTML-Elemente <template> und <slot> können genutzt werden, um HTML-Vorlagen zu erstellen, die nicht direkt gerendert werden, aber beispielsweise als Vorlage für Custom Elements dienen können.

Svelte

Svelte ist kein weiteres Komponenten-Framework, das sich lediglich durch eine alternative Denkweise oder Technologien von der Konkurrenz abhebt, sondern ein Compiler. Wer jetzt den Vergleich mit anderen Compilern wie elm [3] sucht, wird Svelte ebenfalls nicht ganz gerecht: Die zum Einsatz kommenden Sprachen sollten bereits bestens bekannt sein, da es sich um HTML, CSS und JavaScript handelt.

Der Ansatz, statt einer Runtime einen Compiler einzusetzen, bringt Entwicklern unter anderem die beiden folgenden Vorteile:

  1. Svelte ist wirklich reaktiv. Änderungen werden nicht über ein virtuelles DOM berechnet, das im Anschluss das echte DOM aktualisiert. Stattdessen interagieren Svelte-Komponenten direkt mit dem DOM.

  2. Die Magie, die bei den anderen Frameworks und Bibliotheken über eine Runtime abgewickelt wird, ist bei Svelte nicht notwendig. Svelte kommt komplett ohne eigene Runtime aus und braucht daher auch weniger Ressourcen.

Für Entwickler wird Svelte auch dadurch attraktiv, dass es möglich ist, den in Svelte genutzten Technologiestack an die eigenen Bedürfnisse anzupassen. So kann man bei Bedarf HTML durch Pug [4], CSS durch SASS [5] und, seit Juli 2020, auch JavaScript durch TypeScript [6] ersetzen.

Svelte in bestehende Projekte integrieren

Die Integration einer neuen Technologie wie Svelte in ein bestehendes Frontend sollte möglichst wenige Änderungen am bestehenden Projekt-Set-up erfordern. Daher lassen wir den Build-Prozess unverändert und binden die Komponenten als Dependency in das Projekt ein. Somit ist es später auch einfacher, die Änderungen rückgängig zu machen. Unsere Svelte-Komponenten können wir dann in Form von Web Components in den Code integrieren. Das stellt sicher, dass wir auch bei der Integration nur wenige Dinge beachten müssen.

Die Möglichkeit, Web Components zu erzeugen, kennen wir schon von Angular [7], React [8] oder Vue [9]. Bei diesen sorgt die integrierte Runtime allerdings für vergleichsweise schwergewichtige Komponenten. Da Svelte ohne eigene Runtime auskommt, sind auch die erzeugten Web Components kleiner und ressourcensparender. Wenn wir die Bundle-Größe und die Performance betrachten, schlagen Web Components, die mit Svelte erstellt wurden, die Alternative der großen Frameworks deutlich [10]. Zudem setzen wir bei Web Components auf einen etablierten Webstandard, der von (fast) allen Browsern unterstützt wird [11] und bei Bedarf über ein Polyfill [12] nachgerüstet werden kann.

Egal, ob ein Team auf diesem Weg eine Migration auf Svelte durchführen oder eine gemeinsame Komponentenbibliothek entwickeln möchte, die in mehreren Anwendungen Verwendung finden kann: Svelte erlaubt eine einfache Integration in das bereits bestehende Frontend.

Eine Pattern-Library in Svelte

Da es in diesem Artikel primär um die Integration von Svelte in ein Projekt geht und weniger um Features, die Svelte mitbringt, zeigen wir die Integration am Beispiel einer Pattern-Library. Da Svelte-Komponenten primär auf HTML, CSS und JavaScript basieren, sind Komponenten schnell erstellt. Ein weiteres Argument für Svelte ist die sehr gute Unterstützung für Animationen, die es direkt von Haus aus mitbringt [13]. Teil der hier entwickelten Pattern-Library sind:

  • die Integration von Sass und TypeScript, um mit einer modernen Entwicklungsumgebung arbeiten zu können

  • ein Test-Set-up mit testing-library [14] um die neuen Komponenten auch testen zu können

  • eine Storybook-Integration [15], um die Komponenten ansprechend zu dokumentieren

  • die Veröffentlichung der Pattern-Library mit Hilfe von npm, damit sie von anderen Teams über npm installiert und genutzt werden kann, ohne dass hierfür eine größere Anpassung am jeweiligen Build-Prozess notwendig ist.

Am Ende integrieren wir die erstellte Pattern-Library in eine mit Create React App [16] erstellte React-Anwendung. Dies verläuft bei Angular, Vue und Co. grundsätzlich ähnlich.

Projekt-Set-up

Grundlage für unsere Pattern Library ist ein Svelte-Projekt. Dieses setzen wir im Folgenden mit Rollup [17] als Module Bundler auf, da die meisten Beispiele mit Svelte ebenfalls auf Rollup setzen. Die Nutzung von webpack ist aber ebenso möglich und verläuft analog.

Rich Harris, der Schöpfer von Svelte und Rollup, hat mit degit [18] ein weiteres Tool geschaffen, das jetzt zum Einsatz kommt. Mit degit kann eine Kopie eines Git Repository angelegt und heruntergeladen werden. Wir nutzen es, um eine Vorlage für Svelte-Komponenten [19] als Grundlage des Projekts zu bekommen. Im Anschluss lassen wir alle Abhängigkeiten mit dem Package Manager unserer Wahl (in diesem Artikel npm) installieren:

npx degit sveltejs/component-template em-pattern-library cd em-pattern-library npm install

Beispielkomponente

Als Beispielkomponente erstellen wir einen Button, der einen Titel hat und ein Event customOnClick auslöst, wenn er angeklickt wird (Listing 1).

Listing 1

<script> import { createEventDispatcher } from 'svelte';  // der von außen mitgegebene title export let title: String = "";  // Event handling const dispatch = createEventDispatcher(); function dispatchClick(event) { dispatch("customOnClick", {text:"some custom text"}); } </script> <style> button { background-color: rgba(0, 125, 141, 0.75); color: #efefef; padding: 0.5rem 1rem; border: 0; border-radius: 4px; box-shadow: 1px 1px 2px 1px #ccc; &:hover { background-color: rgba(0, 125, 141, 1); } } </style> <button on:click={dispatchClick}>{title}</button>

Das Event, das wir in der Komponente auslösen (customOnClick), spielt später im Artikel noch eine Rolle. Die Datei speichern wir unter src/Button.svelte. Bevor der Button für andere Projekte als Web Component zur Verfügung gestellt wird, passen wir noch das Set-up an, um statt JavaScript...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang