Aphrodite vs. JSS

Zuallererst bin ich der Autor von JSS, also ja - ich bin voreingenommen, aber ich werde versuchen, so fair wie möglich zu bleiben, das verspreche ich.

Der Grund, warum ich diesen Beitrag schreibe, ist mein Gefühl, dass niemand die Unterschiede zwischen diesen beiden tief im Inneren kennt und dies verständlich ist. Mein Ziel ist es nicht zu zeigen, dass JSS besser ist, sondern dass Sie selbst entscheiden müssen. Mein Ziel ist es, Unterschiede aufzuzeigen, um Ihnen bei der Entscheidung zu helfen, was für Sie wichtig ist.

Verschiedene Sichtweisen.

Es sind Inline-Stile, aber sie funktionieren!

Aphrodite versucht, Inline-Stile zum Laufen zu bringen, indem CSS generiert wird.

Eine Bibliothek zum Generieren von CSS aus JavaScript.

JSS versucht, eine API zum Generieren von CSS aus JavaScript bereitzustellen. Das Ziel hierbei ist ein vorhersehbares Verhalten und eine höchstmögliche Leistung.

Unterschiede in diesen Perspektiven spiegeln sich sehr gut in den entsprechenden APIs wider.

Rendermodell.

Beide Bibliotheken kompilieren JavaScript in CSS, was bedeutet, dass beide am Ende ein "style" -Tag mit einem darin enthaltenen CSS-String generieren. Dies unterscheidet sich grundlegend von Inline-Stilen, die aus React bekannt sind.

Es gibt jedoch einen großen Unterschied zwischen der Implementierung von JSS und Aphrodite.

Aphrodite verwendet einen einzelnen Stilknoten und schreibt alle Regeln in diesen. Der Grund dafür ist die Einschränkung von IE9 und niedriger:

Ein Blatt kann bis zu 4095 Regeln enthalten
Ein Blatt kann bis zu 31 Blätter @importieren
Die @ Import-Verschachtelung unterstützt bis zu 4 Ebenen

Ich würde nicht empfehlen, JSS für diejenigen zu verwenden, die IE9 noch unterstützen. Es ist möglich, dies zu beheben. Ich habe einen Plan für ein alternatives Batch-Modus-Rendering-Backend, aber ich hatte keine Zeit, es tatsächlich zu implementieren.

Ich habe mehrere Gründe, warum ich JSS nicht standardmäßig auf Aphrodites Rendering-Modell umgestellt habe:

  1. Performance.
    Ein einzelner Write-to-Style-Knoten ist während des Anwendungslebenszyklus viel schneller als mehrere Schreibvorgänge. Aphrodite versucht, die Anzahl der Schreibvorgänge zu minimieren, indem sie Regeln sammelt und so schnell wie möglich verwendet. Dies bringt jedoch noch weitere Probleme mit sich, über die ich später sprechen werde.
  2. Transparenz
    Jedes Blatt in JSS entspricht einem Stilelement. Das bedeutet, dass jede Komponente ein Style-Tag im Kopf hat. Dies ist einfach zu debuggen. Sie können immer ein vollständiges Bild von CSS erhalten, das von einer bestimmten Komponente generiert wird.

Nebenbei bemerkt, das aktuelle Rendering von Aphrodite in älteren IEs ist schlampig, da es das CSS bei jedem Schreibvorgang aus der gesamten Anwendung in den Stilknoten schreibt. Dies sollte ältere IEs langsamer machen, je nachdem, wie viel CSS-Anwendung vorhanden ist.

JS API.

Aphrodite verwendet einen rein funktionalen Stil, den ich sehr mag. Der Preis ist allerdings einer Reihe von Einschränkungen unterworfen. Für z.B. Sie können nicht mehrere Aphrodite-Instanzen mit unterschiedlichen Optionen erstellen. Sie können die Bibliothek nicht erweitern, und die API ist sehr begrenzt.

