React vs. Svelte: Ein Vergleich

Svelte ist ein JavaScript-Compiler, mit dem Sie Benutzeroberflächen auf reaktive Weise mithilfe einer benutzerdefinierten Syntax erstellen können. Während React-Frameworks den grössten Teil der Arbeit im Browser erledigen, überträgt Svelte diese Arbeit beim Erstellen der App auf einen Compiler. Es verwendet kein virtuelles DOM wie React, sondern schreibt Code, der das DOM chirurgisch aktualisiert, wenn sich der Status der App ändert. Der sehr wichtige Unterschied ist also, dass Svelte ein Compiler ist und React die DOM-Manipulation verwendet.

Dies bedeutet, dass Sie mit Svelte auch eine bestimmte Syntax verwenden, um Ihren Code zu schreiben, eine Komponente für Architektur, Markup und Stile mit Anweisungen von JavaScript. Wenn Sie jedoch Ihre Anwendung für die Produktion erstellen, führen Sie tatsächlich den Svelte-Compiler aus, der automatisch über den gesamten Code läuft Codedateien. Daher durchläuft der Complier das gesamte Projekt und erstellt eine bundle.js-Datei mit einer Reihe von JavaScript-Anweisungen, die dann zur Laufzeit im DOM ausgeführt werden. Es werden weder zusätzlicher Code oder ein zusätzliches Paket noch Framework-Code hinzugefügt, der zur Laufzeit ausgeführt wird.
Während in React beim Erstellen Ihrer Anwendung der Code während der Entwicklung zu einem gewissen Grad optimiert und kompiliert wird, funktioniert er dann in Verbindung mit der Bibliothek oder dem Framework-Paket. Sie müssen also sowohl Ihren optimierten Anwendungs- als auch Ihren Framework-Code ausliefern, was bedeutet, dass Sie offensichtlich mehr Code als nur eine Reihe von Anweisungen benötigen.

Svelte bietet Ihnen ein super kleines Bundle im Gegensatz zu React, das viel grösser ist, und auch der Code in Svelte ist hochoptimiert und während der Produktion sehr schnell.
Ein kleines Bündel und schneller Code sind wichtig, aber es ist nicht alles. In Svelte erhalten Sie eine Reihe von Kernfunktionen, mit denen Sie bei der Entwicklung arbeiten können. Sie haben eine Kernsyntax für die Ausgabe von Daten oder die Reaktion auf Ereignisse, aber das ist noch grundlegend. Es ist React sehr ähnlich. Bei React geht es darum, Komponenten zu erstellen, sie dann auf dem Bildschirm zu rendern und auf Benutzereingaben zu reagieren.
Svelte bietet keine zusätzlichen Verbesserungen wie zusätzliche Funktionen in React. React hat viele zusätzliche Verbesserungen und verbessert sich im Laufe der Jahre kontinuierlich. Darüber hinaus steuert React Ihren Code aktiv und führt ihn aus und versucht zu optimieren, wann das DOM aktualisiert wird, indem automatisch ein Ladespinner angezeigt wird, wenn Sie auf einige Daten warten. All dies sind einige Aufgaben hinter den Kulissen, bei denen React Ihnen hilft, was Svelte nicht tut.

Unten zeigen wir den Unterschied in ihrer Syntax. Beachten Sie, dass das Svelte-Snippet fast reines HTML / JS ist und weniger Codezeilen enthält als das React-Beispiel.

import React, { useState } from 'react'

function Example () {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

Und hier ist es die Svelte App

<script>
  let count = 0
</script>

<div>
  <p>You clicked {count} times</p>
  <button on:click={() => count+= 1}>
    Click me
  </button>
</div>

Beachten Sie, dass die Svelte-App bei DOM-Ereignissen anstelle der vordefinierten JavaScript-Syntax eine benutzerdefinierte Syntax verwendet. React hat "onClick", während Svelte "on: click" hat.

Svelte ist ein beliebtes neues Framework, aber mit einer kleinen Community. Obwohl es im Laufe der Jahre immer beliebter wird, ist es im Vergleich zum React-Framework immer noch klein. React ist äusserst beliebt und relativ ausgereift und wird insbesondere bei React Hooks sehr aktiv entwickelt und von grossen Unternehmen eingesetzt.
Laut npmtrends hat Svelte in den letzten 6 Monaten Aufmerksamkeit erhalten, kämpft jedoch immer noch um die Akzeptanz mit 120.238 Downloads, während React eine Rate von 9.626.409 aufweist Downloads, was es zu einem signifikanten Unterschied zwischen ihnen macht.

Aufgrund der oben genannten Unterschiede zwischen den Frameworks ist Svelte in der Laufzeit sehr schnell und wird mit kleinen Bundles und weniger Codezeilen geliefert. Es ist auch kein Framework-Code erforderlich, um ihn zur Laufzeit hinzuzufügen. Im Gegensatz dazu hat React eine aktivere Community und mehr Verbesserungen bei bestimmten Funktionen und wird daher häufig verwendet. Aufgrund des webbasierten Modells von HTML, CSS und JavaScript ist die Arbeit mit Svelte einfacher. In React müssen Sie zusätzliche Erweiterungen wie JSX-Syntax und CSS lernen, die in Js integriert sind.
Abhängig von der Grösse der Anwendung wird React jedoch für grosse und komplexe Anwendungen bevorzugt, da es mehr Plugins bietet, während Svelte für kleinere Apps oder für Apps im täglichen Gebrauch bevorzugt wird.
Insgesamt sind beide für Benutzeroberflächen praktisch und effizient, und es liegt an Ihren Vorlieben, zwischen ihnen zu wählen.