Neue Front-End-Bibliotheken bei React Peripherals

Hallo habr

Wir wollten Ihnen heute einen interessanten Text über die Entwicklung des Frontends in unserer Zeit bzw. nach Meinung des Autors nach React anbieten . Wahrscheinlich könnte der Beitrag umfangreicher sein. Wenn der Autor eine Fortsetzung schreibt, werden wir auch versuchen, ihn nicht zu verpassen und zu übersetzen.

Willkommen bei Katze!

Kaum erschienen, änderte React sofort die Spielregeln. Er leitete eine neue Ära der clientseitigen Entwicklung ein. Sein unidirektionaler Datenstrom, JSX und seine deklarative Art, Repräsentationen zu definieren, waren einfach verrückt. React hat schnell immense Popularität erlangt, und auch heute, 6 Jahre später, bleibt es eine der beliebtesten Bibliotheken für das Frontend.

Das Front-End-Ökosystem entwickelt sich jedoch rasant, in diesem Bereich werden viele interessante Projekte entwickelt. Ich bin ständig auf der Suche nach der nächsten Technologie, die die Spielregeln noch einmal ändern wird. Ich mag es, wenn der Außenseiter von gestern auf Trab geht und unsere gewohnten Arbeitsmethoden völlig untergräbt - so wie es React vor 6 Jahren getan hat.

Die Freude, eine neue Technologie zu finden, die Ihnen hilft, produktiver als je zuvor zu werden, ist von unschätzbarem Wert. Es ist sehr wichtig zu untersuchen, was es neben React noch gibt, auch wenn Sie sich als React-Spezialist betrachten. Ein guter Entwickler wählt die Werkzeuge aus, die zur Lösung des Problems erforderlich sind. Er muss viele Paradigmen, Sprachen und Werkzeuge kennen.

Vor kurzem habe ich einige Recherchen durchgeführt, experimentiert und einige wirklich interessante Bibliotheken und neue Webstandards gefunden, die meiner Meinung nach Potenzial haben. Alles, worüber ich in diesem Beitrag sprechen werde, steht heute für die Produktion zur Verfügung. Diese Technologien können nicht als „Front Line“ bezeichnet werden, sind aber bisher nicht weit verbreitet.

Svelte

Beginnen wir mit völlig neuen Frameworks, die neue Denkweisen einführen, anstatt etwas zu transformieren, das bereits existiert. Das ist Svelte. Dies ist ein neues Paradigma im Ökosystem des Kunden.



Warum ist Svelte einzigartig? Grundsätzlich - aus zwei Gründen. Erstens werden wahnsinnig kleine Pakete darin erstellt, weil die Laufzeitumgebung darin nicht enthalten ist. Die Befürworter von Svelte bezeichnen dies als "Umgebung ohne Ausführung". Die React-Laufzeitumgebung wiegt ungefähr 100 KB und diese Menge wird über das Paket jeder React-Anwendung hinaus hinzugefügt.

Die zweite wichtige Tugend von Svelte ist die Syntax. Es ist so minimal, als gäbe es überhaupt keine Syntax. Wir werden darauf zurückkommen.

Svelte leiht sich viel von React and Vue . Wenn Sie Erfahrung mit React haben, wissen Sie bereits viel, und Sie werden kaum Zeit brauchen, um Svelte zu meistern.

Schauen wir uns einen Code an, um einen Eindruck von Svelte zu bekommen.

Um eine neue Komponente zu definieren, wird eine neue Datei erstellt und der Name dieser Datei ist der Name der Komponente. Diese Datei enthält einen optionalen Skriptabschnitt, einen optionalen Stilabschnitt und vor allem die HTML-Vorlage selbst. Svelte verwendet kein JSX, sondern eine eigene Vorlagensprache.

<script> export let counter; //      </script> <style> p { color: purple; } </style> <p>The counter is {counter}</p> 

Ein bisschen wie Vue, aber einfacher.

Die Syntax ... und es gibt keine bestimmte Syntax, es ist nur reines JavaScript. Möchten Sie einen Status festlegen? Erhöhen Sie einfach die Zählervariable.

 <script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> 

Nein this.setState . Keine useState Hooks. Nur Javascript. Mit solch kleinen Beispielen ist es schwierig, den gesamten Syntaxminimalismus zu bewerten. Ich habe das für einige Stunden programmiert, und es stellte sich als überproduktiv heraus, weil ich zur Lösung des Problems viel weniger Code schreiben musste. Mir kam es so vor, als würde ich rennen, und jemand anderes drückte mich in den Rücken. Als würde ich betrügen. Diese minimalistische Syntax ist eine Entscheidung, die die Entwickler von Svelte ganz bewusst getroffen haben. Sie selbst erklären in einem Beitrag, warum weniger Code geschrieben wird. Hier ist ein tolles Zitat aus diesem Artikel :

... mit zunehmender Codebasis erhöhen sich die Zeit für die Entwicklung eines Projekts und die Anzahl der Fehler eher quadratisch als linear. - Schreiben Sie weniger Code