Ein Beispiel ist ein sehr eigenwilliges Merkmal, das Aphrodite von Anfang an hat: Jeder Eigenschaftswert erhält das Suffix "! Wichtig". Für z.B. button: {color: ‘red’} ergibt so etwas wie .button_sdf24rs: {color: red! important}. Dies war ein Versuch, Isolationsprobleme zu beheben, funktioniert jedoch nicht bei allen. Die Lösung von Aphrodite für dieses Problem ist ein separater Einstiegspunkt "no-important.js", der keine geeignete Möglichkeit darstellt, optionale Funktionen einzuführen.

Da JSS als Abstraktion über CSS konzipiert wurde, sollten Sie in der Lage sein, alles zu tun, was Sie mit Lean JS to CSS tun können. Um eine maximale Anpassbarkeit zu erreichen, verfügt JSS über eine API für Plugins, mit der die Regeln geändert werden können, bevor sie im DOM gerendert werden. Dies ermöglicht es auch, den JSS-Kern klein und schnell zu halten. Alle Funktionen wie Vendor Prefixing, Nesting, Default Unit und viele andere sind als Plugins implementiert. Auf diese Weise können wir auch experimentelle Dinge wie die automatische Isolierung von Regeln und eine bessere JSON DSL-Syntax erstellen (probieren Sie sie aus!).

JSON DSL.

Aphrodite unterstützt kein globales CSS und wählt keine Geschwister oder Kinder aus. Das ist meistens eine sehr gute Sache!

Manchmal möchten Sie jedoch einen Selektor erstellen, der auf einen untergeordneten Knoten abzielt. Dies ist nicht schlecht, solange Sie nicht die inneren Stile des Knotens ändern. Das Ändern der Position und der Ränder von untergeordneten Elementen sollte ein Elternteil auf jeden Fall können. Dies kann in JSS mithilfe des in JSS geschachtelten Plugins erfolgen.

Theming.

Aphrodite verfügt über eine css () -Funktion, mit der Sie beim Rendern mehrere Regeln erstellen können. Dies ist in Bezug auf das Theming von Vorteil, da es jederzeit einfach ist, ein vom Elternteil bereitgestelltes Thema zu verwenden. Außerdem werden nur Stile gerendert, die Sie im aktuellen Status Ihrer Komponente wirklich verwenden.

Das Theming in JSS ist ebenfalls verfügbar, es ist jedoch weniger offensichtlich, wie dies zu tun ist, und es wird derzeit nicht vom Paket react-jss unterstützt, bei dem es sich um eine Integration von jss in react handelt.

JSS möchte die Stile rendern, bevor eine Komponente ihre Elemente rendert. Grundsätzlich möchte es die Kern- und Themenstile im Voraus kennen. Dies ist nicht immer bequem und für react-jss ein Änderungsthema. Der JSS-Kern selbst ist jedoch bereit. Sie können einem Arbeitsblatt jederzeit Regeln hinzufügen, da es über die Methoden .addRule () und .deleteRule () verfügt. Wahrscheinlich ist es effektiver, .detach () aufzurufen, bevor viele Regeln hinzugefügt werden, und dann erneut .attach (). Auf diese Weise werden sie alle auf einmal im DOM bereitgestellt.

Unvorhersehbares Rendering.

Aphrodite gibt Regeln an das DOM weiter, wenn sie verwendet werden, und das ist cool. Der Nachteil ist: Im Moment werden Ihre DOM-Knoten gerendert - CSS ist dies wahrscheinlich nicht, da CSS im nächsten Tick in das DOM gespült wird. Die Konsequenzen sind also:

  1. Sie müssen "setTimeout" verwenden, um auf berechnete Stile der DOM-Knoten zuzugreifen, die Sie gerade gerendert haben.
  2. Dies kann zu doppelten Neuberechnungen und Neulackierungen führen.

JSS wird nach dem Aufrufen der .attach () -Methode synchron gerendert. Es stellt eine CSS-Zeichenfolge für das style-Element bereit und fügt das Element in den Dokumentenkopf ein. Solange das Blatt nicht angehängt ist, können Sie Regeln ohne DOM-Overhead hinzufügen / entfernen und ändern. Danach können Sie dies auch tun, aber die Änderungen werden sofort auf DOM CSSRule angewendet.