Kontakt

Svelte & Sapper

Svelte & Sapper

Die Anbindung eines Frontends in Form einer Progressive Web App kann mit Svelte und Sapper realisiert werden

Im Gegensatz zu anderen Single Page App- oder PWA-Ansätzen wird bei diesem technischen Ansatz das finale Frontend / Interface bereits in der Kompilierung erstellt, so dass dem Benutzer direkt interaktionsfähige Ansichten bereitgestellt werden können. Dies wird auch als Server Side Rendering bezeichnet. Bei einem Aufruf einer Seite / Anwendung müssen nicht erst komplexe Client-seitige Bibliotheken initialisiert werden. Dies führt zu einer unübertroffenen Ladezeitperformance und einer hervorragenden User Experience.

Was ist Svelte / Sapper?

“Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.”
https://svelte.dev/

“Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

Unlike single-page apps, Sapper doesn't compromise on SEO, progressive enhancement or the initial load experience — but unlike traditional server-rendered apps, navigation is instantaneous for that app-like feel.”
https://sapper.svelte.dev/

Mit Hilfe von Svelte und Sapper können Komponenten so integriert werden, dass sie als fertige Frontend-Lösung mit einer bestehenden API interagieren können. Svelte stellt dabei die Strukturen für die Umsetzung einzelner Komponenten (zum Beispiel einem Formular) bereit, während Sapper das Routing, also die Übergänge zwischen verschiedenen Zuständen des Systems, abbildet.

Das schlägt sich insbesondere in der Performance von über Svelte / Sapper entwickelten Frontends / Interfaces nieder:

Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like virtual DOM diffing that eat into your frame budget and tax the garbage collector.

Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
https://svelte.dev/blog/svelte-3-rethinking-reactivity

Abgrenzung Server Side Rendering und vorkompilierten PWAs

 

Vorkompilierung geht hier noch einen Schritt weiter als reines Server Side Rendering. Es beinhaltet alle Vorteile des SSR, optimiert aber im Kompilierungsschritt auch bereits die ausgelieferten Applikations-Bundles (CSS & JavaScript) für minimalen Datentransfer / minimale Dateigrößen und optimale Rendering-Performance im Client. Gerade bei diesem letzten Punkt sind "klassisch" über SSR ausgelieferte PWAs oft noch etwas langsam / behäbig. Der Schritt der "Rehydration" ("Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data." - Quelle) ist hier initial ziemlich teuer und "verschwenderisch".