© 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, stat...

Exklusives Abo-Special

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang