Sveltejs

Ein anderes Framework um interaktive Webinterfaces zu bauen.
Wobei es hier einen Unterschied gibt Svelte arbeitet etwas anders als andere.
React, Angular oder Vue führen den Code zur Laufzeit aus, Svelte kompiliert.

Komponenten werden in HTML, CSS und JavaScript geschrieben, beim kompilieren werden eigenständige JavaScript Module erzeugt.

Svelte stellt ein Kommandozeile Program zur Verfügung.

Eine einfache Komponente (Paragraph.svelte) könnte diese Form haben.

Diese Komponente kompiliert man in eine JavaScript Datei.

Man kann diese Komponente anschliessend importieren und nutzen (main.js).

Jede Komponenten hat set und get Methoden.

Es ist noch ein weiterer Compiler nötig um den Code so nutzen zu können.
Zudem sollten wir die einzelnen JavaScript Dateien in eine Datei zusammenpacken.

Svelte gibt es als Plugin für Webpack, Browserify, Gulp, Rollup und noch weitere.

Hier wird Babel und Rollup verwendet, Babel als Compiler und Rollup als Module Builder.

Es werden noch einige Plugins benötigt.

Eine Konfigurationsdatei könnte so aussehen.

Rollup führt nun Babel und Svelte aus, als Ergebnis wird eine JavaScript Datei erstellt.

Mit einer HTML Datei kann man die erste Komponente betrachten.

Komponenten können auch verschachtelt werden.
Definieren wir eine Tabellen Zeile (UserRow.svelte) wo User angezeigt werden.

Dazu dann die Tabelle (UserTable.svelte).

Diese beiden Komponenten nutzen methods um Interaktion zu ermöglichen. Zudem werden hier Daten von einer zur anderen Komponente gesendet. Damit hat man dann die Möglichkeit diese in der main.js zu nutzen.

Dieser Beitrag soll eine Starthilfe sein hat aber nur die Oberfläche beschrieben.
Eine weitere Starthilfe ist hier auf Github zu finden.

Es gibt noch einiges mehr was Svelte zu bieten hat.
Svelte Homepage