Get best of the week

Ist es Zeit, React zu vergessen und auf Svelte zu aktualisieren?

Jedes Jahr wird ein Staat JavaScript Studie veröffentlicht , die die Ergebnisse einer Umfrage fasst den aktuellen Stand des JavaScript - Ökosystem zu untersuchen. Diese Studie behandelt Front-End-Frameworks, Server- und Mobile-Entwicklung, Tests, beliebte Ressourcen für Entwickler und vieles mehr.

Alles dreht sich natürlich um JavaScript. Wenn Sie JS für die Webentwicklung verwenden, empfehle ich daher dringend, einen Blick auf den Status von JavaScript zu werfen, falls Sie dies noch nicht getan haben.

Für mich war eines der interessantesten Ergebnisse von State of JavaScript die unerwartete Aufmerksamkeit derjenigen, die an der Umfrage teilgenommen haben, auf das Svelte- Front-End-Framework .

Im Gesamtranking der führenden Front-End-Tools (basierend auf Indikatoren für das Bewusstsein für das Framework, das Interesse daran und die Zufriedenheit damit) belegte Svelte den zweiten Platz. Er geht direkt nach React dorthin , vor bekannten Tools wie Vue.js , Preact , Angular und Ember .
Dies hat mich ein wenig schockiert, da Svelte sowohl in Bezug auf das Alter als auch in Bezug auf das Softwareentwicklungsparadigma ein relativ neues Tool ist.


Ranking von Frontend-Frameworks basierend auf dem Stand der JavaScript-Forschung

Ich weiß, dass viele von Ihnen hier empört sein können und sagen, dass React und Svelte dennoch keine Frameworks, sondern Bibliotheken sind. Ich weiß das, aber der Forschungsbericht wurde nicht von mir geschrieben, also lassen Sie uns die Frage der Terminologie dazu schließen.

Ich habe ein Beispiel für ein Svelte-Vorlagenprojekt gefunden und eine kleine Hello World-Anwendung erstellt.


Links ist das einfachste React-Projekt. Auf der rechten Seite ist ein ähnliches Projekt zu sehen, das auf Svelte basiert.

Obwohl es nicht schwierig war, dieses einfache Projekt in einen funktionierenden Zustand zu versetzen, wird jemand, der zuvor über React geschrieben hat, einige Zeit brauchen, um Svelte zu beherrschen.

Lohnt es sich, Svelte zu lernen? Vielleicht stehen wir nur vor einer anderen modischen Sache, die so schnell verschwindet, wie sie erschienen ist? Ich schlage vor, es herauszufinden.

Zweck der Studie


Ich möchte die folgende Frage beantworten: "Soll ich aufhören, Zeit mit dem Lernen zu verschwenden? Reagieren und anfangen, mit Svelte umzugehen?"

Wir werden nach der Antwort auf diese Frage suchen, indem wir die grundlegenden Unterschiede zwischen React und Svelte untersuchen. Auf diese Weise können wir verstehen, welche einzigartigen Eigenschaften jedes dieser Tools aufweist. Als Ergebnis werden wir herausfinden, in welche es sich zu investieren lohnt.

Wir beginnen mit einer Überprüfung jeder Bibliothek, sprechen dann über ihre Vor- und Nachteile und ziehen dann Schlussfolgerungen.

Reagieren


In den letzten Jahren haben buchstäblich alle über React gesprochen. Diese von Facebook erstellte Bibliothek eroberte schnell die Welt der Webentwicklung. Jetzt ist es ein Webentwicklungstool, das den ersten Platz auf der Welt einnimmt (die Wahrheit, die Antwort auf die Frage „Nummer eins“ oder nicht, hängt davon ab, wer diese Frage gestellt bekommt).

Die React-Bibliothek wächst heutzutage, zum großen Teil dank der Community, schneller als je zuvor. Und obwohl es keine Anzeichen für eine Verlangsamung dieses Wachstums gibt.

Hier sind drei React-Funktionen, die diese Bibliothek besonders attraktiv machen:

  1. Deklarativer Charakter.
  2. Komponentenbasierte Anwendungsstruktur.
  3. Benutzerfreundlichkeit bei der Integration in einen vorhandenen Technologie-Stack.

Der deklarative Charakter von React ermöglicht es Ihnen, interaktive Benutzeroberflächen zu erstellen. Für den Programmierer reicht es aus, einfach die visuellen Elemente der Anwendung für jeden Status zu entwerfen. Danach erledigt React den Rest. Dies vereinfacht das Lesen und Verstehen des Codes und erleichtert das Debuggen.

Wie macht React den Rest? Durch den Einsatz der virtuellen DOM-Technologie. Die Bestimmung, welche Teile des DOM aktualisiert werden müssen, erfolgt im Darm der Bibliothek auf einer Zwischenebene zwischen dem vom Programmierer geschriebenen Code und dem realen DOM. Dank dieser Technologie können hohe Seitenwiedergabegeschwindigkeiten garantiert werden.

Die React-Bibliothek ist so konzipiert, dass es keine Rolle spielt, welche Technologien genau im Stapel der Entwicklertools verwendet werden. Das React-Frontend kann an alles "angeschraubt" werden. Zum Beispiel Backends, die auf Node.js , Ruby on Rails , Spring Boot , PHP usw. basieren . Diese Bibliothek ist völlig neutral in Bezug auf das, womit sie interagieren muss.

Warum nennen manche React eine "Bibliothek" und manche ein "Framework"? Um eine bestimmte Anwendung zusammen mit React zu erstellen, müssen Sie zusätzliche Bibliotheken verwenden, um den Status der Anwendung zu steuern, das Routing durchzuführen und mit verschiedenen APIs zu interagieren. Wenn Sie eine React-Projektvorlage mit erstellencreate-react-app - Es wird keine bestimmten Tools geben, die vom Framework erwartet werden könnten.

