Die klarere Alternative

Wenn es um JavaScript-Entwicklung für das Frontend geht, ist React seit Jahren der unumstrittene Platzhirsch. In den Umfragen unter Entwicklern, die die Platform Stack Overflow jährlich durchführt, ist die Bibliothek seit 2021 nicht mehr unter 40% Popularität in ihrem Bereich gesunken. Mehr als ein Drittel aller Projekte werden also laut dem Stack Overflow Developer Survey mit React entwickelt. Dahinter folgen unter anderem Angular mit um die 20%, oder Vue.js mit etwa 15 bis 18%.

Neben diesen gewichtigen Playern gibt es aber auch weitere Bibliotheken oder Frameworks, die einen Blick wert sein können. Dazu zählt Svelte. Die Bibliothek liegt zwar bei der Popularität insgesamt regelmäßig nur im Bereich von 3 bis 6%. Aber ein anderes Ergebnis aus der Developer Survey lässt aufhorchen: Bei der Frage, welche Bibliothek die Entwickler gerne einsetzen würden (in der Auswertung als “desired” bezeichnet), kam Svelte in der Umfrage 2023 auf rund 14% (React hier mit 35,25%). Ging es darum, welche bisher eingesetzte Bibliothek die Entwickler gerne weiterhin verwenden würden (“admired”), setzte sich Svelte sogar fast an die Spitze mit knapp 75% (React knapp 64%).

Dazu kommt die Tatsache, dass erst vor rund zwei Wochen die Version 5.0.0 von Svelte veröffentlich wurde. Also Grund genug, der Bibliothek zumindest mal einen näheren Blick zu gönnen.

Hier soll es vor allem um eine Gegenüberstellung gehen, wie eine Komponente in React und wie in Svelte aussieht. JavaScript (die Programmiersprache hinter den meisten der genannten Tools) ist ja nicht unbedingt dafür bekannt, besonders klar, verständlich und lesefreundlich zu sein. Das merkt man, wie wir finden, React auch an. Die HTML-Struktur eine Komponente wird in React als JSX-Fragment definiert. JSX ist eine Syntax-Erweiterung für JavaScript, die im Lauf der Entwicklung mit React in “echtes” JavaScript umgewandelt wird.

const name = "Max Mustermann";
const element = (
  <div>
    <h1>Hallo, {name}</h1>
    <p className="welcome">Willkommen bei React.</p>
  </div>
);

h1 {
  font-size: 4em;
  font-weight: 100%;
}

.welcome {
  color: lightblue;
}

JSX und CSS befinden sich dabei in getrennten Dateien, beispielsweise mycomponent.jsx und mycomponent.css. Wird die Komponente komplexer, wird auch der Code komplexer als in diesem einfachen Beispiel. In Svelte sieht ein vergleichbares Beispiel so aus:

<script>
    const name = "Max Mustermann";
</script>

<div>
  <h1>Hallo, {name}</h1>
    <p className="welcome">Willkommen bei Svelte.</p>
</div>

<style>
  h1 {
    font-size: 4em;
    font-weight: 100%;
  }

  .welcome {
    color: lightblue;
  }
</style>

Markup und Stylesheets befinden sich gesammelt in einer Datei, zum Beispiel in MyComponent.svelte.

Dieses kleine Beispiel sollte bereits einen Eindruck davon geben, dass (zumindest unserer Meinung nach) Svelte es deutlich einfacher macht, klaren und gut lesbaren Code zu schreiben als etwa React. Und Code, der klar und gut lesbar ist, ist in der Regel auch besser zu warten und zu überarbeiten. Besonders Entwickler, die Programmiersprachen wie Ruby bevorzugen, könnten (ebenfalls unsere persönliche Meinung) auch Gefallen an Svelte finden.

Natürlich kratzt das hier gezeigte Beispiel, sei es die React- oder die Svelte-Variante, nur an der Oberfläche dessen, was die beiden Bibliotheken bieten. Wer mehr erfahren möchte, findet in den Weiten des Internets reichlich Tutorials, Dokumentation und weitere Informationen. Auf der jeweiligen Homepage gibt es ein Svelte-Tutorial bzw. ein React-Tutorial.