Die wichtigste Komponente eines Web-Frameworks ist die Dokumentation. React ist berühmt für seine wunderbare Dokumentation, viele lernen es nur auf den Docks. Die Dokumentation von Svelte ist, soweit ich sehen kann, auch wirklich gut. Als Neuling bei Svelte gefallen mir die Beispiele in der Dokumentation für dieses Framework am besten:



In vielen Fällen weiß ich ungefähr, was ich brauche. Ändern Sie beispielsweise den Status einer Komponente, fügen Sie Ereignishandler hinzu, und rufen Sie einen globalen Status ab (wie in Redux). Als nächstes muss ich schnell sehen, wie das gemacht wird. Der Beispielteil ist ein Beispiel dieser Art. Ich muss keine Artikel in Blogs googeln oder Einträge auf Github ansehen. Durchsuchen Sie einfach den gewünschten Abschnitt. Schönheit!

Es gibt sogar etwas Ähnliches wie Gatsby und Next.js. Das Ding heißt Sapper , man beginnt sehr schnell damit zu programmieren. Ermöglicht das Erstellen von Anwendungen mit nur einer Seite und statisch generierten HTML-Seiten, ähnlich wie bei Gatsby / Next.js.

Svelte hat auch eine Alternative zu Redux, die Läden genannt wird. Sie sind unglaublich minimalistisch. Der Speicher wird folgendermaßen erstellt:

 import { writable } from 'svelte/store'; export const count = writable(0); 

Dann kann das Repository wie folgt aktualisiert werden.

 count.set(0); 

Es gibt überhaupt keinen stereotypen Code, und all diese Funktionen sind vollständig in Svelte integriert - keine zusätzlichen Abhängigkeiten. Erinnern Sie sich jetzt daran, wie viel Ärger das Hinzufügen von Redux im React-Projekt verursacht.

In welcher Beziehung steht das React-Team zu Svelte?

Das React-Team ist nicht so begeistert von Svelte wie ich. Sie glauben, dass die mit dem Verlassen der Laufzeitumgebung verbundene Leistungsverbesserung vernachlässigbar ist. Nur in ganz bestimmten Fällen, zum Beispiel bei der Arbeit mit integrierten Widgets usw. Ein solches Spiel ist die Kerze wert. Darüber hinaus gibt es Gatsby und Next. Daher bedeutet laut der React-Community eine leichte Geschwindigkeitssteigerung noch weniger (Entschuldigung, ich kann mich nicht erinnern, wo ich sie gelesen habe. Wenn Sie mich finden, teilen Sie mir dies auf Twitter mit, ich bin @karljakoblind ). In diesem Fall argumentiere ich, dass jede Geschwindigkeitsverbesserung wichtig ist, und 100-KB-Einsparungen für jedes Paket nur deshalb beiseite zu schieben, weil „dies nur mit Widgets nützlich ist“ ein schlechtes Argument ist. Um das Web großartig und erschwinglich zu machen, müssen wir alle Arten von Leistungsoptimierungen durchführen, die wir können. Wenn Sie jemals daran gearbeitet haben, eine Anwendung zu optimieren, um ihre Leistung zu verbessern, wissen Sie, wie viel selbst die kleinsten Verbesserungen bedeuten. Es ist die Summe aller kleinen Verbesserungen, die zu einem superschnellen Download führen, der wie von Zauberhand abläuft.

Soll ich Svelte probieren?

Wenn ich das nächste Mal ein Projekt starte, das mit React gut funktioniert, werde ich ernsthaft darüber nachdenken, ob ich stattdessen Svelte verwenden soll. Als ich Svelte studierte, war ich überrascht, wie produktiv dieses Framework ist, auch wenn Sie die Dokumentation nicht lesen. Ich habe nur Beispiele durchgearbeitet und ein wenig mit Sapper geübt - und trotzdem schien es mir, dass die Arbeit produktiver war als mit React. Ich denke, eine so hohe Produktivität hängt irgendwie mit der minimalistischen Syntax zusammen. Sehr wertvoll ist auch, dass wir ohne zusätzlichen Arbeitsaufwand so kompakte Pakete bekommen. Anwendungen, die schnell geladen werden, sind sowohl bei unseren Nutzern als auch bei Google sehr beliebt!

Hat Svelte irgendwelche Mängel? Ehrlich gesagt kommt nur einer in den Sinn. Tatsache ist, dass Svelte noch neu und wenig verbreitet ist. Daher ist seine Community begrenzt und, was vielleicht noch wichtiger ist, es gibt (noch?) Nicht viele Unternehmen, die Svelte-Spezialisten benötigen. Wenn Sie ein Junior-Entwickler sind und einen Job suchen, dann denke ich, dass Sie klüger sind, zuerst React zu lernen. Wenn Sie jedoch ein leitender Entwickler sind (oder ein Junior, und Sie haben viel Zeit), empfehle ich dringend, sich Svelte anzuschauen.

Weitere Details

svelte.dev - offizielle Seite
Video: Rich Harris - Reaktivität neu denken

Webkomponenten

Vielleicht sind Webkomponenten die nächste großartige Technologie? Ich denke, sie hat definitiv Potenzial. Was sind Webkomponenten?

