Lange Zeit war Ja­va­Script für das Erstellen an­spre­chen­der Web­in­hal­te un­ver­zicht­bar. Dazu mussten Web­ent­wick­ler aber zunächst die Pro­gram­mier­spra­che be­herr­schen, wofür nicht jeder Zeit und Lust auf­brin­gen konnte. Doch gibt es so­ge­nann­te Frame­works, die Ent­wick­lern einen Rahmen vorgeben, in dem auch kom­pli­zier­te Ja­va­Script-Funk­tio­nen au­to­ma­ti­siert aus­ge­führt werden können. Das ver­min­dert den Pro­gram­mier­auf­wand erheblich. Im Gegenzug lasten die meisten Frame­works al­ler­dings den Browser stark aus. Hier ist Svelte ein grund­le­gend neuer Ansatz.

Was ist Svelte?

Auch bei Svelte (oder: SvelteJS) handelt es sich um ein Framework zur Ent­wick­lung von Ja­va­Script-Apps. Als solches liefert es das Grund­ge­rüst für die spätere Anwendung und wichtige, immer wie­der­keh­ren­de Funk­tio­nen in Form von au­to­ma­tisch ein­ge­bun­de­nen Bi­blio­the­ken. Innerhalb eines vor­ge­ge­be­nen Rahmens legt das Framework die grund­sätz­li­chen Mög­lich­kei­ten fest und bestimmt auch we­sent­lich den Ent­wick­lungs­pro­zess. Die bei der Pro­gram­mie­rung von Web­an­wen­dun­gen zum Einsatz kommenden Frame­works sind nach kurzer Ein­ar­bei­tung kom­for­ta­bel zu bedienen.

Hinweis

Ja­va­Script – abgekürzt: JS – ist eine Skript­spra­che, die die Mög­lich­kei­ten von Standard-HTML und CSS erweitert und von allen modernen Web­brow­sern in­ter­pre­tiert werden kann. Damit lassen sich in­ter­ak­ti­ve Seiten und Web-Apps erstellen. Abgesehen vom Namen hat Ja­va­Script kaum Ge­mein­sam­kei­ten mit der höheren Pro­gram­mier­spra­che Java.

Svelte ist ein ideales Tool zum Rea­li­sie­ren schneller Web­an­wen­dun­gen und ähnelt in der Grundidee anderen Ja­va­script-Frame­works wie Angular, Vue, Ractive oder React. Genau wie diese basiert Svelte auf Ja­va­Script und er­mög­licht die Ge­stal­tung in­ter­ak­ti­ver Be­nut­zer­ober­flä­chen. Der ge­ne­rier­te Code ist jedoch deutlich schlanker als bei den tra­di­tio­nel­len Frame­works.

Welche Vorteile bietet Svelte?

Die grund­le­gen­de Neuerung von Svelte liegt darin, einen komplexen Framework-Code in op­ti­mier­tes, einfaches Ja­va­Script kon­ver­tie­ren zu können. Die meisten bis­he­ri­gen Frame­works, wie bei­spiels­wei­se JHipster über­lie­ßen es dem Browser, die App in Ja­va­Script zu in­ter­pre­tie­ren und dar­zu­stel­len. Dies hat eine ver­lang­sam­te Dar­stel­lung zur Folge. Svelte hingegen kom­pi­liert die App schon bei der Ent­wick­lung in ein schlankes, op­ti­mier­tes Ja­va­Script. Ein Ziel bei der Ent­wick­lung von Svelte war es auch, dem Web­ent­wick­ler selbst die Mög­lich­keit zu geben, möglichst schlanken, in­tel­li­gen­ten Code zu schreiben, ohne durch das Framework allzu viel Ballast mit­schlep­pen zu müssen.

Wie un­ter­schei­det sich Svelte von anderen Frame­works?

Das Problem her­kömm­li­cher Frame­works ist immer dasselbe: Statt einen Ja­va­Script-Code zu ver­ein­fa­chen, um ihn im Browser per­for­mant dar­stell­bar zu machen, erweitern sie den Code und lassen alle Funk­tio­nen des Frame­works – oft auch nicht genutzte – von Ja­va­Script in­ter­pre­tie­ren. Dadurch blähen sich auch ver­gleichs­wei­se kleine Ap­pli­ka­tio­nen bei einem tra­di­tio­nel­len Framework zu großen Scripts auf, deren Aus­füh­rung Re­chen­zeit und Da­ten­vo­lu­men kostet. Kurz: Frame­works helfen dabei, die Gedanken zu struk­tu­rie­ren – aber nicht den Code. Das Problem ist oft, dass die Framework-Ent­wick­ler auf die Aus­füh­rung im Browser fo­kus­siert sind und die Ver­wen­dung des reinen „Vanilla“-Ja­va­Scripts ver­nach­läs­si­gen. Dies ist der we­sent­li­che Un­ter­schied von Svelte. Bis auf einige wenige Grund­be­feh­le, die sehr schnell zu erlernen sind, verwendet Svelte reines HTML, CSS und Ja­va­Script.

Fakt

