Das mit den Frameworks in der JavaScript-Community ist so eine Sache: Einerseits gibt es unzählige Tools auf dem Markt, sodass man schnell den Überblick verliert. Andererseits bieten sie natürlich viele Vorteile, gerade was den Umgang mit komplexen Konzepten angeht. Mit Svelte steht seit November 2016 ein neues JavaScript-Framework zur Verfügung, das den Applikations-Code in Vanilla JavaScript umwandelt und so ohne unzählige Abstraktions-Layer auskommt.

Schon wieder ein neues JavaScript-Framework, werden viele jetzt denken, und ja – es ist fraglich, ob man wirklich noch ein Framework braucht. Immerhin stehen mit React, Angular und Co. ja bereits viele sehr gute Frameworks zur Verfügung, die für das Erstellen von JavaScript-Applikationen jeweils ganz eigene Vorteile mit sich bringen. Was allen Frameworks aber gemein ist, ist der Ansatz, die Komplexität des Codes – oder besser noch: der Ideen dahinter – zu verringern. Dafür benötigt werden allerdings jede Menge Abstraktions-Layer zwischen der App und dem Browser, die meist gehörig zu Lasten der Performance gehen.

Was wäre also, wenn das genutzte Framework überhaupt nicht im Browser ausgeführt werden müsste? Was wäre, wenn es stattdessen die Applikation in reines Vanilla JavaScript konvertiert, ähnlich wie das etwa der Compiler Babel für ECMAScript-2016-Code übernimmt? Genau diese Überlegungen standen wohl bei den Entwicklern des neuen JavaScript-Frameworks Svelte im Vordergrund.

Svelte – So schnell wie Vanilla JavaScript

Svelte erlaubt es Entwicklern, ihre Komponenten in HTML, CSS, JavaScript und einigen zusätzlichen Zeilen Code zu schreiben. Während des Build-Prozesses kompiliert das Framework diese in kleine Standalone-JavaScript-Module. Durch die statische Analyse des Component Templates wird zugleich der Browser möglichst wenig gefordert und eine deutlich bessere Performance ist die Folge. Tatsächlich, so sagt das Entwickler-Team, kann Svelte es mit Inferno aufnehmen – dem aktuell wohl schnellsten UI-Framework. Damit ist es auch schneller als React, Vue.js oder Angular:

It’s basically as fast as vanilla JS, which makes sense because it is vanilla JS – just vanilla JS that you didn’t have to write.

Darüber hinaus soll Svelte auch in puncto Interoperabilität und Code Splitting nützlich sein. Auch die generelle Leichtgewichtigkeit des Frameworks bietet viele Vorteile. So vermeidet man einerseits unnötig aufgeblähte Applikationen, nicht zuletzt weil der Compiler nur die vom User wirklich benötigten Features generiert. Andererseits profitieren vor allem Mobile-Applikationen von schnelleren Ladezeiten beim Parsen des JavaScript-Skripts.

Außerdem gibt es in Svelte keinen Overhead, sodass das Framework problemlos schrittweise in bestehende Applikationen integriert werden kann. Ebenso können Widgets als Standalone-Packages verteilt werden, die überall funktionieren. Generell werden Applikationen mit Svelte aus Komponenten erstellt; ähnlich wie bei Vue.js wird ein Single-File-Component-Konzept gefördert.

Lesen Sie mehr zu Vue.js in der Ausgabe 2.17 des PHP Magazins.

Svelte wandelt die als .html-Datei vorliegenden Komponenten in ein JavaScript-Modul um, dass dann in die App importiert werden kann. Aus

<!-- App.html -->

<h1>Hello {{name}}!</h1>

wird dann etwa

// main.js

import App from './App.html';

 

const app = new App({

    target: document.querySelector( 'main' ),

    data: { name: 'world' }

});

 

// change the data associated with the template

app.set({ name: 'everybody' });

 

// detach the component and clean everything up

app.teardown();

Installation, aktuelle Version und Zukunft von Svelte

Svelte ist noch ein sehr junges Framework; im November 2016 erschien mit Version 1.0 die erste production-ready Version. Dementsprechend wird aktuell fleißig an der Weiterentwicklung des Frameworks gearbeitet. Auf der To-Do-List der Entwickler steht etwas das Erstellen von Build-Tool-Integrationen, das Hinzufügen eines serverseitigen Renderers oder die Erweiterung der Dokumentation. Trotzdem ließen sich bereits jetzt Rich Components mit Svelte erstellen, betont das Entwicklerteam. Ob es ratsam ist, das noch mehr oder minder ungetestete Framework in der Produktion zu nutzen, muss allerdings jeder selbst entscheiden.

Da das Framework zur Build-Time ausgeführt wird, funktioniert die Installation ein wenig anders als bei den meisten anderen JavaScript-Frameworks. Am einfachsten ist es, wenn Svelte direkt per Plugin in das Build-System integriert wird; eine Übersicht über verfügbare Plugins findet sich auf GitHub.

Svelte befindet sich noch in der Anfangsphase der Entwicklung, der erste Eindruck ist aber recht positiv, meint Tim Severien. In seinem Artikel 3 JavaScript Libraries to Keep an Eye on in 2017 stellt er das Framework vor und zeigt einige Beispiele zur Nutzung. Alle weiteren Informationen rund um das neue JavaScript-Framework lassen sich der Dokumentation entnehmen.

Name	Svelte
Hersteller	Rich Harris
Projektwebsite	https://svelte.technology/
GitHub	https://github.com/sveltejs/svelte