Svelte ist ein Werkzeug zur Erstellung von Frontend-Anwendungen und Webseiten. Es ist eine Alternative zu Frameworks wie Angular oder React .
Wie funktionieren klassische Frameworks?
Klassische Frameworks wie Angular oder React funktionieren, indem sie zur Laufzeit im Browser ausgeführt werden. Die Seite ist dabei aus Komponenten aufgebaut, die zur Entwicklungszeit in HTML, CSS und JavaScript/Typescript geschrieben werden.
Ruft nun ein Besucher die Seite auf, werden die Komponenten vom Framework interpretiert und dynamisch im Browser gerendert. Um dies zu tun, wird der gesamte Code des Frameworks benötigt und mit der aufgerufenen Webseite ausgeliefert. Für komplexe Webanwendungen macht das Sinn und die daraus resultierenden Performance-Nachteile sind vernachlässigbar.
Für kleine Anwendungen, die nur wenig Framework-Funktionalität benötigen, ist dies allerdings nicht optimal, denn es wird sehr viel Code ausgeliefert, der zur Laufzeit eigentlich nicht benötigt wird.
Wie funktioniert Svelte?
Svelte verfolgt einen anderen Ansatz. Hierbei werden die Komponenten ebenfalls deklarativ beschrieben, allerdings werden sie nicht erst im Browser interpretiert und gerendert, sondern bereits zur Entwicklungszeit in HTML, CSS und JavaScript umgewandelt, welches extrem optimiert und entsprechend klein ist.
Die Interaktivität der Komponenten wird dabei nicht durch das Framework zur Laufzeit im Browser erzeugt, sondern bereits zur Entwicklungszeit wird der benötigte JavaScript-Code generiert, der nur genau das tut, was die Komponente benötigt. Entsprechend klein und sparsam ist der benötigte Code.
Ruft nun ein Besucher die Seite auf, muss kein Framework mehr im Browser ausgeführt werden, sondern nur noch die kleinen, optimierten Komponenten. Das Ergebnis ist eine sehr performante Webseite, die nur noch einen Bruchteil der Größe einer Webseite mit klassischem Framework hat.