⏰ 🏡 👌 Como integrar o ReactJS ao 1C-Bitrix com geração automática de modelos no back-end usando o exemplo da rede Globus 🏓 👊🏼 🙂

Este ano, o ReactJS foi lançado pela primeira vez para a loja online da cadeia de hipermercados Globus. O projeto é interessante na medida em que expande os recursos da plataforma Bitrix e, ao mesmo tempo, mantém a capacidade de gerar páginas para os mecanismos de pesquisa e não se confunde com a duplicação de código e layout. Neste artigo, falamos sobre como conectar componentes do Bitrix aos componentes do ReactJS usando o módulo v8js para php e salvar a parte principal principal do site.

Por que isso foi necessário?

Inicialmente, a lógica do site da loja online foi criada na biblioteca Marionette.js. Alguns anos atrás, essa lógica valeu a pena, mas com o tempo, os requisitos de negócios para a funcionalidade de front-end cresceram tanto que todo refinamento foi acompanhado por sérias dificuldades. Devido à alta carga, a velocidade da parte frontal diminuiu e deixou muito a desejar. Para resolver esse problema, escolhemos o ReactJS, mas houve um problema ao renderizar páginas para o back-end e depois vincular partes das páginas para reagir aos componentes. Ao mesmo tempo, nosso objetivo era uma transição gradual para o ReactJS, pois mudanças drásticas poderiam levar a um redesenho completo da frente, resultando na escolha dos seguintes componentes:

Cartões de produtos;
Mini cesta;
Menu

A principal dificuldade na transferência de minicestas e cartões de produtos para o ReactJS foi a sincronização instantânea da quantidade de mercadorias nos dois componentes, ou seja, se 3 kg de cenoura estiverem na cesta, no bloco para adicionar mercadorias à cesta (coletor), 3 kg devem ser exibidos e, quando a quantidade de mercadorias na minicareta for alterada, a mudança deverá ocorrer no coletor e vice-versa. Além disso, era necessário nivelar o atraso da solicitação de back-end para que a interface funcionasse o mais rápido possível.

"

Uma complexidade adicional foi a especificidade da loja (varejo de alimentos), onde existe o conceito de bens ponderados por peça. Este é um produto que é considerado em kg, mas o usuário o compra em pedaços, por exemplo, uma melancia, que o cliente não pode comprar em parte, apenas na totalidade. Esse produto para o usuário deve ser exibido no número de peças, mas no back-end é considerado em quilogramas.

Como você resolveu o problema?

Para não duplicar o layout dos componentes nos modelos do sistema 1C-Bitrix e React, foi decidido colocá-lo nos componentes React. O nome do componente em React deve coincidir com o modelo de componente do sistema 1C-Bitrix. Para implementar essas idéias, usamos:

Módulo V8js para php;
reactjs / react-php-v8js;
webpack.

O primeiro item é o módulo v8js, que deve converter nossos componentes de reação em um layout estático no ambiente php.

A seguir, é apresentada uma pequena biblioteca do React Community, que é um invólucro para facilitar a inicialização do React no ambiente js do módulo v8js.

E, claro, webpack, onde sem ele. Em conjunto com o babel, ele permite que você use modelos jsx e o padrão es6 para escrever código. Todos os exemplos serão apresentados na sintaxe es6. É bastante simples, mas se não for imediatamente entendido, você deverá atualizar sua memória.

Módulo V8js para php.

Este módulo é uma extensão para php, que permite usar o V8 Javascript Engine para executar o código js no php. Instala de maneira simples, como uma extensão PECL comum. O principal é que você tem nas bibliotecas do sistema e nos arquivos de cabeçalho V8.

Webpack

Para criar a biblioteca de reagir e reagir componentes, usamos o webpack. Os arquivos de montagem da frente e de trás são ligeiramente diferentes. Vamos para 3 arquivos:

initialize.js -> app.js - aplicativo para a frente;
reactServer.js -> reactBuild.js - biblioteca de reações para o lado do servidor;
components.js -> reactComponents.js - uma coleção de componentes de reação.

A principal diferença entre o assembly para renderização do servidor é que todas as bibliotecas e componentes devem ser colocados no objeto global e as bibliotecas são conectadas através da função require. A diretiva de importação, por algum motivo, não funciona.

