kutombawewe.net

Vor- und Nachteile von Facebook React gegen Webkomponenten (Polymer)

Was sind die Hauptvorteile von Facebooks React gegenüber der kommenden Web Components Spezifikation und umgekehrt (oder vielleicht wäre ein Vergleich von Äpfeln zu Äpfeln mit Googles ) Polymer Bibliothek)?

Laut dieser JSConf EU-Diskussion und der React Homepage) sind die Hauptvorteile von React:)

  • Entkopplung und erhöhte Kohäsion mit einem Komponentenmodell
  • Abstraktion, Zusammensetzung und Ausdruckskraft
  • Virtuelle DOM- und synthetische Ereignisse (was im Grunde bedeutet, dass sie das DOM und sein Ereignissystem vollständig neu implementiert haben)
    • Aktiviert modernes HTML5-Ereignismaterial auf IE 8
    • Serverseitiges Rendern
    • Testbarkeit
    • Bindungen an SVG, VML und <canvas>

Fast alles, was erwähnt wird, wird nativ über Webkomponenten in Browser integriert, mit Ausnahme dieses virtuellen DOM-Konzepts (offensichtlich). Ich kann sehen, wie nützlich das virtuelle DOM und synthetische Ereignisse heute sein können, um alte Browser zu unterstützen, aber wirft man nicht einen großen Teil des nativen Browser-Codes weg, als würde man sich langfristig in den Fuß schießen? Ist das für moderne Browser nicht eine Menge unnötiger Overhead/Neuerfindung des Rades?

Hier sind einige Dinge, von denen ich denke, dass React fehlt, dass Web Components sich um Sie kümmert. Korrigieren Sie mich, wenn ich 'Ich liege falsch.

  • Native Browser-Unterstützung (lesen Sie "garantiert schneller")
  • Schreiben Sie ein Skript in einer Skriptsprache, schreiben Sie Stile in einer Stilsprache und schreiben Sie ein Markup in einer Markup-Sprache.
  • Stilkapselung mit Shadow DOM
    • React hat stattdessen this , was das Schreiben von CSS in JavaScript erfordert. Nicht hübsch.
  • Zweiwegebindung
528
CletusW

Die React Jungs haben eine ziemlich gute Erklärung zum Vergleich zwischen React und Webkomponenten:

Der Versuch, React mit WebComponents zu vergleichen und gegenüberzustellen, führt unweigerlich zu falschen Schlussfolgerungen, da die beiden Bibliotheken zur Lösung unterschiedlicher Probleme erstellt wurden. WebComponents bieten eine starke Kapselung für wiederverwendbare Komponenten, während React eine deklarative Bibliothek bereitstellt, die das DOM mit Ihren Daten synchron hält. Die beiden Ziele ergänzen sich; Ingenieure können die Technologien kombinieren. Als Entwickler können Sie React in Ihren WebComponents oder WebComponents in React oder beides verwenden.

17
Erik Kaplun

Polymer ist großartig. React ist großartig. Sie sind nicht dasselbe.

Polymer ist eine Bibliothek zum Erstellen abwärtskompatibler Webkomponenten.

React ist das V in MVC. Es ist die Aussicht und sonst nichts. Zumindest nicht von alleine.

Reagieren ist kein Framework.

React + Flux + Node + (Gulp oder Grunt) ist eher mit einem Framework vergleichbar, aber 3 dieser Dinge sind überhaupt nicht Teil von React.

Es gibt viele Technologien, Muster und Architekturstile, denen Entwickler folgen, aber selbst zu reagieren ist kein Framework.

Es ist traurig, dass sich niemand die Zeit genommen hat, das Einfachste zu sagen, dass sie nicht verglichen werden sollten. Sie haben einige Überlappungen, aber sie unterscheiden sich mehr als die gleichen.

Mit beiden können Sie Webkomponenten definieren, jedoch auf unterschiedliche Weise. Darüber hinaus sind sie sehr, sehr unterschiedliche Werkzeuge.

17
Robotsushi

Eine weitere Antwort in einem Punkt speziell:

Schreiben Sie JavaScript in Vanilla JavaScript, schreiben Sie CSS in CSS, schreiben Sie HTML in HTML.

Nichts hindert Sie daran, Javascript beispielsweise in CoffeeScript, TypeScript, ClojureScript oder irgendetwas anderem zu schreiben. Es ist nur eine Frage der Präferenz.

HTML ist das beste DSL für statische HTML-Dokumente. Für dynamisches HTML bietet es jedoch nichts. Und im Browser ist Javascript die beste Sprache, um HTML dynamisch zu machen, nicht reines HTML mit Ad-hoc-Javascript-DOM-Manipulation oder Vorlagensprache wie Lenkern, die nicht einmal halbe Sprachen sind.

Wenn Ihr CSS für CSS statisch ist, schreiben Sie es wie gewohnt. Wenn es basierend auf einigen Laufzeitwerten dynamisch sein muss, ist es die gleiche Geschichte wie HTML: Javascript ist der beste Weg, um es dynamisch zu machen.