Svelte


Svelte ist ein Tool, das entwickelt wurde, um die Situation im Bereich der Frontend-Entwicklung zu ändern. Hier ist ein gutes Video zu Svelte 3, in dem Rich Harris, der Schöpfer von Svelte, sehr interessant und emotional über diese Bibliothek spricht. Wenn Sie dieses Video noch nicht gesehen haben, empfehle ich Ihnen, es sich anzusehen.

In dieser Präsentation wird die Geschichte der reaktiven Programmierung gut dargestellt, die Mängel der traditionellen Implementierung reaktiver Mechanismen werden hervorgehoben und die Lösung der entsprechenden Probleme vorgestellt.

Vieles, was auf Reacts Stärken zurückgeführt werden kann, ist das Fundament von Svelte. Rich Harris kennt die Vor- und Nachteile der React-Interna sehr gut.

React hält die Benutzeroberfläche auf dem neuesten Stand und führt andere Aktionen direkt im Browser aus. Svelte erledigt seine Arbeit während der Erstellung des Projekts. Dies ist der Hauptunterschied zwischen React und Svelte. In der Svelte-Dokumentation heißt es dazu: "Svelte konvertiert Ihre Anwendung während der Erstellung des Projekts in perfekten JavaScript-Code, anstatt den Anwendungscode während der Ausführung zu interpretieren."

Svelte verwendet keine Technik wie den Vergleich des realen und des virtuellen DOM.

Der Svelte-Compiler nimmt eine deklarative Komponente und wandelt sie in einen effizienten, imperativen Code auf niedriger Ebene um, der direkt mit dem DOM interagiert.

Da Svelte den Compiler und nicht das virtuelle DOM verwendet, können Sie die Belastung des Browsers verringern, die Geschwindigkeit der Seiten erhöhen und der JS-Engine des Browsers das Sammeln von Müll erleichtern. Der Browser muss einige Aufgaben während der Ausführung des Seitencodes nicht lösen, was die Produktivität von Projekten verbessert.

Richtig, wie React verwendet Svelte Komponenten, die in einem deklarativen Stil geschrieben sind. Der größte Teil des Unterschieds zwischen React und Svelte beginnt nach dem Erstellen des Svelte-Projekts.

Stärken und Schwächen von React und Svelte


Lassen Sie uns über die Stärken und Schwächen der untersuchten Bibliotheken sprechen.

▍ Reaktionsstärken


  • Starke Community-Unterstützung.
  • Viele Bibliotheken zum Testen von Code, der auf React basiert.
  • TypeScript-Unterstützung.
  • Qualitätsentwickler-Tools.
  • , .
  • React-.

▍ Svelte


  • , , Svelte.
  • - (HTML, CSS, JS).

    • JSX .
  • .

    • Svelte- 40% , React-.
  • ( ).
  • .

▍ React


  • DOM — .
  • .
  • .
  • - React.
  • JSX- .

▍ Svelte


  • ( React) .
  • TypeScript.
  • , , , .
  • , Svelte ( , ).


Zurück zu unserer Frage: "Soll ich aufhören, Zeit mit dem Lernen zu verschwenden? Reagieren und anfangen, mit Svelte umzugehen?"

Ehrlich gesagt habe ich mit der Arbeit an diesem Artikel begonnen, in der Erwartung, zu dem Schluss zu kommen, dass Svelte eine zu junge Technologie ist und es sich nicht lohnt, besonders viel Zeit in ihre Studie zu investieren. Aber nachdem ich herausgefunden hatte, was los war, nachdem ich mich mit den Grundlagen befasst hatte, war ich sehr fasziniert und beeindruckt von dem, was mir offenbart wurde, von welcher Art von Dynamik von Svelte ich fühlte.

Es ist unbestreitbar, dass Svelte-Projekte eine sehr gute Leistung aufweisen.

Die Ideen hinter Svelte sehen mutig und progressiv aus. Die Größe der Svelte-Gemeinde wächst. Ich bin sicher, dass der Erfolg von Front-End-Tools (sowie die Breite ihrer Verbreitung) stark von der Community und der Art und Weise abhängt, wie Entwickler diese Tools einsetzen.

Infolgedessen können wir sagen, dass wir die weitverbreitete Verbreitung dieser Technologie erwarten können, wenn sich Svelte und alles, was mit dieser Bibliothek zu tun hat, im gleichen Tempo weiterentwickelt.

Natürlich beginnt Svelte gerade erst seine Reise, daher wissen wir noch nichts über diese Probleme, und es kann viele davon geben, die während der Implementierung von Svelte in realen Projekten unvermeidlich auftreten werden. Wir wissen nicht, wie Programmierer diese Probleme umgehen und wie Bibliotheksentwickler sie verbessern werden.

Als die React-Bibliothek zum ersten Mal erschien, sah sie aus wie ein hochmodernes Tool, das überhaupt keine Nachteile aufweist. Als sich React entwickelte und verbreitete, stellte sich heraus, dass Webentwickler mit verschiedenen schwierigen Situationen fertig werden mussten und nach Problemumgehungen und Kompromissen suchen mussten. Und die Entwickler der Bibliothek selbst müssen hart arbeiten, um sie zu verbessern.

Ich bin sicher, Svelte wartet darauf. Schließlich ist die Welt der Webentwicklung äußerst volatil.

Wenn Sie noch nicht bereit sind, React zu verlassen, würde ich Ihnen zumindest raten, Svelte genau zu überwachen. Diese Bibliothek kann ein starker Konkurrent werden, um viel schneller zu reagieren, als Sie sich vorstellen können.

Liebe Leser! Was denkst du über Svelte?

More articles:


All Articles