🚹 ✂️ 👩🏼‍🏫 Bagaimana mengintegrasikan ReactJS ke dalam 1C-Bitrix dengan pembuatan templat secara otomatis di back-end menggunakan contoh jaringan Globus 🎸 🍞 🉐

Tahun ini, ReactJS pertama kali diluncurkan untuk toko online rantai hypermarket Globus. Proyek ini menarik karena memperluas kemampuan platform Bitrix dan pada saat yang sama mempertahankan kemampuan untuk menghasilkan halaman untuk mesin pencari dan tidak berantakan dengan duplikasi kode dan tata letak. Pada artikel ini, kita berbicara tentang bagaimana menghubungkan komponen Bitrix dengan komponen ReactJS menggunakan modul v8js untuk php dan menyimpan bagian depan utama situs.

Mengapa ini dibutuhkan?

Awalnya, logika situs web toko online dibangun di perpustakaan Marionette.js. Beberapa tahun yang lalu, logika ini terbayar, tetapi seiring berjalannya waktu, persyaratan bisnis untuk fungsionalitas ujung-depan tumbuh sedemikian rupa sehingga setiap penyempurnaan disertai dengan kesulitan serius. Karena beban tinggi, kecepatan bagian depan menurun dan meninggalkan banyak yang diinginkan. Untuk mengatasi masalah ini, kami memilih ReactJS, tetapi ada masalah dengan rendering halaman ke back-end dan kemudian menghubungkan bagian halaman untuk bereaksi komponen. Pada saat yang sama, tujuan kami adalah transisi bertahap ke ReactJS, karena perubahan dramatis dapat menyebabkan desain ulang lengkap depan. Akibatnya, pilihan jatuh pada komponen-komponen berikut:

Kartu Produk;
Keranjang mini;
Menu

Kesulitan utama dalam mentransfer keranjang mini dan kartu produk ke ReactJS adalah sinkronisasi instan dari jumlah barang di kedua komponen, yaitu jika 3 kg wortel ada di keranjang, maka di blok untuk menambahkan barang ke keranjang (pemetik) 3 kg harus ditampilkan, dan ketika jumlah barang dalam keranjang mini berubah, perubahan harus terjadi di pemetik dan sebaliknya. Juga, itu perlu untuk menyamakan lag permintaan back-end sehingga antarmuka bekerja secepat mungkin.

"

Kompleksitas tambahan adalah kekhususan toko (ritel makanan), di mana ada konsep barang tertimbang. Ini adalah produk yang dianggap dalam kg, tetapi pengguna membelinya dalam potongan-potongan, misalnya semangka, yang tidak dapat dibeli sebagian oleh klien, hanya secara keseluruhan. Produk seperti itu bagi pengguna harus ditampilkan dalam jumlah keping, tetapi pada Back-end dianggap dalam kilogram.

Bagaimana Anda memecahkan masalah?

Agar tidak menduplikasi tata letak komponen dalam template dari 1C-Bitrix dan sistem Bereaksi, diputuskan untuk menempatkannya pada komponen Bereaksi. Nama komponen dalam Bereaksi harus bertepatan dengan templat komponen sistem 1C-Bitrix. Untuk menerapkan gagasan tersebut, kami menggunakan:

Modul V8js untuk php;
reactjs / react-php-v8js;
paket web.

Item pertama adalah modul v8js, yang seharusnya mengubah komponen reaksi kita menjadi tata letak statis di lingkungan php.

Berikut ini adalah perpustakaan kecil dari React Community, yang merupakan pembungkus untuk inisialisasi React yang lebih mudah di lingkungan js dari modul v8js.

Dan tentu saja webpack, di mana tanpanya. Sehubungan dengan babel, ini memungkinkan Anda untuk menggunakan templat jsx dan standar es6 untuk menulis kode. Semua contoh akan disajikan dalam sintaksis ES6. Ini cukup sederhana, tetapi jika tidak segera dipahami, maka Anda harus menyegarkan ingatan Anda untuk itu.

Modul V8js untuk php.

Modul ini adalah ekstensi untuk php, yang memungkinkan Anda untuk menggunakan Javascript Engine V8 untuk mengeksekusi kode js di php. Pemasangannya cukup sederhana, seperti ekstensi PECL biasa. Yang utama adalah yang Anda miliki di perpustakaan sistem Anda dan file header V8.

Paket web

Untuk membangun pustaka komponen reaksi dan reaksi, kami menggunakan webpack. File rakitan untuk bagian depan dan belakang sedikit berbeda. Kita akan ke 3 file:

initialize.js -> app.js - aplikasi untuk bagian depan;
reactServer.js -> reactBuild.js - bereaksi pustaka untuk sisi server;
components.js -> reactComponents.js - kumpulan komponen reaksi.

Perbedaan utama antara perakitan untuk rendering server adalah bahwa semua pustaka dan komponen harus dimasukkan ke objek global dan pustaka terhubung melalui fungsi yang diperlukan. Arahan impor karena alasan tertentu tidak berfungsi.

