Svelte kennenlernen, das neue Framework auf dem Markt

Seit sechs Jahren dominieren Vue, Angular und React die Welt der Front-End-Komponenten-Frameworks. Google und Facebook haben ihre eigenen gesponserten Frameworks, aber diese könnten für jeden, der sich für ein offenes und unvoreingenommenes Web einsetzt, einen bitteren Nachgeschmack hinterlassen. Vue ist ein weiteres beliebtes Framework, das mehrere Sponsoren hat, aber nicht von einem einzelnen Unternehmen geführt wird, was für manche attraktiv sein mag.

Es gibt einen weiteren Akteur im Framework-Bereich, der an Aufmerksamkeit gewinnt und im gleichen Geiste wie Vue agiert, was die Übernahme einer offenen MIT-Lizenz betrifft: Svelte.

Svelte wurde hier auf CSS-Tricks bereits behandelt, wie zum Beispiel Ollie Williams' exzellente Übersicht darüber, wie man damit bequemere, komponentengesteuerte CSS schreibt. Dieser Artikel wird etwas herauszoomen und mehr Kontext zu Svelte geben, wie es sich von anderen Frameworks unterscheidet und wie man es in eigenen Projekten implementiert.

Was macht Svelte anders?

Ich kann mit Sicherheit sagen, dass Svelte die am einfachsten zu erlernende JavaScript-Komponentenbibliothek ist und man schnell damit produktiv arbeiten kann.

— Jeff Delaney, aus Svelte Realtime Todo List with Firebase

Okay, Svelte ist also eine JavaScript-Komponentenbibliothek. Aber das sind React, Angular und Vue auch. Was hebt Svelte von der Masse ab?

Svelte versucht, einige Dinge anders zu machen als die anderen

1. Der gesamte Code wird im Voraus kompiliert.
2. Es gibt kein virtuelles DOM.
3. CSS-Scoping ist integriert.

Lassen Sie uns das etwas aufschlüsseln, da es Svelte deutlich von anderen Front-End-Frameworks unterscheidet.

Der gesamte Code wird im Voraus kompiliert.

Svelte ist ein Compiler, was bedeutet, dass der Code in Svelte-Dateien von einer einfacher zu schreibenden Hybrid-Sprache, die HTML, JavaScript und CSS mischt, in optimierte JavaScript-, HTML- und CSS-Dateien niedrigerer Ebene umgewandelt wird.

Dies ähnelt stark der Art und Weise, wie C# zu Bytecode kompiliert wird oder wie TypeScript zu JavaScript kompiliert wird. Aber während traditionelle Compiler dazu neigen, zu einer Sprache zu kompilieren, mischt Svelte alle drei.

Dies macht das Schreiben von Code viel flexibler und kommt dem Client (Webbrowser) zugute, da die Berechnung während des Erstellens der Anwendung erfolgt und nicht in jedem Browser, wenn die Web-App besucht wird.

Es gibt kein virtuelles DOM.

Ein DOM (oder Document Object Model) ist eine Schnittstelle, die die logische Struktur einer Webseite definiert. Sie nimmt HTML und wandelt sie in eine Struktur um, die manipuliert und abgerufen werden kann. Chris hat einen klassischen Beitrag, der sie ausführlich erklärt.

Das virtuelle DOM erweitert das Konzept eines DOM, indem es ein "zweites" DOM im Speicher erstellt. Wie das DOM wird auch dieses von traditionellen Frameworks (z. B. Angular, Vue und React) manipuliert und abgerufen. Beim Erstellen wird dieses zweite "virtuelle" DOM mit dem tatsächlichen DOM konsolidiert, was die Rendering-Ausgabe der Benutzeroberfläche ermöglicht.

Und was ist mit dem Shadow DOM? Nun, der Shadow DOM ist technisch gesehen Teil des "echten" DOM, nur eben im Verborgenen. Daher ist er ein großartiges Werkzeug zur Isolierung von Codeblöcken, die nicht in andere Elemente auf der Seite überlaufen oder mit ihnen in Konflikt geraten – ein wenig wie (aber gleichzeitig fast gar nicht wie) ein iFrame. Der Shadow DOM ist quasi der Kern der meisten komponentenbasierten Front-End-Frameworks, da sie die isolierte Natur des Shadow DOM nutzen, um spezifischen Code für spezifische Elemente bereitzustellen.

