🤖 👨🏼‍🤝‍👨🏻 👨‍👩‍👦 So integrieren Sie ReactJS in 1C-Bitrix mit der automatischen Generierung von Vorlagen im Back-End am Beispiel des Globus-Netzwerks 🧕🏽 💆🏼 🌙

In diesem Jahr wurde ReactJS erstmals für den Online-Shop der Globus-Hypermarktkette eingeführt. Das Projekt ist insofern interessant, als es die Funktionen der Bitrix-Plattform erweitert und gleichzeitig die Möglichkeit behält, Seiten für Suchmaschinen zu generieren, und nicht mit doppelten Codes und Layouts überfüllt ist. In diesem Artikel wird erläutert, wie Sie Bitrix-Komponenten mit ReactJS-Komponenten mithilfe des v8js-Moduls für PHP verbinden und den vorderen Hauptteil der Site speichern.

Warum wurde das gebraucht?

Zunächst wurde die Logik der Website des Online-Shops auf der Bibliothek Marionette.js aufgebaut. Vor einigen Jahren hat sich diese Logik ausgezahlt, aber im Laufe der Zeit sind die Geschäftsanforderungen für die Front-End-Funktionalität so stark gestiegen, dass jede Verfeinerung mit ernsthaften Schwierigkeiten einherging. Aufgrund der hohen Belastung nahm die Geschwindigkeit des Vorderteils ab und ließ zu wünschen übrig. Um dieses Problem zu lösen, haben wir ReactJS gewählt. Es gab jedoch ein Problem beim Rendern von Seiten im Back-End und beim Verknüpfen von Teilen der Seiten, um auf Komponenten zu reagieren. Gleichzeitig war unser Ziel ein schrittweiser Übergang zu ReactJS, as Dramatische Änderungen könnten zu einer vollständigen Neugestaltung der Front führen. Infolgedessen fiel die Auswahl auf folgende Komponenten:

Produktkarten;
Minikorb;
Menü

Die Hauptschwierigkeit beim Übertragen von Minikörben und Produktkarten an ReactJS war die sofortige Synchronisation der Warenmenge in beiden Komponenten, d. H. Befinden sich 3 kg Karotten im Warenkorb, sollten im Block zum Hinzufügen von Waren zum Warenkorb (Kommissionierer) 3 kg angezeigt werden. Wenn sich die Warenmenge im Minikorb ändert, sollte die Änderung im Kommissionierer erfolgen und umgekehrt. Außerdem musste die Verzögerung der Back-End-Anforderungen ausgeglichen werden, damit die Schnittstelle so schnell wie möglich funktionierte.

""

Eine zusätzliche Komplexität war die Spezifität des Geschäfts (Lebensmitteleinzelhandel), in dem das Konzept der stückgewichteten Waren besteht. Dies ist ein Produkt, das in kg angegeben wird, aber der Benutzer kauft es in Stücken, zum Beispiel eine Wassermelone, die der Kunde nicht teilweise, sondern nur vollständig kaufen kann. Ein solches Produkt für den Benutzer sollte in der Stückzahl angezeigt werden, im Back-End wird es jedoch in Kilogramm angegeben.

Wie haben Sie das Problem gelöst?

Um das Layout der Komponenten in den Vorlagen des 1C-Bitrix- und React-Systems nicht zu duplizieren, wurde beschlossen, es auf den React-Komponenten zu platzieren. Der Komponentenname in React sollte mit der 1C-Bitrix-Systemkomponentenvorlage übereinstimmen. Um solche Ideen umzusetzen, verwendeten wir:

V8js Modul für PHP;
reactjs / react-php-v8js;
Webpack.

Das erste Element ist das v8js-Modul, das unsere Reaktionskomponenten in ein statisches Layout in einer PHP-Umgebung konvertieren soll.

Das Folgende ist eine kleine Bibliothek von React Community, einem Wrapper zur einfacheren React-Initialisierung in der js-Umgebung des v8js-Moduls.

Und natürlich Webpack, wo ohne. In Verbindung mit babel können Sie jsx-Vorlagen und den es6-Standard zum Schreiben von Code verwenden. Alle Beispiele werden in es6-Syntax dargestellt. Es ist ganz einfach, aber wenn es nicht sofort verstanden wird, sollten Sie Ihr Gedächtnis dafür auffrischen.

V8js Modul für PHP.

Dieses Modul ist eine Erweiterung für PHP, mit der Sie die V8 Javascript Engine verwenden können, um JS-Code in PHP auszuführen. Installiert ganz einfach, wie eine normale PECL-Erweiterung. Die Hauptsache ist, dass Sie in Ihren Systembibliotheken und V8-Header-Dateien haben.

Webpack

Um die Bibliothek mit React- und React-Komponenten zu erstellen, verwenden wir das Webpack. Die Montagedateien für Vorder- und Rückseite unterscheiden sich geringfügig. Wir gehen zu 3 Dateien:

initialize.js -> app.js - Anwendung für die Front;
reactServer.js -> reactBuild.js - React-Bibliothek für die Serverseite;
components.js -> reactComponents.js - eine Sammlung von Reaktionskomponenten.

Der Hauptunterschied zwischen der Assembly für das Server-Rendering besteht darin, dass alle Bibliotheken und Komponenten in das globale Objekt eingefügt werden müssen und Bibliotheken über die Funktion require verbunden sind. Die Importrichtlinie funktioniert aus irgendeinem Grund nicht.

Alle Quelldateien befinden sich im lokalen Verzeichnis / templates / <Vorlagenname> / src /