Semua file sumber ada di direktori local / templates / <template name> / src /

Akar dari proyek ini adalah webpack.config.js - pengaturan.

Isi file rakitan dapat ditemukan di akhir artikel.

Npm dan paket-paket berikut harus diinstal:

Babel;
babel-cli;
paket web
bereaksi
reaksi-dom;
garis bawah // opsional.

Perakitan dilakukan dengan menjalankan perintah:
$ webpack

Kustomisasi mesin template bitrix

Untuk mendaftarkan mesin khusus dalam sistem 1C-Bitrix, Anda perlu menambahkan pengaturannya ke variabel global $ arCustomTemplateEngines. Pada kunci Anda perlu menentukan kode mesin Anda. Kami menggunakan "JSX". Dalam nilai yang Anda butuhkan untuk menentukan ekstensi file templat, fungsi rendering templat. Dianjurkan untuk menentukan jenis di bawah nilai 100, sehingga prioritas mesin kami di atas standar.

Buat kelas JSXEngine dengan metode berikut:

setEngine - mendaftarkan templat;
init - inisialisasi v8js melalui bungkus perpustakaan reactjs / react-php-v8js;
mengeksekusi - fungsi rendering template

dan fungsi wrapper untuk merender template _JSXEngineExecute, karena Sistem 1C-Bitrix memerlukan pendaftaran fungsi tertentu.

Agar tidak menginisialisasi setiap kali instance Bereaksi, letakkan di variabel statis dan tambahkan metode inisialisasi.

Antarmuka khusus diimplementasikan di kelas ReactJS dari pustaka reactjs / react-php-v8js untuk membuat komponen reaksi. Konstruktor kelas mengambil dua parameter sebagai input, yang harus berisi kode js dari modul reaksi dan semua komponen reaksi yang digunakan dalam proyek yang dikumpulkan melalui webpack. Setelah inisialisasi, kita dapat membuatnya. Untuk melakukan ini, panggil metode setComponent menginstal komponen dengan parameter nama komponen dan array alat peraga. Setelah itu, metode getMarkup akan menampilkan konten komponen, dan getJS akan menampilkan kode js untuk mengikat komponen di depan. Metode getJS membutuhkan pengidentifikasi blok html di mana komponen terletak di parameter. Untuk melakukan ini, kami menerapkan template sederhana untuk membungkus komponen yang diberikan dalam blok html. Pengaturan blok itu sendiri ditransfer ke file json, yang ditempatkan di templat komponen sistem 1C-Bitrix. Pengaturan disimpan dalam format json.

Transfer komponen ke templat baru

Kami akan menunjukkan terjemahan komponen ke Bereaksi menggunakan contoh komponen menu standar. Tata letak komponen telah diintegrasikan ke dalam mesin templat standar. Bereaksi merekomendasikan kebijakan untuk memecah fungsionalitas menjadi komponen. Apalagi komponennya bisa sangat kecil. Hingga tag hyperlink. Kami tidak akan memecah menu kami ke hal-hal sepele seperti itu, tetapi kami akan membuat dekomposisi kecil.

Menu kami menggunakan bersarang hingga 3 tingkat. Oleh karena itu, logis untuk memecah fungsionalitas menu menjadi 3 komponen reaksi, masing-masing per level. Jika Anda perhatikan dengan teliti, Anda akan melihat bahwa item menu dari tingkat kedua diatur dalam dua kolom. Fungsi ini harus ditempatkan di komponen tambahan.

Jadi, kami memiliki 4 komponen. Mari kita tempatkan mereka di file TopMenu.js, SubMenuLevel2.js, SubMenuLevel3.js, TwoColumnItem.js di direktori src / components (lihat kode untuk komponen lain di akhir):

Agar templat kami berfungsi, Anda perlu membuat templat untuk komponen menu sistem 1C-Bitrix. Nama templat harus sesuai dengan nama komponen reaksi. Di dalam template Anda perlu menempatkan file dengan ekstensi yang sesuai dengan pengaturan mesin kami. Di dalam file Anda perlu menentukan node html di mana komponen reaksi kami akan diberikan.

Hasil

Solusi ini memungkinkan Anda untuk menggunakan komponen reaksi di sisi back-end dan di sisi front-end. Dengan demikian, logika menampilkan fungsi disimpan di satu tempat, yang sangat memudahkan dukungan proyek.

Kecepatan rendering halaman awal meningkat hampir 1s. Karena Sekarang Anda tidak perlu menggambar ulang elemen rumah tempat komponen berada. ReactJ mengambilnya dengan cepat. Juga, kedipan elemen pada perangkat lemah menghilang.

Di masa depan, rencana untuk beralih ke rendering komponen di sisi back-end melalui layanan berbasis node.js dan menerapkan aplikasi halaman tunggal sambil mempertahankan kemampuan untuk menghasilkan halaman untuk SEO.