Todos os arquivos de origem estão no diretório local / templates / <nome do modelo> / src /

Na raiz do projeto está webpack.config.js - settings.

O conteúdo dos arquivos de montagem pode ser encontrado no final do artigo.

Npm e os seguintes pacotes devem ser instalados:

babel;
babel-cli;
webpack
reagir
reação;
sublinhado // opcional.

A montagem é feita executando o comando:
$ webpack.

Customização do mecanismo de modelo bitrix

Para registrar um mecanismo personalizado no sistema 1C-Bitrix, você precisa adicionar suas configurações à variável global $ arCustomTemplateEngines. Na chave, você precisa especificar o código do seu mecanismo. Usamos "JSX". Nos valores, você precisa especificar a extensão do arquivo do modelo, a função de renderizar o modelo. É aconselhável especificar uma classificação abaixo de um valor de 100, para que a prioridade do nosso motor esteja acima do padrão.

Crie uma classe JSXEngine com os seguintes métodos:

setEngine - registra um modelo;
init - inicialização do v8js através do wrapper da biblioteca reactjs / react-php-v8js;
execute - funcionalidade de renderização de modelo

e uma função de wrapper para renderizar o modelo _JSXEngineExecute, porque O sistema 1C-Bitrix requer o registro de uma função específica.

Para não inicializar sempre que uma instância React, coloque-a em uma variável estática e adicione um método de inicialização.

Uma interface especial é implementada na classe ReactJS da biblioteca reactjs / react-php-v8js para renderizar o componente react. O construtor da classe usa dois parâmetros como entrada, que devem conter o código js do módulo reat e todos os componentes reagentes utilizados no projeto coletado via webpack. Após a inicialização, podemos renderizá-los. Para fazer isso, chame o método setComponent de instalar o componente com os parâmetros do nome do componente e da matriz props. Depois disso, o método getMarkup exibirá o conteúdo do componente, e o getJS exibirá o código js para vincular o componente na frente. O método getJS requer o identificador do bloco html no qual o componente está localizado nos parâmetros. Para isso, implementamos um modelo simples para agrupar um componente renderizado em um bloco html. As configurações do próprio bloco são transferidas para um arquivo json, que é colocado no modelo de componente do sistema 1C-Bitrix. As configurações são armazenadas no formato json.

Transferir um componente para um novo modelo

Mostraremos a tradução do componente no React usando o exemplo de um componente de menu padrão. O layout do componente já foi integrado ao mecanismo de modelo padrão. O React recomenda uma política para quebrar a funcionalidade em componentes. Além disso, os componentes podem ser muito pequenos. Até a tag de hiperlink. Não dividiremos nosso cardápio com essas ninharias, mas, no entanto, faremos uma pequena decomposição.

Nosso menu usa aninhamento até 3 níveis. Portanto, será lógico dividir a funcionalidade do menu em três componentes de reação, cada um por nível. Se você observar com atenção, notará que os itens de menu do segundo nível estão organizados em duas colunas. Essa funcionalidade deve ser colocada em um componente adicional.

Assim, temos 4 componentes. Vamos colocá-los nos arquivos TopMenu.js, SubMenuLevel2.js, SubMenuLevel3.js, TwoColumnItem.js no diretório src / components (veja o código para outros componentes no final):

Para que nosso modelo funcione, é necessário criar um modelo para o componente de menu do sistema 1C-Bitrix. O nome do modelo deve corresponder ao nome do componente de reação. Dentro do modelo, você precisa colocar o arquivo com a extensão correspondente às configurações do nosso mecanismo. Dentro do arquivo, você precisa especificar o nó html no qual nosso componente de reação será renderizado.

Resultado

Esta solução permite usar componentes de reação no lado de back-end e no lado de front-end. Assim, a lógica de exibir a funcionalidade é armazenada em um único local, o que facilita muito o suporte ao projeto.

A velocidade da renderização inicial da página aumentou quase 1s. Porque Agora você não precisa redesenhar o elemento da casa no qual o componente está localizado. O ReactJs pega na hora. Além disso, o piscar de elementos em dispositivos fracos desapareceu.

No futuro, planeja mudar para renderizar componentes no back-end por meio de um serviço baseado no node.js e implementar um aplicativo de página única, mantendo a capacidade de gerar páginas para SEO.