Webkomponenten sind eine Reihe von w3c-Standards zum Erstellen neuer benutzerdefinierter HTML-Tags. Mit diesen Standards können Sie alles von Widgets bis hin zu großen Anwendungen erstellen.



In den meisten gängigen Browsern wird dieser neue Standard unterstützt:



In Internet Explorer werden solche Funktionen von Polyfills unterstützt.

Durch das Erstellen einer Webkomponente erstellen Sie ein neues natives DOM-Element. Die Situation ist anders als in React, wo ein „virtuelles DOM-Element“ erstellt wird, das anschließend im DOM implementiert wird.

 <my-component hello="world"></my-component> 

Das Schönste an Svelte war, dass es die Laufzeitumgebung aufräumt, und dasselbe gilt für Webkomponenten. Wenn Sie ein natives DOM-Element erstellen, benötigen Sie keine Laufzeitumgebung, ein normaler Browser reicht aus, um die Anwendung zu starten.
Da dies nur DOM-Elemente sind, kann jede Webseite sie verwenden. Sie können Widgets oder ganze Anwendungen erstellen, die dann in vorhandene Anwendungen eingebettet werden. Es spielt keine Rolle, auf was Sie programmieren - Angular, React, Vue oder etwas ganz anderes. Hierbei handelt es sich um die am häufigsten verwendeten DOM-Elemente, z. B. das <div> -Tag.

 <body> <my-app name="Hello world"></my-app> <script src="/my-app.js" type="module"></script> </body> 

Dies eröffnet dem Kunden völlig neue Möglichkeiten und Ansätze für die Architektur großer Angebote. Ein Beispiel hierfür sind Mikrofronten .

Sie können Webkomponenten direkt schreiben, dies ist jedoch aus entwicklungspolitischer Sicht keine gute Vorgehensweise. Es ist besser, ein Framework zu verwenden, das auf der Ebene der Webkomponenten kompiliert wird. Zwei beliebte Frameworks dieser Art sind Stencil.js und Polymer (von Google).

Bei der Verwendung von Webkomponenten sind ihre Pakete sehr kompakt, da es keine Laufzeitumgebung gibt. Sehen Sie sich folgende Benchmarks an:



Ist Ihnen die in dieser Liste erwähnte Svelte aufgefallen? Svelte kann bis zur Komponentenebene kompilieren, und das von ihm generierte Paket ist sehr klein.
Noch interessanter ist es jedoch, sich anzuschauen, wie klein alle Pakete von Webkomponenten-Frameworks im Vergleich zu den Paketen von "klassischen" Frameworks sind, z. B. "React" und "Angular".

Was ist mit Webkomponenten in React?

Laut custom-elements-everywhere.com kann React zwar auch für Webkomponenten kompilieren, unterstützt diese jedoch nicht.



Es kann jedoch zu einer vollständigen Unterstützung kommen. Vielleicht ist das React-Team gerade dabei, diesen Schritt zu tun, nachdem es ihn erst richtig durchdacht hat, bevor es ihn startet. Einer der Gründe für diese Umgehung ist, dass Webkomponenten einen imperativen Stil verwenden und keinen deklarativen wie in React. Möglicherweise wird eines Tages in React die vollständige Unterstützung für Webkomponenten angezeigt, oder möglicherweise nicht. Wenn Sie in der Zwischenzeit Webkomponenten erstellen möchten, verwenden Sie anstelle von React eine andere Bibliothek.

Soll ich Webkomponenten verwenden?

Es scheint mir, dass Webkomponenten am nützlichsten sind, wenn Sie sie in der Microfront-Architektur verwenden. Wenn Sie in einer großen Organisation arbeiten, in der viele Teams gleichzeitig mit verschiedenen Clientbibliotheken arbeiten, kann es eine nicht einfache Aufgabe sein, gemeinsam an Code in verschiedenen Teams zu arbeiten. In diesem Fall ist die Arbeitsweise anders als bei React. React ist darauf spezialisiert, eine gesamte Anwendung zu orchestrieren, anstatt Widgets zu erstellen. Wie Sie sehen, können React- und Webkomponenten friedlich miteinander koexistieren.

Webkomponenten haben ungefähr die gleichen Nachteile wie Svelte. Wenn Sie einen Lebenslauf einreichen, um einen Job zu bekommen, können Webkomponenten nicht als Priorität bezeichnet werden. Zumindest keine Priorität vor Reagieren. Meine Erfahrung zeigt, dass Unternehmen (noch?) Nicht so anspruchsvoll sind.

Letzte Gedanken

Bei der Entwicklung des Frontends ist viel Cooles und Interessantes im Gange. Reagieren ist nur eines der Frameworks, und Sie müssen nur navigieren, was außerhalb des Frameworks passiert.
Wenn Sie ein erfahrener Entwickler sind und sich auf Front-End spezialisieren, wählen Sie natürlich die besten Werkzeuge für die Arbeit aus. Dies ist oft eine Reaktion, aber vielleicht sind die Webkomponenten besser für Ihr nächstes Projekt.