Obwohl dies kein Hauptverkaufsargument von Svelte ist, ist es experimentell möglich, mit dem Shadow DOM zu arbeiten. Der Shadow DOM hat sich in progressiven Web-Praktiken noch nicht wirklich durchgesetzt, was schade ist, wahrscheinlich aufgrund der Verwirrung zwischen Entwürfen und mangelnder Unterstützung von IE und Edge.

Also, worauf will ich hinaus? Der Unterschied zwischen Svelte und anderen JavaScript-Frameworks ist das Fehlen eines virtuellen DOM. Das ist wichtig, weil es zu schnelleren Apps beiträgt – schneller als Frameworks, die ein virtuelles DOM verwenden. Ja, das virtuelle DOM kann super schnell sein, weil es nur Teile des DOM aktualisiert, wenn nötig, aber mit wachsender Größe von Anwendungen kann die Auswirkung eines doppelten, im Speicher gespeicherten DOM die Gesamtleistung negativ beeinflussen.

Svelte verfolgt einen anderen Ansatz und erledigt viele dieser rechenintensiven Berechnungen zur Bauzeit. Die gesamte schwere Arbeit wird im Voraus erledigt, was es Svelte ermöglicht, Änderungen gezielt nur dort einzufügen, wo sie benötigt werden.

CSS-Scoping ist integriert.

Svelte hat integrierte Stile, die in anderen modernen Frameworks unerlässlich sind. Der Unterschied zwischen CSS in Svelte und CSS in anderen Frameworks besteht darin, dass Svelte das CSS jeder Komponente nimmt und es beim Erstellen in eine separate CSS-Datei ausgibt.

Ein persönlicher Kritikpunkt, den ich an den meisten CSS-in-JS-Ansätzen habe, ist, dass sie wie eine überentwickelte Lösung erscheinen. Svveltes Ansatz hält die Dinge schlank, nativ und gekapselt – und behält alles dort, wo es hingehört.

Für diejenigen, die Präprozessoren lieben, gibt es Plugins, sei es für Sass, Less oder Gulp. Aber da Svelte noch in den Kinderschuhen steckt, würde ich empfehlen, einfaches CSS mit einem minifizierten CSS-Framework Ihrer Wahl zu verwenden, damit Sie Svveltes praktische Komponentenkapselung nutzen können. 

Sie könnten genauso gut Ihre üblichen Stilpräferenzen beibehalten und Sveltes CSS-Builder komplett ignorieren. Ich würde jedoch argumentieren, dass das eine riesige Verschwendung ist, da Sveltes Lösung, zumindest nach meiner Erfahrung, extrem sauber und angenehm war. Aber jeder, der mit IE11 (😬) und noch älteren Browsern arbeiten muss, weiß, dass die Normalisierung von Stilen unerlässlich ist. Hier ist ein guter Zeitpunkt, Ollie's Beitrag anzusehen, da er tiefer in Sveltes Styling-Funktionen und Vorteile eintaucht.

Wie Svelte im Vergleich zu anderen Frameworks abschneidet

Wir haben gerade betrachtet, wie Svelte einen anderen Ansatz für Kompilierung, Interaktion mit dem DOM und Schreiben von CSS hat. Sie fragen sich vielleicht: Wie schneidet Svelte im Vergleich zu anderen beliebten Frameworks ab?

Es gibt bereits zahlreiche Vergleiche, aber um es kurz zu machen: Svelte ist ziemlich verdammt schnell. Aber Geschwindigkeit ist nicht die einzige Vergleichsgrundlage. Stattdessen machen wir einen Side-by-Side-Vergleich, der einen breiteren Überblick in einem Format bietet, das von der Entwicklergemeinschaft sehr geschätzt wird: eine Tabelle!

	Svelte	Vue	React	Angular (2+)
