👨‍👩‍👦‍👦 🚂 🏬 Comment intégrer ReactJS dans 1C-Bitrix avec génération automatique de modèles sur le back-end en utilisant l'exemple du réseau Globus ➗ 🧑🏾 🥄

Cette année, ReactJS a été lancé pour la première fois sur la boutique en ligne de la chaîne d'hypermarchés Globus. Le projet est intéressant en ce qu'il étend les capacités de la plate-forme Bitrix et conserve en même temps la capacité de générer des pages pour les moteurs de recherche et n'encombre pas avec la duplication de code et de mise en page. Dans cet article, nous expliquons comment connecter des composants Bitrix aux composants ReactJS à l'aide du module v8js pour php et enregistrer la partie avant principale du site.

Pourquoi était-ce nécessaire?

Initialement, la logique du site Internet de la boutique en ligne s'est construite sur la bibliothèque Marionette.js. Il y a quelques années, cette logique a porté ses fruits, mais au fil du temps, les exigences commerciales pour la fonctionnalité frontale ont tellement augmenté que chaque raffinement s'est accompagné de graves difficultés. En raison de la charge élevée, la vitesse de la partie avant a diminué et a laissé beaucoup à désirer. Pour résoudre ce problème, nous avons choisi ReactJS, mais il y avait un problème avec le rendu des pages vers le back-end, puis la liaison de parties des pages aux composants React. Dans le même temps, notre objectif était une transition progressive vers ReactJS, des changements spectaculaires pourraient conduire à une refonte complète du front. Par conséquent, le choix s'est porté sur les éléments suivants:

Cartes de produits;
Mini panier;
Le menu

La principale difficulté lors du transfert de mini-paniers et de cartes de produits vers ReactJS a été la synchronisation instantanée de la quantité de marchandises dans les deux composants, c'est-à-dire si 3 kg de carottes sont dans le panier, alors dans le bloc pour ajouter des marchandises au panier (cueilleur) 3 kg doivent être affichés, et lorsque la quantité de marchandises dans le mini-panier change, le changement doit se produire dans le cueilleur et vice versa. En outre, il était nécessaire de niveler le décalage de la demande principale afin que l'interface fonctionne le plus rapidement possible.

"

Une complexité supplémentaire était la spécificité du magasin (commerce alimentaire), où il y a le concept de marchandise à la pièce. Il s'agit d'un produit qui est considéré en kg, mais l'utilisateur l'achète en morceaux, par exemple une pastèque, que le client ne peut acheter en partie, que dans son intégralité. Un tel produit pour l'utilisateur doit être affiché en nombre de pièces, mais sur le back-end, il est considéré en kilogrammes.

Comment avez-vous résolu le problème?

Afin de ne pas dupliquer la disposition des composants dans les modèles du système 1C-Bitrix et React, il a été décidé de le placer sur les composants React. Le nom du composant dans React doit coïncider avec le modèle de composant système 1C-Bitrix. Pour mettre en œuvre de telles idées, nous avons utilisé:

Module V8js pour php;
reactjs / react-php-v8js;
webpack.

Le premier élément est le module v8js, qui devrait convertir nos composants react en une disposition statique dans un environnement php.

Ce qui suit est une petite bibliothèque de React Community, qui est un wrapper pour une initialisation React plus facile dans l'environnement js du module v8js.

Et bien sûr webpack, où sans lui. En conjonction avec babel, il vous permet d'utiliser des modèles jsx et la norme es6 pour écrire du code. Tous les exemples seront présentés dans la syntaxe es6. C'est assez simple, mais s'il n'est pas immédiatement compris, vous devez alors vous rafraîchir la mémoire.

Module V8js pour php.

Ce module est une extension pour php, qui vous permet d'utiliser le moteur Javascript V8 pour exécuter du code js en php. S'installe tout simplement, comme une extension PECL standard. L'essentiel est que vous ayez dans vos bibliothèques système et fichiers d'en-tête V8.

Webpack

Pour construire la bibliothèque de composants react et react, nous utilisons webpack. Les fichiers d'assemblage pour l'avant et l'arrière sont légèrement différents. Nous allons à 3 fichiers:

initialize.js -> app.js - application pour le devant;
reactServer.js -> reactBuild.js - bibliothèque react pour le côté serveur;
components.js -> reactComponents.js - une collection de composants react.

La principale différence entre l'assemblage pour le rendu du serveur est que toutes les bibliothèques et les composants doivent être placés dans l'objet global et les bibliothèques sont connectées via la fonction require. La directive d'importation pour une raison quelconque ne fonctionne pas.

Tous les fichiers source se trouvent dans le répertoire local / templates / <nom du modèle> / src /