Im Stammverzeichnis des Projekts befinden sich die Einstellungen webpack.config.js - settings.

Der Inhalt der Baugruppendateien befindet sich am Ende des Artikels.

Npm und die folgenden Pakete müssen installiert sein:

babel;
babel-cli;
Webpack
reagieren
React-Dom;
Unterstrich // optional.

Die Montage erfolgt durch Ausführen des Befehls:
$ webpack.

Anpassung der Bitrix Template Engine

Um eine angepasste Engine im 1C-Bitrix-System zu registrieren, müssen Sie ihre Einstellungen zur globalen Variablen $ arCustomTemplateEngines hinzufügen. Im Schlüssel müssen Sie den Code Ihres Motors angeben. Wir haben "JSX" verwendet. In den Werten müssen Sie die Dateierweiterung der Vorlage angeben, die Funktion zum Rendern der Vorlage. Es ist ratsam, eine Sortierung unter einem Wert von 100 anzugeben, damit die Priorität unseres Motors über dem Standard liegt.

Erstellen Sie eine JSXEngine-Klasse mit den folgenden Methoden:

setEngine - registriere eine Vorlage;
init - Initialisierung von v8js über den Bibliotheks-Wrapper reactjs / react-php-v8js;
execute - Template-Rendering-Funktionalität

und eine Wrapper-Funktion zum Rendern der _JSXEngineExecute-Vorlage, weil Das 1C-Bitrix-System erfordert die Registrierung einer bestimmten Funktion.

Um nicht jedes Mal eine React-Instanz zu initialisieren, platzieren Sie sie in einer statischen Variablen und fügen Sie eine Initialisierungsmethode hinzu.

In der ReactJS-Klasse der Bibliothek reactjs / react-php-v8js ist eine spezielle Schnittstelle implementiert, um die React-Komponente zu rendern. Der Klassenkonstruktor verwendet zwei Parameter als Eingabe, die den js-Code des Reaktionsmoduls und alle Reaktionskomponenten enthalten sollten, die in dem über das Webpack gesammelten Projekt verwendet werden. Nach der Initialisierung können wir sie rendern. Rufen Sie dazu die setComponent-Methode zum Installieren der Komponente mit den Parametern des Komponentennamens und des Requisitenarrays auf. Danach zeigt die Methode getMarkup den Inhalt der Komponente an, und getJS zeigt den js-Code zum Binden der Komponente an der Vorderseite an. Die Methode getJS erfordert die Kennung des HTML-Blocks, in dem sich die Komponente in den Parametern befindet. Zu diesem Zweck haben wir eine einfache Vorlage zum Umschließen einer gerenderten Komponente in einen HTML-Block implementiert. Die Einstellungen des Blocks selbst werden in eine JSON-Datei übertragen, die in der 1C-Bitrix-Systemkomponentenvorlage abgelegt wird. Die Einstellungen werden im JSON-Format gespeichert.

Übertragen Sie eine Komponente in eine neue Vorlage

Wir zeigen die Übersetzung der Komponente in React am Beispiel einer Standardmenükomponente. Das Layout der Komponente wurde bereits in die Standardvorlagen-Engine integriert. React empfiehlt eine Richtlinie zum Aufteilen der Funktionalität in Komponenten. Darüber hinaus können die Komponenten sehr klein sein. Bis zum Hyperlink-Tag. Wir werden unser Menü nicht auf solche Kleinigkeiten herunterbrechen, aber wir werden trotzdem eine kleine Zerlegung vornehmen.

Unser Menü verwendet Verschachtelung bis zu 3 Ebenen. Daher ist es logisch, die Menüfunktionalität in 3 Reaktionskomponenten pro Ebene zu unterteilen. Wenn Sie genau hinschauen, werden Sie feststellen, dass die Menüpunkte der zweiten Ebene in zwei Spalten angeordnet sind. Diese Funktionalität sollte in eine zusätzliche Komponente eingefügt werden.

Somit haben wir 4 Komponenten. Wir werden sie in den Dateien TopMenu.js, SubMenuLevel2.js, SubMenuLevel3.js, TwoColumnItem.js im Verzeichnis src / components ablegen (siehe den Code für andere Komponenten am Ende):

Damit unsere Vorlage funktioniert, müssen Sie eine Vorlage für die Menükomponente des 1C-Bitrix-Systems erstellen. Der Name der Vorlage muss mit dem Namen der Reaktionskomponente übereinstimmen. Innerhalb der Vorlage müssen Sie die Datei mit der Erweiterung platzieren, die den Einstellungen unserer Engine entspricht. In der Datei müssen Sie den HTML-Knoten angeben, in dem unsere Reaktionskomponente gerendert wird.

Ergebnis

Mit dieser Lösung können Sie Reaktionskomponenten auf der Back-End-Seite und auf der Front-End-Seite verwenden. Somit wird die Logik der Anzeige der Funktionalität an einem Ort gespeichert, was die Unterstützung des Projekts erheblich erleichtert.

Die Geschwindigkeit beim ersten Rendern von Seiten wurde um fast 1 Sekunde erhöht. Weil Jetzt müssen Sie das Hauselement, in dem sich die Komponente befindet, nicht neu zeichnen. ReactJs nimmt es sofort auf. Auch das Blinken von Elementen auf schwachen Geräten verschwand.

In Zukunft ist geplant, über einen auf node.js basierenden Service auf das Rendern von Komponenten auf der Back-End-Seite umzusteigen und eine Einzelseitenanwendung zu implementieren, während weiterhin Seiten für SEO generiert werden können.