Was ist es	Compiler	Framework	Framework	Framework
Erster Commit	16. Nov. 2016	29. Juli 2013	24. Mai 2013	18. Sep. 2014
Unterstützung	Open Source	Mehrere Sponsoren	Facebook	Google
Community¹	Klein	Groß	Massiv	Groß
Zufriedenheit2	88%	87%	89%	38%

Svelte ist angesichts seines späten Einstiegs und seiner kleinen Community in einer starken Position. Die Entwicklerzufriedenheit ist hoch, während die großen Drei in letzter Zeit Rückgänge verzeichneten. Die Svelte-Community ist klein, aber wachsend, und der Code ist Open Source, was ein großer Pluspunkt für die gesamte Web-Community ist.

Betrachten wir ein Beispiel für die Verwendung von Svelte

Ich hoffe, ich habe Sie davon überzeugt, dass Svelte es zumindest wert ist, ausprobiert zu werden. Wenn ja, starten wir das Terminal und probieren ein reales Beispiel für einen alltäglichen Anwendungsfall aus: die Implementierung des Intersection Observer. Wenn Sie jemals einen Lighthouse-Bericht ausgeführt haben, hat er Sie vielleicht darauf hingewiesen, dass Sie keine passiven Scroll-Events verwenden. Das ist vielleicht der langweiligste Satz, den ich je geschrieben habe, aber er punktet bei der Leistung und ist mit dem Intersection Observer in Svelte nicht übermäßig kompliziert zu realisieren.

Überspringen wir die Installations- und Setup-Sachen, da wir sie mit REPL, dem Online-Editor, den Svelte auf seiner Website zur Demonstration des Frameworks verwendet, vermeiden können. Dort ist das Standard-"Hello world"-Boilerplate enthalten. Laden Sie die ZIP-Datei der App herunter, oben rechts auf dem Bildschirm.

Entpacken Sie nun die Datei, navigieren Sie per Terminal in den Ordner und führen Sie npm -i aus, um das Projekt zu initialisieren. Sobald das erledigt ist, führen Sie npm run build aus, und Sie erhalten eine Kopie Ihrer leichten, winzigen Svelte "Hello, world!"-App.

Nun können wir mit der eigentlichen Aufgabe beginnen, den IntersectionObserver hinzuzufügen.

Zuerst importieren wir den Code, der bereits freundlicherweise vom Svelte-Team geschrieben wurde. Er befindet sich im Quellcode des svelte.dev Git-Repository (dessen innere Mechanismen faszinierend zu lesen sind).

<script>
  import { onMount } from 'svelte';
  export let once = false;
  export let top = 0;
  export let bottom = 0;
  export let left = 0;
  export let right = 0;
  let intersecting = false;
  let container;

  onMount(() => {
    if (typeof IntersectionObserver !== 'undefined') {
      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
      const observer = new IntersectionObserver(entries => {
        intersecting = entries[0].isIntersecting;
        if (intersecting && once) {
          observer.unobserve(container);
        }
        }, {
          rootMargin
      });
        observer.observe(container);
        return () => observer.unobserve(container);
  }

  function handler() {
    const bcr = container.getBoundingClientRect();
    intersecting = (
      (bcr.bottom + bottom) > 0 &&
      (bcr.right + right) > 0 &&
      (bcr.top - top) < window.innerHeight &&
      (bcr.left - left) < window.innerWidth
    );
    if (intersecting && once) {
      window.removeEventListener('scroll', handler);
    }
  }

  window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  });
</script>

<style>
  div {
    width: 100%;
    height: 100%;
  }
</style>

<div bind:this={container}>
  <slot {intersecting}></slot>
</div>

Fügen Sie dies in eine Datei namens IntersectionObserver.svelte in einem Ordner src/components ein. Referenzieren Sie es dann aus der Haupt-Svelte-Datei: App.svelte.

import IntersectionObserver from “./components/IntersectionObserver.svelte”;

Nun, da wir den Intersection Observer als Komponente verfügbar haben, können wir andere Elemente damit umschließen.

