Este año, ReactJS se lanzó por primera vez para la tienda en línea de la cadena de hipermercados Globus. El proyecto es interesante porque expande las capacidades de la plataforma Bitrix y al mismo tiempo conserva la capacidad de generar páginas para motores de búsqueda y no se llena con la duplicación de código y diseño. En este artículo, hablamos sobre cómo conectar los componentes de Bitrix con los componentes de ReactJS utilizando el módulo v8js para php y guardar la parte frontal principal del sitio.
¿Por qué se necesitaba esto?
Inicialmente, la lógica del sitio web de la tienda en línea se creó en la biblioteca Marionette.js. Hace unos años, esta lógica valió la pena, pero con el tiempo, los requisitos comerciales para la funcionalidad front-end crecieron tanto que cada refinamiento estuvo acompañado de serias dificultades. Debido a la alta carga, la velocidad de la parte delantera disminuyó y dejó mucho que desear. Para resolver este problema, elegimos ReactJS, pero había un problema al procesar las páginas en el back-end y luego vincular partes de las páginas para reaccionar componentes. Al mismo tiempo, nuestro objetivo era una transición gradual a ReactJS, ya que cambios drásticos podrían conducir a un rediseño completo del frente. Como resultado, la elección recayó en los siguientes componentes:
- Tarjetas de producto;
- Mini canasta;
- Menu
La principal dificultad para transferir mini-canastas y tarjetas de productos a ReactJS fue la sincronización instantánea de la cantidad de bienes en ambos componentes, es decir. Si hay 3 kg de zanahorias en la cesta, entonces en el bloque para agregar productos a la cesta (selector) se deben mostrar 3 kg, y cuando la cantidad de productos en la mini-cesta cambia, el cambio debe ocurrir en el selector y viceversa. Además, era necesario nivelar el retraso de la solicitud de fondo para que la interfaz funcionara lo más rápido posible.
"
Una complejidad adicional fue la especificidad de la tienda (venta de alimentos), donde existe el concepto de bienes ponderados. Este es un producto que se considera en kg, pero el usuario lo compra en trozos, por ejemplo, una sandía, que el cliente no puede comprar en parte, solo en su totalidad. Dicho producto para el usuario debe mostrarse en el número de piezas, pero en el back-end se considera en kilogramos.
¿Cómo resolviste el problema?
Para no duplicar el diseño de los componentes en las plantillas del sistema 1C-Bitrix and React, se decidió colocarlo en los componentes React. El nombre del componente en React debe coincidir con la plantilla de componente del sistema 1C-Bitrix. Para implementar tales ideas, utilizamos:
- Módulo V8js para php;
- reactjs / react-php-v8js;
- paquete web
El primer elemento es el módulo v8js, que debería convertir nuestros componentes de reacción en un diseño estático en un entorno php.
La siguiente es una pequeña biblioteca de React Community, que es un contenedor para facilitar la inicialización de React en el entorno js del módulo v8js.
Y, por supuesto, webpack, donde sin él. En combinación con babel, le permite usar plantillas jsx y el estándar es6 para escribir código. Todos los ejemplos se presentarán en la sintaxis es6. Es bastante simple, pero si no se entiende de inmediato, entonces debe actualizar su memoria para ello.
Módulo V8js para php.Este módulo es una extensión para php, que le permite usar el motor Javascript V8 para ejecutar código js en php. Se instala simplemente, como una extensión PECL normal. Lo principal es que tiene en las bibliotecas de su sistema y los archivos de encabezado V8.
Paquete webPara construir la biblioteca de componentes de reacción y reacción, usamos webpack. Los archivos de ensamblaje para el anverso y el reverso son ligeramente diferentes. Vamos a 3 archivos:
- initialize.js -> app.js - aplicación para el frente;
- reactServer.js -> reactBuild.js - reaccionar biblioteca para el lado del servidor;
- components.js -> reactComponents.js - una colección de componentes react.
La principal diferencia entre el ensamblaje para la representación del servidor es que todas las bibliotecas y componentes deben colocarse en el objeto global y las bibliotecas están conectadas a través de la función require. La directiva de importación por alguna razón no funciona.
Todos los archivos de origen están en el directorio local / templates / <template name> / src /
En la raíz del proyecto se encuentra webpack.config.js - settings.
El contenido de los archivos de ensamblaje se puede encontrar al final del artículo.
Npm y los siguientes paquetes deben estar instalados:
- babel
- babel-cli;
- paquete web
- reaccionar
- reaccionar
- guión bajo // opcional.
El ensamblaje se realiza ejecutando el comando:
$ webpack.
Personalización del motor de plantillas bitrixPara registrar un motor personalizado en el sistema 1C-Bitrix, debe agregar su configuración a la variable global $ arCustomTemplateEngines. En la clave, debe especificar el código de su motor. Utilizamos "JSX". En los valores que necesita para especificar la extensión del archivo de la plantilla, la función de renderizar la plantilla. Es recomendable especificar un tipo por debajo de un valor de 100, de modo que la prioridad de nuestro motor esté por encima del estándar.
Cree una clase JSXEngine con los siguientes métodos:
- setEngine: registra una plantilla;
- init: inicialización de v8js a través del contenedor de biblioteca reactjs / react-php-v8js;
- execute: funcionalidad de representación de plantillas
y una función de contenedor para representar la plantilla _JSXEngineExecute, porque El sistema 1C-Bitrix requiere el registro de una función particular.
Para no inicializar cada vez que una instancia de React, colóquela en una variable estática y agregue un método de inicialización.
Se implementa una interfaz especial en la clase ReactJS de la biblioteca reactjs / react-php-v8js para representar el componente de reacción. El constructor de la clase toma dos parámetros como entrada, que deben contener el código js del módulo de reacción y todos los componentes de reacción que se usan en el proyecto recopilados a través del paquete web. Después de la inicialización, podemos renderizarlos. Para hacer esto, llame al método setComponent para instalar el componente con los parámetros del nombre del componente y la matriz de accesorios. Después de eso, el método getMarkup mostrará el contenido del componente y getJS mostrará el código js para vincular el componente en la parte delantera. El método getJS requiere el identificador del bloque html en el que se encuentra el componente en los parámetros. Para hacer esto, implementamos una plantilla simple para envolver un componente renderizado en un bloque html. La configuración del bloque en sí se transfiere a un archivo json, que se coloca en la plantilla de componentes del sistema 1C-Bitrix. La configuración se almacena en formato json.
Transferir un componente a una nueva plantillaMostraremos la traducción del componente a React usando el ejemplo de un componente de menú estándar. El diseño del componente ya se ha integrado en el motor de plantillas estándar. React recomienda una política para dividir la funcionalidad en componentes. Además, los componentes pueden ser muy pequeños. Hasta la etiqueta del hipervínculo. No vamos a dividir nuestro menú en triviales, pero sin embargo haremos una pequeña descomposición.
Nuestro menú utiliza anidamiento de hasta 3 niveles. Por lo tanto, será lógico dividir la funcionalidad del menú en 3 componentes de reacción, cada uno por nivel. Si observa detenidamente, notará que los elementos del menú del segundo nivel están organizados en dos columnas. Esta funcionalidad debe colocarse en un componente adicional.
Por lo tanto, tenemos 4 componentes. Vamos a colocarlos en los archivos TopMenu.js, SubMenuLevel2.js, SubMenuLevel3.js, TwoColumnItem.js en el directorio src / components (vea el código para otros componentes al final):
Para que nuestra plantilla funcione, debe crear una plantilla para el componente del menú del sistema 1C-Bitrix. El nombre de la plantilla debe coincidir con el nombre del componente de reacción. Dentro de la plantilla, debe colocar el archivo con la extensión correspondiente a la configuración de nuestro motor. Dentro del archivo debe especificar el nodo html en el que se representará nuestro componente de reacción.
Resultado
Esta solución le permite utilizar componentes de reacción en el lado posterior y en el lado frontal. Por lo tanto, la lógica de mostrar la funcionalidad se almacena en un solo lugar, lo que facilita enormemente el soporte del proyecto.
La velocidad de representación de la página inicial aumentó en casi 1 segundo. Porque Ahora no necesita volver a dibujar el elemento de la casa en el que se encuentra el componente. ReactJs lo recoge sobre la marcha. Además, el parpadeo de elementos en dispositivos débiles desapareció.
En el futuro, planea cambiar a la representación de componentes en el lado de back-end a través de un servicio basado en node.js e implementar una aplicación de una sola página mientras conserva la capacidad de generar páginas para SEO.
App
initialize.js
components.js
reactServer.js
SubMenuLevel2.js
SubMenuLevel3.js
TwoColumnItems.js
