//

Gleich und doch anders: Einführung in Svelte

18.2.2020 | 2 Minuten Lesezeit

Verglichen mit den letzten Jahren ist es im JavaScript-Umfeld in letzter Zeit verhältnismäßig ruhig geworden. Gerade im Frontend sind React, Angular und, mit etwas Abstand, Vue etabliert und erfreuen sich einer wachsenden Nutzerbasis. Komponentenbasierte Ansätze haben sich hier durchgesetzt und WebComponents sind weiterhin ein möglicher nächster Entwicklungsschritt, welcher aber vielmehr Fundament für die etablierten Frameworks als wirkliche Alternative sein könnte.

Svelte erfindet das Rad nicht neu, gewinnt aber immer mehr Aufmerksamkeit in der Community. Was Svelte mit den etablierten Ansätzen gemeinsam hat und wo es dann doch neue Wege geht, möchte ich in diesem Artikel beleuchten.

Was ist Svelte?

Svelte ist ein komponentenbasiertes Framework, so wie wir es von React, Angular und Vue bereits kennen, unterscheidet sich allerdings in einem wichtigen Punkt von den etablierten Platzhirschen: Diese erfordern deklarativen, State-getriebenen Code, welchen der Browser mit Techniken wie einem Virtual DOM in DOM-Operationen konvertieren muss.

Svelte versteht sich hier weniger als klassisches Framework, sondern vielmehr als Compiler, welcher den Code in hocheffizienten imperativen Code umwandelt und direkt das DOM manipuliert. Da Svelte keinen Framework-Code benötigt, produziert es kleinere Bundles, und ohne Virtual DOM im Speicher verspricht es eine bessere Performance.

Dies klingt ziemlich vielversprechend und fühlt sich in der Praxis auch schon sehr gut an. Der IDE Support ist leider noch nicht vergleichbar mit dem etablierter Frameworks, die offizielle Seite hilft hier aber gut weiter.

Ein Blick auf Svelte

Sobald die eigene IDE eingerichtet ist, kann eines der vorgefertigten Templates genutzt werden, um ein Svelte-Projekt aufzusetzen. Hierzu wird auf svelte.dev der Einsatz von degit empfohlen und einfache Projekttemplates für Rollup und webpack stehen zur Verfügung.

Mit webpack sieht das ganze so aus:

1npx degit sveltejs/template-webpack svelte-app
2cd svelete-app
3npm install
4npm run dev
5

Hello-World-Beispiel

Jetzt, wo wir ein laufendes Projekt haben, können wir einen Blick auf die Komponenten werfen: Diese werden in .svelte-Dateien gespeichert und sehen auf den ersten Blick den Komponenten, wie man sie aus Vue kennt, relativ ähnlich. Innerhalb eines

Beitrag teilen

Gefällt mir

0

//

Weitere Artikel in diesem Themenbereich

Entdecke spannende weiterführende Themen und lass dich von der codecentric Welt inspirieren.

//

Gemeinsam bessere Projekte umsetzen

Wir helfen Deinem Unternehmen

Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.

Hilf uns, noch besser zu werden.

Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.