À la racine du projet se trouve webpack.config.js - settings.

Le contenu des fichiers d'assemblage se trouve à la fin de l'article.

Npm et les packages suivants doivent être installés:

babel;
babel-cli;
webpack
réagir
react-dom;
soulignement // facultatif.

L'assemblage se fait en exécutant la commande:
$ webpack.

Personnalisation du moteur de modèle bitrix

Pour enregistrer un moteur personnalisé dans le système 1C-Bitrix, vous devez ajouter ses paramètres à la variable globale $ arCustomTemplateEngines. Dans la clé, vous devez spécifier le code de votre moteur. Nous avons utilisé «JSX». Dans les valeurs, vous devez spécifier l'extension de fichier du modèle, la fonction de rendu du modèle. Il est conseillé de spécifier un tri en dessous d'une valeur de 100, afin que la priorité de notre moteur soit supérieure à la norme.

Créez une classe JSXEngine avec les méthodes suivantes:

setEngine - enregistre un modèle;
init - initialisation de v8js via le wrapper de bibliothèque reactjs / react-php-v8js;
exécuter - fonctionnalité de rendu de modèle

et une fonction wrapper pour le rendu du modèle _JSXEngineExecute, car Le système 1C-Bitrix nécessite l'enregistrement d'une fonction particulière.

Afin de ne pas initialiser chaque fois une instance React, placez-la dans une variable statique et ajoutez une méthode d'initialisation.

Une interface spéciale est implémentée dans la classe ReactJS de la bibliothèque reactjs / react-php-v8js pour rendre le composant react. Le constructeur de classe prend deux paramètres en entrée, qui doivent contenir le code js du module react et tous les composants react utilisés dans le projet collectés via webpack. Après l'initialisation, nous pouvons les rendre. Pour ce faire, appelez la méthode setComponent d'installation du composant avec les paramètres du nom du composant et du tableau d'accessoires. Après cela, la méthode getMarkup affichera le contenu du composant et getJS affichera le code js pour lier le composant à l'avant. La méthode getJS nécessite l'identifiant du bloc html dans lequel se trouve le composant dans les paramètres. Pour ce faire, nous avons implémenté un modèle simple pour encapsuler un composant rendu dans un bloc html. Les paramètres du bloc lui-même sont transférés dans un fichier json, qui est placé dans le modèle de composant système 1C-Bitrix. Les paramètres sont stockés au format json.

Transférer un composant vers un nouveau modèle

Nous allons montrer la traduction du composant dans React en utilisant l'exemple d'un composant de menu standard. La disposition du composant a déjà été intégrée dans le moteur de modèle standard. React recommande une stratégie pour diviser les fonctionnalités en composants. De plus, les composants peuvent être très petits. Jusqu'à la balise hyperlien. Nous ne décomposerons pas notre menu à de telles bagatelles, mais nous ferons néanmoins une petite décomposition.

Notre menu utilise l'imbrication jusqu'à 3 niveaux. Par conséquent, il sera logique de diviser la fonctionnalité du menu en 3 composants réactifs, chacun par niveau. Si vous regardez attentivement, vous remarquerez que les éléments de menu du deuxième niveau sont organisés en deux colonnes. Cette fonctionnalité doit être placée dans un composant supplémentaire.

Ainsi, nous avons 4 composants. Nous les placerons dans les fichiers TopMenu.js, SubMenuLevel2.js, SubMenuLevel3.js, TwoColumnItem.js dans le répertoire src / components (voir le code pour les autres composants à la fin):

Pour que notre modèle fonctionne, vous devez créer un modèle pour le composant de menu système 1C-Bitrix. Le nom du modèle doit correspondre au nom du composant React. À l'intérieur du modèle, vous devez placer le fichier avec l'extension correspondant aux paramètres de notre moteur. Dans le fichier, vous devez spécifier le nœud html dans lequel notre composant react sera rendu.

Résultat

Cette solution vous permet d'utiliser des composants React sur le côté back-end et sur le côté front-end. Ainsi, la logique d'affichage de la fonctionnalité est stockée en un seul endroit, ce qui facilite grandement l'accompagnement du projet.

La vitesse de rendu de page initiale a augmenté de près de 1 s. Parce que Maintenant, vous n'avez pas besoin de redessiner l'élément house dans lequel se trouve le composant. ReactJs le prend à la volée. De plus, le clignotement des éléments sur les appareils faibles a disparu.

À l'avenir, prévoit de passer au rendu des composants côté serveur via un service basé sur node.js et de mettre en œuvre une application d'une seule page tout en conservant la possibilité de générer des pages pour le référencement.