CSS (Cascading Style Sheets) ist eine einfache Sprache, die die optische Ge­stal­tung einer HTML-Seite be­schreibt. Während der HTML-Code nur den ei­gent­li­chen Inhalt enthält, kann die Seite durch Austausch des CSS z. B. auf ver­schie­de­nen Ge­rä­te­platt­for­men un­ter­schied­lich dar­ge­stellt werden.

Während des Er­stel­lungs­pro­zes­ses werden Kom­po­nen­ten der App zu ei­gen­stän­di­gen Ja­va­Script-Modulen kom­pi­liert. In einem Vor­schau­fens­ter kann der Pro­gram­mie­rer die Sta­bi­li­tät und die Aus­füh­rung seines kom­pi­lier­ten Programms jederzeit über­prü­fen. Der Vorteil dieses Ver­fah­rens: Das finale Script wird extrem schlank und schnell. Bei Svelte bleibt das kaum be­ein­fluss­ba­re Aufblähen eines Scripts in tra­di­tio­nel­len Frame­works aus. Das Ergebnis ist eine bis zu 10-mal schnel­le­re Per­for­mance, ver­gli­chen bei­spiels­wei­se mit dem bislang sehr beliebten Framework REACT.

Die Ar­chi­tek­tur von SvelteJS

Svelte für JS (Ja­va­Script) besteht aus mehreren Kom­po­nen­ten. Der besondere Charme liegt darin, dass sich der Web­ent­wick­ler kaum um die lästigen und feh­ler­an­fäl­li­gen CSS-Kom­po­nen­ten kümmern muss. Es genügt, einfache HTML- oder XML-Tags zu de­fi­nie­ren und diese von SvelteJS in­ter­pre­tie­ren zu lassen. SvelteJS erstellt daraus selbst die Kom­po­nen­ten der App. Der HTML-Code wird in ein so­ge­nann­tes REPL-Ein­ga­be­fens­ter (Read-eval-print loop) im Browser ge­schrie­ben. Die Ja­va­Script-In­ter­pre­ta­ti­on erfolgt umgehend und au­to­ma­tisch. Dabei kann die Sta­bi­li­tät des Codes sofort getestet werden.

Wo wird Svelte optimal ein­ge­setzt?

Mit seinem einfachen und sehr re­du­zier­ten Ansatz er­mög­licht Svelte weit­rei­chen­de Er­wei­te­run­gen von Web-Apps. Während bei REACT praktisch das gesamte Script von Anfang an fest­ste­hen muss, erlaubt Svelte pro­blem­los spätere Er­wei­te­run­gen, ohne die Sta­bi­li­tät und Per­for­mance der App zu gefährden. Das macht Svelte zum idealen Werkzeug für die Ent­wick­lung neuer Apps und die Per­for­mance-Stei­ge­rung be­stehen­der Struk­tu­ren. Die Ent­wick­ler von SvelteJS richten sich vor allem an Ein­stei­ger in der App-Pro­gram­mie­rung. Sie bieten Starter-Kits an, mit denen sich sehr schnell Er­geb­nis­se erzielen lassen. Natürlich setzt auch SvelteJS gewisse Vor­kennt­nis­se voraus, vor allem in CSS und Ja­va­Script. Der schlanke Ansatz des Svelte-Frame­works macht es aber Neulingen leicht, sich in der Pro­gram­mier­um­ge­bung zu­recht­zu­fin­den.

SvelteJS in­stal­lie­ren oder online aus­pro­bie­ren?

Um SvelteJS lokal auf dem eigenen System laufen zu lassen, muss Node JS in­stal­liert sein. Danach kann SvelteJS aus dem GitHub-Re­po­si­to­ry in­stal­liert werden.

git clone https://github.com/sveltejs/svelte.git
cd svelte
npm install

Die SvelteJS-Ent­wick­lungs­um­ge­bung läuft auf einem lokalen Webserver unter der Adresse "http://localhost:5000". Die Online-Demoseite von Svelte bietet einen guten Einstieg in SvelteJS, ohne dass das Pro­gramm­pa­ket in­stal­liert werden muss. Dort werden für alle wichtigen Kom­po­nen­ten Bei­spiel­skrip­te angeboten, die sich mit dem Original-REPL-Werkzeug in­ter­ak­tiv verändern und testen lassen. So bekommt man schnell ein Gespür dafür, ob und wie sich SvelteJS zur Umsetzung der eigenen App-Idee eignet.

Ausblick: Svelte als Uni­ver­sal­stan­dard für Apps?

SvelteJS er­mög­licht durch sein extrem re­du­zier­tes Da­ten­vo­lu­men leis­tungs­stär­ke­re und schnel­le­re Apps als die tra­di­tio­nel­len Frame­works. Al­ler­dings ist Svelte noch sehr jung und seine Community noch klein. Ein besserer Zugang, ein ein­fa­che­rer Einstieg und schnel­le­re Er­geb­nis­se sind die Ver­spre­chen von SvelteJS. Bis jetzt scheinen diese Ver­spre­chen ein­ge­hal­ten zu werden. Sollte sich SvelteJS tat­säch­lich als so viel leis­tungs­stär­ker als VUE, Ractive oder REACT erweisen, wird es diese mög­li­cher­wei­se bald ablösen und zum neuen Uni­ver­sal­stan­dard für die Ent­wick­lung mobiler Web-Apps werden.

Zum Hauptmenü