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
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
War dieser Beitrag hilfreich?
Weitere Beiträge
von Daniel Zenzes
25.2.2020 Dein Job bei codecentric?
Jobs
Agile Developer und Consultant (w/d/m)
Alle Standorte
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.
Blog-Autor*in
Daniel Zenzes
Du hast noch Fragen zu diesem Thema? Dann sprich mich einfach an.
Du hast noch Fragen zu diesem Thema? Dann sprich mich einfach an.