© GoodStudio/Shutterstock.com
Die Vorteile des Frameworks erklärt

Svelte - unter der Haube


Kaum haben wir den kometenhaften Aufstieg von Vue etwas verdaut, steht schon die nächste Frontend-Lösung in den Startlöchern. Wie funktioniert das JavaScript Framework Svelte im Detail und welche Vorteile bringt es mit sich?

Noch vor Kurzem war die Rede von den drei großen Frontend-Frameworks. Mittlerweile muss man jedoch von den großen Vier sprechen. Vue, Angular und React unterscheiden sich zwar in Details, haben jedoch einen ganz ähnlichen Aufbau und auch die für die Entwicklung verwendeten Werkzeuge sind größtenteils die gleichen. Der entscheidende Vorteil dabei ist, dass ein Wechsel zwischen den Frameworks möglich ist. Zwar benötigt man eine kurze Eingewöhnungsphase, dann findet man sich jedoch schnell zurecht. Svelte geht an dieser Stelle einen ganz anderen Weg, sodass auch der Umstieg von einer der drei etablierten Lösungen etwas schwerer fällt. In diesem Artikel werfen wir einen Blick unter die Haube von Svelte und sehen uns an, wie das Framework funktioniert und worin die größten Unterschiede bestehen.

Initialisierung und Build einer Applikation

Egal, ob client- oder serverseitig: Die meisten JavaScript-Lösungen verfügen mittlerweile über ein Kommandozeilenwerkzeug, das Sie zumindest bei der Initialisierung der Applikation, wenn nicht sogar während des gesamten Entwicklungsprozesses unterstützt. Die Entwickler von Svelte gehen an dieser Stelle einen anderen Weg und setzen mit degit auf ein existierendes Projekt zum Scaffolding einer Applikation. degit können Sie in Kombination mit dem npx-Kommando von npm verwenden, ohne dass Sie es auf Ihrem Rechner installieren müssen. Mit dem Kommando npx degit sveltejs/template APP_NAME erzeugen Sie eine neue Applikation mit dem Namen APP_NAME. degit lädt dabei das angegebene Applikationstemplate von GitHub, in unserem Fall https://github.com/sveltejs/template. Im nächsten Schritt sollten Sie sich darum kümmern, Ihre neue Svelte-Applikation in einem eigenen Git Repository zu verwalten. Anschließend wechseln Sie in das Projektverzeichnis, führen das Kommando npm install aus, um die Abhängigkeiten zu installieren, die Svelte zum Betrieb benötigt, und starten Ihre Applikation mit npm start.

Ein erster Blick in den Quellcode Ihrer neuen Applikation sorgt für etwas Ernüchterung: Die Templateapplikation ist in reinem JavaScript geschrieben. Dieses Problem ist jedoch schnell gelöst. Mit node scripts/setupTypeScript.js wird Ihre Applikation nach TypeScript konvertiert. Beachten Sie, dass Sie nach der TypeScript-Konvertierung erneut ein npm install ausführen müssen, da zusätzliche Abhängigkeiten in die package.json-Dateien eingetragen werden. Im Gegensatz zur üblicherweise im Frontend verwendeten Kombination aus webpack und Babel kommt bei einer Svelte-Applikation, die Sie mit diesem Template erstellen, standardmäßig Rollup als Modul-Bundler zum Einsatz. In Benchmarks sorgt Rollup im Vergleich zur Konkurrenz für kleinere Bundles.

