17. Mai 2022

Svelte – gekommen um zu bleiben

Mit Svelte ist Einfaches einfach und Schweres möglich
Accso Avatar auf grauem Font

Autor:in

Simon Holthausen-Kircher

20220517_Svelte Cake Preview

Svelte ist ein aufstrebendes Web-Framework, dass sich zunehmender Beliebtheit erfreut. Es begeistert die Entwickler mit seiner Zugänglichkeit, der erfrischenden Art, Code zu schreiben, und einem kleinen und performanten Output. Hat Svelte das Zeug, zu den Großen aufzuschließen, oder wird es ein weiterer verglühender Stern am Web-Framework-Himmel? Dazu möchte ich in diesem Artikel meine Einschätzung geben.

Meine erste Begegnung mit Svelte machte ich Anfang 2020 während unseres jährlichen Accso-Hackathons. Wir hatten gerade unsere neue Niederlassung in Darmstadt bezogen, die Aufgabe war daher, sie mit netten oder hilfreichen technischen Spielereien zu verschönern. Ich beteiligte mich an einem Projekt zum Ausspielen von internen „Werbeanzeigen“ für anstehende Termine, die standortübergreifend auf Monitoren angezeigt werden können. Ich übernahm als passionierter Frontendentwickler den Web-Client, als Framework suchte ich Svelte aus. Von Svelte hatte ich die Monate zuvor immer wieder etwas gehört – Mitte 2019 kam Version 3 heraus und erzeugte mit seinem starken Fokus auf Entwicklerzufriedenheit, Zugänglichkeit und den mitgelieferten Features einen echten Hype.

Zeit also, selbst einmal zu schauen, was dahintersteckt! Am Ende des Tages gewann unser Team zwar nicht den Hackathon, der Tag hätte für mich trotzdem nicht besser laufen können – denn ich war sofort begeistert von Svelte und hatte immensen Spaß an der Entwicklung des kleinen Projekts gehabt.

20220517_Svelte Logo

Einfaches ist einfach, Schweres möglich

So erging es nicht nur mir damals, sondern davor und danach noch vielen weiteren Entwicklern. Svelte macht die einfachen Dinge einfach und die schwierigen Dinge lösbar. Verkomplizierte Lösungen und Boilerplate-Code erstickt Svelte durch seinen Ansatz im Keim. Ein einfacher Counter sieht zum Beispiel so aus:

<script>
let count = 0;
</script>

<p>The count is {count}</p>
<button on:click={() => count += 1}>Increase Count</button>

Keine Hooks wie in React, kein Klassenkontext wie in Angular – Svelte lässt jeglichen Ballast beiseite und konzentriert sich auf das Wesentliche, den eigentlichen Code. Der ist entsprechend lesbarer und angenehmer zu schreiben – ein nicht zu unterschätzender Umstand. Dieser Fokus auf die Entwicklerzufriedenheit und Zugänglichkeit ist ein großer Pluspunkt des Frameworks. Erfahrene Webentwickler werden das hervorragende Onlinetutorial an einem Nachmittag durcharbeiten und danach sofort produktiv sein, denn die Konzepte sind bekannt. Neueinsteiger freuen sich ebenfalls, denn Svelte ist durch seine reduzierte API im Wesentlichen ein Zusammenschluss aus HTML, JavaScript (oder TypeScript), und CSS (oder Less, SCSS, etc). Die Dynamik im HTML wird durch eine erweiterte Syntax eingefügt – auch sie ist schnell und einfach zu erlernen. Gleichzeitig ist Svelte klein und schnell, Performanceoptimierung ist somit nicht nötig.

Diese Kombination aus guten Eigenschaften ist mit der Zeit immer mehr Entwicklern und Teams aufgefallen. Seit Version 3 ist die Popularität stark gestiegen und wächst stetig weiter. Die npm-Downloads haben sich im letzten Jahr mehr als verdoppelt und gehen auf die 300.000 pro Woche zu. Die GitHub-Stars sind ähnlich stark angestiegen, genauso wie die Anzahl gestellter Fragen auf StackOverflow. Neue Third-Party-Libraries schießen mittlerweile wie Pilze aus dem Boden, und immer mehr Software-As-A-Service-Anbieter bieten Integrationen an. All das sind Indikatoren, dass Svelte auf einem sehr guten Weg ist und zu den anderen großen drei Frameworks – Angular, React, Vue – aufschließen kann.


Rosige Zukunft

Dass Svelte aktiv weiterentwickelt wird, dafür sorgt ein stetig wachsendes Team an Maintainern. Einige tun dies in ihrer Freizeit, andere nutzen Svelte bei ihrer täglichen Arbeit und bekommen daher auch Freiräume, Bugs zu beheben oder neue Features einzubauen. Spenden an Sveltes Open Collective-Account ermöglichen es, Entwickler stellenweise auch dafür zu bezahlen. Ende 2021 wurde darüber hinaus Rich Harris, der Erfinder von Svelte, von Vercel eingestellt, um in Vollzeit am Framework zu arbeiten – genug Argumente auch für Manager also, Svelte eine Chance zu geben.

Als weiteres heißes Eisen hat das Svelte-Team sein Metaframework namens SvelteKit im Feuer. Svelte (ohne SvelteKit) muss, ähnlich wie React oder Vue, zunächst noch mit Third-Party-Libraries – wie etwa einem Router – verbunden werden und schließlich mit einem Bundler gebaut werden, um auch in größeren Projekten zum Einsatz zu kommen. SvelteKit liefert diese Funktionalität gleich mit und möchte so einen noch schnelleren Start und bessere Entwicklungserfahrung bieten. Das Framework ist darüber hinaus extrem vielfältig. Eine öffentliche Webseite entwickeln, die SEO-optimiert werden kann und es erlaubt, einzelne oder alle Seiten vorzurendern? Kein Problem! Eine interne Business-App implementieren, die als klassiche Single-Page-Applikation konzipiert ist? Genauso einfach! Gleichzeitig ist es durch das Adapter-Konzept möglich, die Applikation auf unterschiedlichen Hosting-Providern wie Vercel, Netlify oder dem eigenen simplen Static-File-Server auszuliefern.

Sveltekit verspricht das Beste aus Svelte konsequent zu erweitern

Man sieht also: Die Zukunft von Svelte ist rosig. Alle Indikatoren sagen eine Zunahme von Popularität und Nutzung voraus, und als Entwickler freue ich mich, mit einem solchen Framework im Frontend zu arbeiten. Ich persönlich bin so davon überzeugt, dass ich mittlerweile Teil des Maintainer-Teams bin und mich unter anderem um die Entwicklung der Visual Studio Code-Extension kümmere. Wer noch skeptisch ist, dem sei das Tutorial ( https://svelte.dev/tutorial/basics) ans Herz gelegt, um danach eine kleine App mit Svelte zu entwickeln – man muss es selbst erleben, um den Unterschied zu erkennen. Vielleicht sehen Sie es danach wie ich: Svelte ist gekommen, um zu bleiben.