© ecco/Shutterstock.com
Ein Einblick in Svelte

Mehr erreichen mit weniger Code


Svelte ist der neue Stern am Web-Frontend-Himmel. Es ist rasend schnell und seine minimale Bundle Size steckt andere Frameworks locker in die Tasche. Vor allem aber ist es ausdrucksstark: Minimaler Code führt zu maximalen Ergebnissen. Performancetuning durch den User mit Hilfe von Dingen wie shouldComponentUpdate? Nicht nötig. Boilerplate-Code, um eine Komponente zu erstellen? Nicht vorhanden. Gleichzeitig ist Svelte sehr umfangreich. Ein Animationspaket und eine State-Management-Lösung sind bereits enthalten. Wie schafft Svelte das? Darauf wollen wir in diesem Artikel einen Blick werfen. Gemeinsam machen wir die ersten Schritte mit Svelte und bauen die Mutter aller Apps: eine To-do-Liste.

Svelte liegt momentan im Trend. Alle Hypemetriken zeigen steil nach oben: Innerhalb eines Jahres ging das Projekt von 10 000 auf über 30 000 GitHub Stars [1]. Im gleichen Zeitraum gab es eine Verdreifachung der npm-Installationen auf über 50 000 pro Woche [2]. Im „State of JavaScript 2019 Survey“ gaben 45 Prozent der Befragten an, sich für Svelte zu interessieren, wodurch das Framework den Prediction Award für den heißesten Newcomer einheimste [3].

Svelte ist nicht neu

Aber ist Svelte wirklich so neu? Ein Blick zurück zeigt, dass das UI Framework schon fast vier Jahre alt ist. Ende 2016 wurde die erste Version auf GitHub veröffentlicht. Der Autor ist Richard Harris [4], der zu diesem Zeitpunkt für den Guardian arbeitete und mittlerweile sein Geld bei der New York Times verdient. Sein Tagesgeschäft ist das Erstellen von interaktiven Grafiken [5] und Svelte entstand in diesem Kontext. Harris wollte ein UI Framework, das möglichst wenige Kilobytes in den Browser schaufelt – eine Nachrichtenwebseite ist auch so schon schwergewichtig genug. Zusätzlich sollte es schnell sein und flüssige Animationen ermöglichen. Zu guter Letzt sollten es auch weniger erfahrene Redaktionskollegen schnell erlernen können. Da keins der existierenden Frameworks seine Anforderungen erfüllte, entwickelte Harris Svelte. Version 1 erfüllte die ersten beiden Punkte – klein, schnell – bereits sehr gut. Doch erst mit Version 3, die im April 2019 veröffentlicht wurde, gelang auch der Durchbruch bei der Einfachheit. Svelte gewann in der Folge stark an Popularität.

Ein Blick unter die Haube

Um zu verstehen, wie es Svelte schafft, klein, schnell und so reduziert in der Syntax zu sein, muss man wissen, wie Svelte eigentlich funktioniert. Der Hauptteil der Arbeit geschieht zur Compile-Zeit, und nicht zur Laufzeit. React beispielsweise lädt eine Runtime und benötigt darüber hinaus das Virtual DOM, um lauffähig zu sein. Svelte dagegen nimmt den Entwicklercode und generiert imperativen Laufzeitcode, der nur noch eine minimale Runtime und ein paar Helfermethoden für weniger Codeduplikation enthält. Der Compiler entfernt darüber hinaus alle nicht benötigten Features aus dem Kompilat. So schafft es ein minimales Hello-World-Beispiel auf sagenhafte 2,5 Kilobyte – vor Browserkomprimierung.

Die Performance wird durch den Compiler ebenfalls optimiert. Wieder der Vergleich mit React: Facebooks UI Library führt nach jedem Update ein Diff auf das gesamten Virtual DOM aus und rendert nur das neu, was sich geändert hat. Svelte hingegen weiß schon vor Ausführung, was sich wann ändern kann. Der Compiler fügt an den entsprechenden Stellen imperative Statements ein, die die Variable der Komponente als dirty markieren. Für den nächsten Browser-Repaint wird ein Rerender eingestellt, das zusammen mit den anderen als dirty markierten Komponenten und Variablen abgearbeitet wird. Aus diesem Grund kann sich Svelte auch Performancekrücken wie shouldComponentUpdate sparen, was zugleich den Code einfacher macht.

Überhaupt: Einfachheit wird bei Svelte großgeschrieben. Der gesamte Rewrite für Version 3 zielte genau darauf ab: Mache es dem Entwickler so einfach wie möglich, Code zu schreiben und entferne jegliche unnötige Syntax. Das Ergebnis ist beeindruckend, und gerade am Anfang ist man immer wieder überrascht, was Svelte alles „automagisch“ herausfindet. Anfangs mag manche Syntax – auch aus diesem Grund – gewöhnungsbedürftig sein, doch geht das Schreiben von Svelte-Komponenten schnell in Fleisch und Blut über.

Wie sieht es nun aus, eine Anwendung in Svelte zu schreiben? Das wollen wir uns im Folgenden anhand einer To-do-App anschauen.

Codebeispiel To-do-App – erste Schritte

Beginnen wir mit der simpelsten Form der To-do-App und sparen uns zunächst Styling sowie ein (Fake-)Backend. Als Erstes legen wir eine statische Liste an (Listing 1).

Listing 1: Statische To-do-Liste

<script> let todos = ['Svelte-Artikel schreiben', 'Fame abstauben']; </script> <ul> {#each todos as todo} <li>{todo}</li> {/each} </ul>

Wie man sieht, kommt das Aussehen einer Svelte-Komponente dem einer HTML-Datei verdächtig nahe. Im script-Tag schreiben wir JavaScript-Code, darunter folgt HTML-Code mit einigen Svelte-Besonderheiten. Wann immer ein Moustache-Tag – { oder } – erscheint, betreten wir Svelte-Land. Im ersten Fall sehen wir die Verwendung einer Schleife, die mit {#each beginnt und mit {/each} schließt. Alles innerhalb der Schleife wird wiederholt gerendert. In diesem Fall ist das ein Listenelement, das den Wert der Listenelementvaria...

Neugierig geworden?

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