Das Svelte-Template verfügt über insgesamt drei npm-Skripte, die für die Entwicklung und das Bauen der Applikation verwendet werden können. Falls die Applikation nach TypeScript konvertiert wurde, kommt noch ein viertes Skript hinzu.

  • dev: Das dev-Skript startet Rollup im watch-Modus. Die Applikation wird standardmäßig auf Port 5000 ausgeliefert. Im watch-Modus ist Hot Reloading aktiviert. Das bedeutet, dass, sobald sich die Applikation im Browser öffnet, die Anzeige automatisch neugeladen wird, wenn der Quellcode der Applikation verändert und die entsprechenden Dateien gespeichert werden. Dieser Modus wird üblicherweise für die Entwicklung von Applikationen verwendet.

  • start: Das start-Skript liefert die Applikation über einen lokalen Webserver aus. Es handelt sich um eine Art Testlauf vor dem Release, da hier die gebaute Applikation getestet werden kann. Für die statische Auslieferung kommt das sirv-cli-Paket zum Einsatz. Es stellt einen statischen Webserver auf Node.js-Basis zur Verfügung, der für das Ausliefern von Verzeichnissen auf einem Rechner verwendet wird. Beim start-Skript wird der Inhalt des public-Verzeichnisses der Applikation ausgeliefert. Hierhin schreiben sowohl das dev- als auch das build-Skript ihre Ergebnisse.

  • build: Das build-Skript führt Rollup mit der Konfiguration des Projekts aus, um die Applikation für den Produktivbetrieb zu bauen. Das Ergebnis ist im public-Verzeichnis der Applikation zu finden. Dieses Verzeichnis beinhaltet den optimierten Quellcode Ihrer Applikation, der mit einem Webserver ausgeliefert werden kann.

  • validate: Mit dem Kommando npm run validate kann der Quellcode der Applikation überprüft werden. Das svelte-check-Paket, das hierfür verwendet wird, sucht nach nicht verwendetem CSS, weist auf Accessibility-Probleme hin und zeigt Compilerfehler.

Auf Basis des Svelte-Templates kann direkt mit der Entwicklung begonnen werden. Mit dem dev-Skript sind im Entwicklungsprozess die Änderungen sofort im Browser zu sehen und das build-Skript erlaubt die Vorbereitung der Applikation für ein Release.

Die Anatomie einer Svelte-Komponente

Svelte verfolgt, wie die übrigen großen JavaScript Frameworks, einen komponentenbasierten Ansatz. Die einzelnen Komponenten werden in Dateien mit der Endung .svelte gespeichert. Diese Dateien enthalten HTML-Struktur, JavaScript-Code und CSS. Eine Komponente wird als HTML-Tag eingebunden. So wird eine Applikation als Baum von Komponenten aufgebaut. Typischerweise fließen Informationen in einem solchen Baum von den Elternkomponenten zu den Kindkomponenten. Dieser gerichtete Datenfluss wird mit Hilfe der sogenannten Props umgesetzt. Dabei handelt es sich um Attribute von Komponenten, die Sie bei der Einbindung der Komponente angeben. Innerhalb der Komponente können Sie auf die Werte der Props zugreifen und das Verhalten der Komponente damit steuern. Die Props stellen also den Input der Komponente dar.

Für eine dynamische Applikation reicht der Fluss von der Eltern- zur Kindkomponente allein nicht aus. Die Kindkomponente benötigt außerdem eine Möglichkeit, um der Elternkomponente mitzuteilen, falls sich – beispielsweise durch eine Benutzerinteraktion – etwas an den Daten ändern sollte. Dieser gegenläufige Datenfluss wird über Events abgebildet. In Svelte erreichen Sie das, indem Sie mit Hilfe der createEventDispatcher-Funktion einen Dispatcher erzeugen, mit dem Sie wiederum Events auslösen können. Über das on:<Eventname>-Attribut kann dann eine Callback-Funktion bei der Einbindung der Komponente definiert werden, mit der auf das Event reagiert wird. Intern besteht eine Komponente aus drei (jeweils optionalen) Teilen: Logik, Styling und Struktur. Die Logik in Form von JavaScript beziehungsweise TypeScript kapseln wir in einem script-Tag. Dieser Code wird ausgeführt, wenn die Komponenteninstanz erzeugt wird. Zusätzlich...

Neugierig geworden? Wir haben diese Angebote für dich:

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