© Teguh Jati Prasetyo/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 Lau...

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