<IntersectionObserver let:intersecting top={400}>
 {#if intersecting}
    <section>
      This message will Show if it is intersecting
    </section>
  {:else}
    <section>
      This message won't Show if it is intersecting
    </section>
 {/if}
</IntersectionObserver>

Das war's wirklich! Sie sehen, wie die Intersection Observer-Komponente es uns ermöglicht, <IntersectionObserver> als Wrapper zu verwenden und festzulegen, wo die Intersection ausgelöst werden soll, was in diesem Beispiel 400 Pixel von oben ist. Zur Erinnerung: Dies alles wird als natürliches JavaScript exportiert! Super performant, kein Blödsinn. Wir packen JavaScript und HTML zusammen, was cool ist, weil wir sehen können, was der Intersection Observer direkt beeinflusst, ohne Unklarheiten und ohne Leistungseinbußen.

Die Funktion OnMount ist notwendig, um Svelte mitzuteilen, dass dieser Code im Browser ausgeführt werden muss, da der Intersection Observer nicht im Voraus berechnet werden kann.

Wir müssen ein paar Stile hinzufügen, damit wir den Observer in Aktion erleben können, und das können wir direkt in Ihrer App.svelte-Datei tun. Das mag Ihnen sehr vertraut vorkommen, wenn Sie bereits mit anderen Front-End-Frameworks gearbeitet haben.

<style>
  .somesection {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
  }
  
  .somesection.even{
    background: #ccc;
  }
        
  .content{
    text-align: center;
    width: 350px;
  }
</style>

Schließlich können wir unser Intersection Observer-Element viermal kopieren und einfügen, um mehr Intersections zu erstellen. Das ergibt eine Mini-Web-App, die Inhalte reaktiv hinzufügt und entfernt, wenn sie sichtbar wird – perfekt für die Verwendung mit Medien, wie Lazy Loading. Schauen Sie sich eine Demo des Endergebnisses an und öffnen Sie unbedingt die Entwicklertools, um den Intersection Observer zu sehen.

Einige abschließende Gedanken

Meine persönliche Empfehlung ist, Svelte auszuprobieren. Wir haben in diesem Artikel nur an der Oberfläche des Frameworks gekratzt, aber nachdem ich meine persönliche Website auf Svelte umgestellt habe, kann ich mit Zuversicht sagen, dass es eine Freude ist, damit zu arbeiten. Es ist performant, hat einen brillanten VSCode-Linter und ist vor allem einfach zu bedienen. Es mag klein und neu auf dem Markt sein, aber ich habe das starke Gefühl, dass es die Erleichterung von aufgeblähten "Goliath"-Frameworks ist, der "David", nach dem sich Frontend-Entwickler gesehnt haben.

Sollten Sie Svelte also in einem echten Projekt verwenden? Die Abwägung von Risiko und Ertrag spielt definitiv eine Rolle. Die Community ist kleiner als bei anderen Frameworks, was bedeutet, dass Sie wahrscheinlich weniger Unterstützung und weniger Tutorials finden werden, die Sie leiten. Gleichzeitig ist Svelte in seiner dritten Generation, was bedeutet, dass die meisten Probleme behoben sein sollten und ein schlankes und zuverlässiges Framework übrig bleibt.

Wie bei allem Neuen gilt der gesunde Menschenverstand: Probieren Sie es mit etwas Nicht-Komziellem aus, drehen Sie eine Runde und sehen Sie, wie es läuft.

Gibt es noch etwas? Komischerweise fragen Sie! Es gibt zwei Co-Projekte im Svelte-Ökosystem: Sapper und Native. Sapper ist ein Framework, das Svelte für den Aufbau vollständiger Webanwendungen nutzt, einschließlich Routing, Service Workers und all dem guten Zeug, das Sie für den Einstieg benötigen. Ich habe es verwendet, um meine persönliche Website neu zu erstellen, und bisher bin ich ein Fan. Svelte Native ist das experimentellste der Svelte-Projekte, ein NativeScript Mobile App Builder, der Svelte im Hintergrund nutzt. Ich gebe zu, dass meine Kenntnisse auf diesem Gebiet dort enden. Glücklicherweise gibt es eine Website mit weiteren Informationen.

Was denken Sie? Haben Sie Svelte ausprobiert? Glauben Sie, es kann mit anderen Frameworks mithalten? Lassen Sie es uns in den Kommentaren diskutieren!