15
DjebbZ

Ich habe keine Webkomponenten verwendet, aber es sieht so aus, als müssten Sie den Ereignishandlern manuell codierte Mutationslogik hinzufügen.

ausschnitt aus Polymer Beispiel:

 <script>
   Polymer({
     counterChanged: function() {
       this.$.counterVal.classList.add('highlight');
     },
 ...

Der springende Punkt bei React ist die Reduzierung der Komplexität durch Eliminierung der Mutationslogik. Stattdessen regenerieren Sie naiv ein virtuelles DOM und lassen den Diff-Algorithmus von React herausfinden, was sich im realen DOM ändern muss.

6
limscoder

Ich denke, der größte Nachteil von React ist meiner Meinung nach, dass es nicht auf Webstandards basiert. React ist derzeit ein sehr leistungsfähiges Tool. Da es jedoch so viel von dem umgeht, was der Browser bietet, werden Entscheidungen, die jetzt sinnvoll erscheinen, in einigen Jahren wahrscheinlich keinen Sinn mehr ergeben, da die Browser so aufgebaut sind. in Einrichtungen weiter zu verbessern. Ich möchte darüber sprechen und wie sich dies auf einige verschiedene Aspekte von Webanwendungen auswirkt.

Leistung

Die Leute argumentieren gerne, dass der Vorteil von React darin besteht, dass das gesamte DOM- und Ereignismodell völlig neu erfunden wird und das vorhandene Standard-DOM schwer und teuer ist und was nicht, aber am Ende des Tages habe ich die Leistung von nicht gefunden React, um besser zu sein als das, was ich aus einer gut geschriebenen Backbone- oder Polymer - Anwendung herausholen kann. Tatsächlich war die Leistung von React in den meisten meiner Berufserfahrungen etwas schlechter. Das heißt nicht, dass React langsam ist ... Es ist einfach nicht die blutige Edge-Performance-Wahl, die wir alle dachten, bevor wir sie in die Hände bekommen haben.

In der Antwort von rsp weist er darauf hin, dass das DOM-Modell von React für ein div viel leichter ist als das native DOM-div, und das ist sicherlich wahr. Damit React jedoch nützlich ist, muss dieses 'virtuelle' Div irgendwann zu einem echten Div werden. In meiner Weltanschauung geht es also nicht um eine React Div gegen eine native Div. Es ist ein React Div + ein natives Div gegen nur ein natives Div. Der Overhead von Reacts DOM-Version ist nicht trivial. Wenn die Standards jemals einige dieser nicht benötigten Attribute löschen und die nativen DOM-Knoten viel leichter werden lassen, wird dieser Overhead plötzlich sehr teuer.

An einem meiner früheren Arbeitsorte hatten wir einige Anwendungen in Polymer und einige Anwendungen in React. Eine der frühen Polymer - Anwendungen wurde schließlich in React neu geschrieben, da dies der Standard des Unternehmens war und ich auf der Grundlage der Messungen die React - Version derselben Anwendung erstellt habe Es wurde etwa 30% mehr Speicher als in der Polymer - Version verwendet, und obwohl der Unterschied gering war, wurde die Polymer - Version ebenfalls in kürzerer Zeit gerendert. Eine Sache, die hier berücksichtigt werden muss, ist, dass es sich um Anwendungen handelt, die von Personen geschrieben wurden, und dass Personen nicht perfekt sind. Daher ist es möglich, dass die React - Implementierung dieser Anwendung nicht alles ausnutzt React ist in der Lage. Aber ich denke, zumindest ein Teil davon hat mit dem Overhead React zu tun, der durch eine eigene Version des DOM entsteht.

React erfindet das gesamte DOM mithilfe seines eigenen Modells neu und verwendet dieses dann für eine umfassende Leistungsoptimierung. Eine Ansicht wird in ein virtuelles DOM gerendert und in das reale DOM projiziert. Wenn eine Änderung vorgenommen wird und die Ansicht aktualisiert werden muss, wird die Ansicht erneut frisch in ein virtuelles DOM gerendert, und dieser Baum unterscheidet sich vom vorherigen Baum, um zu bestimmen, welche Knoten im realen DOM geändert werden müssen, um diese Änderung widerzuspiegeln in der Ansicht. Dies ist zwar ein sehr cleverer Ansatz für effiziente DOM-Aktualisierungen, es ist jedoch ein Overhead, all diese virtuellen DOM-Bäume zu verwalten und zu unterscheiden, um zu bestimmen, was im realen DOM geändert werden soll. Derzeit wird dieser Overhead durch die Leistungsvorteile erheblich ausgeglichen. Wenn sich das native DOM jedoch im Laufe der Zeit verbessert, verschiebt sich die Skalierung in die andere Richtung. Ich mache mir Sorgen darüber, wie React Apps altern könnten und ob sie in 3 Jahren viel langsamer sind als Dinge, die sich direkter mit dem DOM befassen. Dieser virtuelle DOM-Ansatz ist ein bisschen wie ein Vorschlaghammer, und andere Bibliotheken wie Polymer konnten sehr effiziente Ansätze für einen viel subtileren Umgang mit dem DOM implementieren.

Update für die Leistung: Eine der Bibliotheken, über die ich vor einiger Zeit gestolpert bin, erledigt meiner Meinung nach die Verwaltung von Updates für das DOM besser. Es handelt sich um die inkrementelle Dom-Bibliothek von Google, und ich denke, dass die Tatsache, dass sie mit dem Dom vor Ort funktioniert und keine "virtuelle Kopie" erstellen muss, ein viel saubererer Ansatz mit viel weniger Speicheraufwand ist. Weitere Informationen finden Sie hier: http://google.github.io/incremental-dom/#about

Deklarative vs. imperative Komponenten

Eines der Dinge, die Sie immer hören, wenn Sie über die Komponentisierung Ihrer Anwendung sprechen, ist, dass alle Vorteile Ihrer Komponenten deklarativ sind. In Reacts Weltanschauung ist alles schön und deklarativ. Sie schreiben JavaScript, das Markup zurückgibt, und React klebt alles für Sie zusammen. Und das ist großartig, wenn Sie es mit einer brandneuen Anwendung zu tun haben, die nur React und sonst nichts verwendet. Sie können eine Komponente schreiben. Solange Sie sich in einem React -Eigenen Teil des DOM befinden, ist es so einfach, dieses Tag auf die Seite zu setzen, um Ihre Komponente zu verbrauchen.

Sobald Sie diese Komponenten jedoch außerhalb von React verwenden, werden die Dinge viel chaotischer. Da die Art und Weise, wie React - Komponenten zu Tags verarbeitet werden, völlig außerhalb der von den Webstandards bereitgestellten Standards liegt, weiß nichts anderes als React, wie Sie diese Komponenten deklarativ nutzen können. Wenn ich React - Komponenten in eine vorhandene Backbone-Ansicht einfügen möchte, die Lenkervorlagen verwendet, müssen Sie in Ihrer Vorlage ein Dummy-Div mit einer Klasse oder ID rendern, die Sie als Handle verwenden können, und dann zwingendes JavaScript schreiben, um dies zu finden Dummy Div und montieren Sie Ihre Komponente darin. Haben Sie eine Express.js-Anwendung, die serverseitige Vorlagen verwendet? Nun, es ist das gleiche Lied und der gleiche Tanz. Eine JSP-Seite? Sie lachen, aber es gibt eine Menge Anwendungen, die sie noch verwenden. Sofern Sie keine Art von Startup ohne vorhandenen Code sind, müssen Sie einige Installationsarbeiten ausführen, um Ihre React - Komponenten in vielen Anwendungen wiederzuverwenden. In der Zwischenzeit erreicht Polymer Komponenten über den Standard für Webkomponenten. Mithilfe der Spezifikation für benutzerdefinierte Elemente kann Polymer Komponenten erstellen, die der Browser nur von Haus aus verwenden kann. Ich kann eine Polymer - Komponente in eine JSP-Seite, eine Express.js-Vorlage, eine ASP.NET-Ansicht, eine Backbone-Ansicht ... sogar in eine React - Komponente einfügen. Buchstäblich überall dort, wo Sie HTML verwenden können, können Sie eine Polymer - Komponente verwenden. Leute, die für die Wiederverwendung konstruiert sind, suchen nach Webstandards, weil Standards der Vertrag sind, der es einfach macht, Dinge miteinander kompatibel zu machen. YouTube verfasst immer mehr Inhalte in Polymer (Quelle: http://react-etc.net/entry/youtube-is-being-rebuilt-on-web-components-and-polymer ), und ich kann mir nur vorstellen, dass der auf Standards basierende Aspekt von Polymer der Grund dafür ist. Dieser YouTube-Player in der Mitte der YouTube-Seite könnte in eine Komponente umgewandelt werden, die eine Inhaltsquelle als Eigenschaft verwendet, und plötzlich kann jeder, der den YouTube-Player in seine Seite einbetten möchte, buchstäblich denselben Player-Code verwenden, den YouTube verwendet und sie können dies einfach tun, indem sie ein Tag in ihre Seite stecken.

Zusammenfassung

Ich kann sehen, dass es momentan definitiv einige ansprechende Aspekte von React gibt. Wenn Sie nur Reagieren verwenden, können Sie einige Widgets und einige Komponenten erstellen und deklarativ überall wiederverwenden. Aber ich denke, React wäre viel besser dran gewesen, wenn es einige der Standards für Webkomponenten verwendet hätte, um das zu erreichen, was es tut, anstatt einen Browser innerhalb eines Browsers und einen komplexen Mechanismus zu erstellen, um alles zu behalten synchron.

6
Dogs