Interaktive Web-Applikationen werden immer häufiger mithilfe sogenannter Frontend-Frameworks entwickelt. Diese Frameworks verwenden Web-Technologien, um grafische User-Interfaces zu ermöglichen. Verschiedene Frameworks haben verschiedene Vor- und Nachteile, aber alle versuchen das Entwickeln von User-Interfaces durch unterschiedliche Features zu vereinfachen. Zum Beispiel bieten alle Frameworks eine Form von Data-Binding an, was dafür sorgt, dass das User-Interface automatisch auf Änderungen der Datengrundlage reagieren. Weitere Features, die viele Frameworks bieten, sind Komponentenmodelle. Sie ermöglichen das Entwickeln und Kombinieren von gekapselten UI Elementen.
Svelte unterscheidet sich von anderen Frontend-Frameworks wie Angular und React dadurch, dass es kein klassisches Framework ist, sondern ein Compiler. Der Compiler analysiert Svelte-Code und kann dadurch möglichst effizientes JavaScript erzeugen. Dies bietet einige technische Vorteile gegenüber den bisherigen Ansätzen (z.B. Virtual DOM), und ermöglicht eine möglichst prägnante Syntax, um UI Komponenten zu beschreiben.
Bundle-Größe und Laufzeitperformance
Bei Angular und React muss jeweils eine eigene Laufzeit für das Framework mit in den Browsern der Endbenutzer geladen werden, um z.B. Data-Binding zu ermöglichen. Dies ist bei Svelte durch den Compiler nicht notwendig. Er kann unseren Code zur Bauzeit analysieren, und weiß somit, welche Teile der App dynamisch sind. Mit Svelte können einzelne Komponenten oder gesamte Web-Applikationen in möglichst kleine JavaScript-Bundle kompiliert. Ein RealWorld App Vergleich von Bundle-Größen zeigt, dass das Svelte Bundle kleiner ist, als z.B. das von React und Angular. Kleinere JS-Bundle sorgen dafür, dass die App von Besuchern initial schneller geladen wird.
Darüber hinaus bietet Svelte eine bessere Laufzeitleistung als andere populäre Frameworks. Der Compiler erstellt aus den Quelldateien unserer Komponenten möglichst effizientes JavaScript. Der endgültige Code führt nur die benötigten DOM-Änderungen durch, um die Sicht mit veränderten Daten zu synchronisieren. Dadurch entfällt die Notwendigkeit eines ständigen Vergleichs mit einem virtuellen DOM, welches z.B. in React zum Einsatz kommt. Der krausest/js-framework-benchmark vergleicht die Leistung für DOM-Manipulationen zur Laufzeit verschiedener Frontend-Frameworks und zeigt, dass Svelte besser als z.B. Angular und React abschneidet.
Die Kompilierung unseres Quellcodes zu regulärem, imperativem JS-Code, der das DOM chirurgisch aktualisiert, bedeutet letztendlich, dass wir weniger Arbeit in den Browsern der Benutzer verrichten, was die Akkus der Geräte schont und die App besser performen lässt. Nun ist Svelte jedoch nicht mehr das einzige Framework mit diesen Vorteilen. Vue.js verwendet beispielsweise inzwischen auch (teilweise) einen Compiler, um Bundle-Größe und Leistung zu verbessern, und Solid.js schneidet sogar noch besser ab. Jedoch gibt es weitere Gründe, die Svelte für uns besonders machen.
Schlanke Syntax
Svelte verwendet im Gegensatz zu React und Solid.js kein JSX, um die Struktur der Applikation zu beschreiben. Stattdessen setzt Svelte auf eine eigene Syntax, die auf HTML basiert. Mithilfe dieser erweiterten HTML Syntax können gekapselte Komponenten in einer .svelte Datei definiert werden, was zu einfach verständlichem und Boilerplate-freiem Komponenten-Code führt.
Wie reguläres HMTL, kann Svelte-Code ebenfalls Script- und Style-Tags für JavaScript und CSS enthalten. Die Svelte-Syntax fügt nur Dinge hinzu, die benötigt werden, um dynamische Web-Interfaces zu beschreiben. Beispielsweise können Variablen im Script Tag mithilfe von geschwungenen Klammern außerhalb des Scripts reaktiv verwendet werden, und Styles werden automatisch an die Komponente gekapselt, sodass keine komplizierten CSS-Namenskonventionen benötigt werden, um Konflikte zu vermeiden.
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>
<label>
Name:
<input bind:value={name}>
</label>
<style>
h1 {
color: #F14B10;
font-family: 'Inter', sans-serif;
font-size: 2em;
}
</style>-> 🕹 Komponentencode im Browser ausprobieren
Diese Syntax erlaubt es uns, sehr prägnant zu sein. Da es sich um eine Erweiterung von HTML handelt, können wir immer noch so ziemlich alles so tun, was wir bei der klassischen Webentwicklung, ohne Frontend-Framework, gelernt haben. Entwickler, die bereits mit HTML und JavaScript Erfahrungen gesammelt haben, brauchen nicht lange, um sich in Svelte zurechtzufinden. Die allermeisten vanilla JavaScript-Bibliotheken funktionieren einfach wie gehabt und benötigen keine extra Svelte-Version. Es fühlt sich so an, als ob Svelte bewusst in den Hintergrund rückt und den Weg frei macht, um das eigentliche Problem in den Mittelpunkt zu rücken, anstelle des Frameworks selbst. Svelte macht moderne, komponentenbasierte Web UI Entwicklung einfach und sogar spaßig!
Zusätzliche Features und Community
Der Compiler bietet auch andere spezielle Funktionen wie eingebaute Barrierefreiheitstests und eine Übergangs- und Animations-API, die mit enthalten sind. Nur die Funktionen, die verwendet werden, landen im endgültigen Bundle, sodass eine Vielzahl von Funktionen in Svelte enthalten sein kann, ohne dass jeder Endnutzer die Kosten dafür tragen muss. Darüber hinaus kann der Svelte-Compiler auch verwendet werden, um Web Components zu erzeugen. So ist es möglich, Svelte auch für ein bestehendes Projekt, bzw. in Kombination mit einem anderen Frontend-Framework, zu verwenden.
Obwohl Svelte noch vergleichsweise neu ist, gibt es bereits eine aktive, organisierte und sehr hilfreiche Community. Zusätzlich belegte Svelte den ersten Platz in den Kategorien Interesse und Zufriedenheit (zusammen mit Solid.js) im Bereich Frontend-Frameworks der State of JS 2022 Umfrage, was darauf hinweisen könnte, dass dies erst der Anfang ist. Da wir davon überzeugt sind, unterstützen wir die Entwicklung von Svelte auf Open Collective.
Fazit
Mit Svelte können wir also nicht nur kleinere, schnellere Apps bauen als mit manch anderen Frameworks, sondern wir sparen auch noch den Boilerplate-Code, können uns auf unser Problem fokussieren und sind damit am Ende produktiver. Das riesige Ökosystem von z.B. React fehlt uns dabei nicht, da viele Features bereits bei Svelte mitgeliefert werden, oft Svelte spezifische Pakete nicht benötigt werden, und die Community dennoch gut aufgestellt ist, obwohl sie noch so jung ist.
Falls dieser Artikel Ihr Interesse geweckt hat, und Sie mehr über Svelte (im Vergleich zu React und Vue) lesen möchten, können wir den Artikel „Introducing Svelte, and Comparing Svelte with React and Vue“ von Josh Collinsworth empfehlen. Falls Sie noch Fragen zur Entwicklung mit Svelte in Ihrer Organisation haben, zögern Sie nicht und nehmen gerne Kontakt zu uns auf.
