Svelte – das schlanke Framework für schnelle mobile Webanwendungen

Lange Zeit war JavaScript für das Erstellen ansprechender Webinhalte unverzichtbar. Dazu mussten Webentwickler aber zunächst die Programmiersprache beherrschen, wofür nicht jeder Zeit und Lust aufbringen konnte. Doch gibt es sogenannte Frameworks, die Entwicklern einen Rahmen vorgeben, in dem auch komplizierte JavaScript-Funktionen automatisiert ausgeführt werden können. Das vermindert den Programmieraufwand erheblich. Im Gegenzug lasten die meisten Frameworks allerdings den Browser stark aus. Hier ist Svelte ein grundlegend neuer Ansatz.

Auch bei Svelte (oder: SvelteJS) handelt es sich um ein Framework zur Entwicklung von JavaScript-Apps. Als solches liefert es das Grundgerüst für die spätere Anwendung und wichtige, immer wiederkehrende Funktionen in Form von automatisch eingebundenen Bibliotheken. Innerhalb eines vorgegebenen Rahmens legt das Framework die grundsätzlichen Möglichkeiten fest und bestimmt auch wesentlich den Entwicklungsprozess. Die bei der Programmierung von Webanwendungen zum Einsatz kommenden Frameworks sind nach kurzer Einarbeitung komfortabel zu bedienen.

Svelte ist ein ideales Tool zum Realisieren schneller Webanwendungen und ähnelt in der Grundidee anderen Javascript-Frameworks wie Angular, Vue, Ractive oder React. Genau wie diese basiert Svelte auf JavaScript und ermöglicht die Gestaltung interaktiver Benutzeroberflächen. Der generierte Code ist jedoch deutlich schlanker als bei den traditionellen Frameworks.

Die grundlegende Neuerung von Svelte liegt darin, einen komplexen Framework-Code in optimiertes, einfaches JavaScript konvertieren zu können. Die meisten bisherigen Frameworks, wie beispielsweise JHipster überließen es dem Browser, die App in JavaScript zu interpretieren und darzustellen. Dies hat eine verlangsamte Darstellung zur Folge. Svelte hingegen kompiliert die App schon bei der Entwicklung in ein schlankes, optimiertes JavaScript. Ein Ziel bei der Entwicklung von Svelte war es auch, dem Webentwickler selbst die Möglichkeit zu geben, möglichst schlanken, intelligenten Code zu schreiben, ohne durch das Framework allzu viel Ballast mitschleppen zu müssen.

Das Problem herkömmlicher Frameworks ist immer dasselbe: Statt einen JavaScript-Code zu vereinfachen, um ihn im Browser performant darstellbar zu machen, erweitern sie den Code und lassen alle Funktionen des Frameworks – oft auch nicht genutzte – von JavaScript interpretieren. Dadurch blähen sich auch vergleichsweise kleine Applikationen bei einem traditionellen Framework zu großen Scripts auf, deren Ausführung Rechenzeit und Datenvolumen kostet. Kurz: Frameworks helfen dabei, die Gedanken zu strukturieren – aber nicht den Code. Das Problem ist oft, dass die Framework-Entwickler auf die Ausführung im Browser fokussiert sind und die Verwendung des reinen „Vanilla“-JavaScripts vernachlässigen. Dies ist der wesentliche Unterschied von Svelte. Bis auf einige wenige Grundbefehle, die sehr schnell zu erlernen sind, verwendet Svelte reines HTML, CSS und JavaScript.

Während des Erstellungsprozesses werden Komponenten der App zu eigenständigen JavaScript-Modulen kompiliert. In einem Vorschaufenster kann der Programmierer die Stabilität und die Ausführung seines kompilierten Programms jederzeit überprüfen. Der Vorteil dieses Verfahrens: Das finale Script wird extrem schlank und schnell. Bei Svelte bleibt das kaum beeinflussbare Aufblähen eines Scripts in traditionellen Frameworks aus. Das Ergebnis ist eine bis zu 10-mal schnellere Performance, verglichen beispielsweise mit dem bislang sehr beliebten Framework REACT.

Svelte für JS (JavaScript) besteht aus mehreren Komponenten. Der besondere Charme liegt darin, dass sich der Webentwickler kaum um die lästigen und fehleranfälligen CSS-Komponenten kümmern muss. Es genügt, einfache HTML- oder XML-Tags zu definieren und diese von SvelteJS interpretieren zu lassen. SvelteJS erstellt daraus selbst die Komponenten der App. Der HTML-Code wird in ein sogenanntes REPL-Eingabefenster (Read-eval-print loop) im Browser geschrieben. Die JavaScript-Interpretation erfolgt umgehend und automatisch. Dabei kann die Stabilität des Codes sofort getestet werden.

Mit seinem einfachen und sehr reduzierten Ansatz ermöglicht Svelte weitreichende Erweiterungen von Web-Apps. Während bei REACT praktisch das gesamte Script von Anfang an feststehen muss, erlaubt Svelte problemlos spätere Erweiterungen, ohne die Stabilität und Performance der App zu gefährden. Das macht Svelte zum idealen Werkzeug für die Entwicklung neuer Apps und die Performance-Steigerung bestehender Strukturen. Die Entwickler von SvelteJS richten sich vor allem an Einsteiger in der App-Programmierung. Sie bieten Starter-Kits an, mit denen sich sehr schnell Ergebnisse erzielen lassen. Natürlich setzt auch SvelteJS gewisse Vorkenntnisse voraus, vor allem in CSS und JavaScript. Der schlanke Ansatz des Svelte-Frameworks macht es aber Neulingen leicht, sich in der Programmierumgebung zurechtzufinden.

Um SvelteJS lokal auf dem eigenen System laufen zu lassen, muss Node JS installiert sein. Danach kann SvelteJS aus dem GitHub-Repository installiert werden.

Die SvelteJS-Entwicklungsumgebung läuft auf einem lokalen Webserver unter der Adresse "http://localhost:5000". Die Online-Demoseite von Svelte bietet einen guten Einstieg in SvelteJS, ohne dass das Programmpaket installiert werden muss. Dort werden für alle wichtigen Komponenten Beispielskripte angeboten, die sich mit dem Original-REPL-Werkzeug interaktiv verändern und testen lassen. So bekommt man schnell ein Gespür dafür, ob und wie sich SvelteJS zur Umsetzung der eigenen App-Idee eignet.

SvelteJS ermöglicht durch sein extrem reduziertes Datenvolumen leistungsstärkere und schnellere Apps als die traditionellen Frameworks. Allerdings ist Svelte noch sehr jung und seine Community noch klein. Ein besserer Zugang, ein einfacherer Einstieg und schnellere Ergebnisse sind die Versprechen von SvelteJS. Bis jetzt scheinen diese Versprechen eingehalten zu werden. Sollte sich SvelteJS tatsächlich als so viel leistungsstärker als VUE, Ractive oder REACT erweisen, wird es diese möglicherweise bald ablösen und zum neuen Universalstandard für die Entwicklung mobiler Web-Apps werden.