Wieso Svelte? Ein Einstieg in das JavaScript-Framework

Inhaltsverzeichnis

In der Frontend-Welt von JavaScript erhält das Framework Svelte als neue Technik in den letzten zwei Jahren zunehmend Aufmerksamkeit. Das ist erstaunlich, weil dieser spezielle Bereich grundsätzlich ruhiger geworden ist: Angular, React und Vue haben sich als die bekanntesten Frameworks etabliert, andere sind Nischenprodukte geblieben. Svelte scheint jedoch neue Akzente setzen zu können.

2018 gestand die Studie "The State of JavaScript" Svelte ein großes Potenzial zu. In der 2019er-Ausgabe ist Svelte eine der Top-Techniken, mit der sich Entwickler beschäftigen wollen. Das ist ein guter Anlass, einen Blick auf Svelte zu werfen und herauszufinden, welche Eigenschaften von Svelte viele Personen ansprechen.

Svelte ist besonders, weil es kein klassisches Framework ist, sondern ein Compiler. Frameworks wie Angular, Vue und React stellen ihre Funktionen in Form von zusätzlichen Framework-Modulen zur Verfügung. Entwickler müssen sie zusätzlich zum Sourcecode des Projekts einbinden. Dadurch vergrößert sich die Dateigröße der Applikation enorm – auch dann, wenn die spätere Applikation einfach und klein ist. Bei Svelte ist es stattdessen das Ziel, die Dateigröße der Applikation gering zu halten. Dazu übersetzt das Framework die Komponenten mit einem Compiler in sogenanntes Vanilla-JavaScript. Das bedeutet, dass ein Ausführen des Codes ohne zusätzliche Librarys oder Module möglich ist.

Mit klassischen Frameworks müssen Entwickler Komponenten und Templates erstellen, die nur in Verbindung mit den zusätzlichen Modulen der Frameworks funktionieren. Die Module können die Komponenten und Templates verarbeiten und erstellen daraus automatisch die Benutzeroberfläche. Das jeweilige Framework nimmt Entwicklern sämtliche Arbeiten am Document Object Model (DOM) des Browsers ab. Wenn sich Daten innerhalb der Applikation ändern, die eine Änderung der angezeigten Nutzeroberfläche bewirken sollen, erkennt das Framework das automatisch und aktualisiert die angezeigten Elemente. Zum Abgleich der Daten und der Durchführung der Änderungen laufen häufig komplexe Algorithmen ab.

Svelte liegt eine andere Idee zugrunde: Beim Kompilieren der Svelte-Komponenten fügt das Framework den größten Teil der Funktionen, die zum Erstellen und Aktualisieren der Nutzeroberfläche notwendig sind, als eigene JavaScript-Funktionen in die Komponente ein. Bei Änderung der Daten müssen keine komplexen Algorithmen den DOM aktualisieren. Die Änderungen geschehen innerhalb der Komponenten direkt im DOM. Die gesamte Logik liegt darin in Form einfacher Funktionen. Ebenso wie klassische Frameworks nimmt Svelte Entwicklern die Arbeit am DOM des Browsers ab, allerdings ohne dafür die Einbindung zusätzlicher Module zu benötigen.