ग्लोबस नेटवर्क के उदाहरण का उपयोग करके बैक-एंड पर स्वचालित पीढ़ी के साथ 1C-Bitrix में ReactJS को कैसे एकीकृत किया जाए

इस साल, ReactJS को पहली बार ग्लोबस हाइपरमार्केट चेन ऑनलाइन स्टोर के लिए लॉन्च किया गया था। यह परियोजना दिलचस्प है कि यह बिट्रिक्स प्लेटफ़ॉर्म की क्षमताओं का विस्तार करती है और साथ ही खोज इंजनों के लिए पृष्ठों को उत्पन्न करने की क्षमता को बरकरार रखती है और कोड और लेआउट के दोहराव से नहीं टकराती है। इस लेख में, हम बात करते हैं कि कैसे phct के लिए v8js मॉड्यूल का उपयोग करके ReactJS घटकों के साथ बिट्रिक्स घटकों को जोड़ा जाए और साइट के मुख्य सामने वाले हिस्से को बचाया जाए।

इसकी आवश्यकता क्यों थी?

प्रारंभ में, ऑनलाइन स्टोर की वेबसाइट का तर्क Marionette.js लाइब्रेरी पर बनाया गया था। कुछ साल पहले, इस तर्क ने भुगतान किया, लेकिन समय के साथ, फ्रंट-एंड कार्यक्षमता के लिए व्यावसायिक आवश्यकताएं इतनी बढ़ गईं कि हर शोधन गंभीर कठिनाइयों के साथ था। अधिक भार के कारण, सामने के हिस्से की गति कम हो गई और वांछित होने के लिए बहुत कुछ बचा। इस समस्या को हल करने के लिए, हमने ReactJS को चुना, लेकिन पेज को बैक-एंड करने और फिर घटकों को प्रतिक्रिया करने के लिए पृष्ठों के कुछ हिस्सों को जोड़ने के साथ एक समस्या थी। उसी समय, हमारा लक्ष्य ReactJS के लिए एक क्रमिक संक्रमण था, जैसा कि नाटकीय बदलावों से सामने वाले को पूरी तरह से नया स्वरूप मिल सकता है। नतीजतन, चुनाव निम्नलिखित घटकों पर गिर गया:

• उत्पाद कार्ड;
• मिनी टोकरी;
• मेनू।

मिनी-बास्केट और उत्पाद कार्ड को ReactJS में स्थानांतरित करने में मुख्य कठिनाई दोनों घटकों में माल की मात्रा का तात्कालिक सिंक्रनाइज़ेशन थी, अर्थात। यदि 3 किलोग्राम गाजर टोकरी में है, तो टोकरी में सामान जोड़ने के लिए ब्लॉक में (पिकर) 3 किलो प्रदर्शित किया जाना चाहिए, और जब मिनी-टोकरी में माल की मात्रा में परिवर्तन होता है, तो बदलाव पिकर और इसके विपरीत में होना चाहिए। इसके अलावा, बैक-एंड रिक्वेस्ट लैग को समतल करना आवश्यक था ताकि इंटरफ़ेस जल्दी से जल्दी काम करे।

"

एक अतिरिक्त जटिलता स्टोर (खाद्य खुदरा) की विशिष्टता थी, जहां टुकड़ा-भारित सामान की अवधारणा है। यह एक ऐसा उत्पाद है जिसे किलो में माना जाता है, लेकिन उपयोगकर्ता इसे टुकड़ों में खरीदता है, उदाहरण के लिए एक तरबूज, जिसे ग्राहक भाग में नहीं खरीद सकता है, केवल पूर्ण में। उपयोगकर्ता के लिए इस तरह के उत्पाद को टुकड़ों की संख्या में प्रदर्शित किया जाना चाहिए, लेकिन बैक-एंड किलोग्राम में माना जाता है।

आपने समस्या का समाधान कैसे किया?

1C-बिट्रिक्स और रिएक्ट सिस्टम के टेम्प्लेट में घटकों के लेआउट को डुप्लिकेट नहीं करने के लिए, इसे रिएक्ट घटकों पर रखने का निर्णय लिया गया था। प्रतिक्रिया में घटक का नाम 1C-Bitrix सिस्टम घटक टेम्पलेट के साथ मेल खाना चाहिए। इस तरह के विचारों को लागू करने के लिए, हमने इस्तेमाल किया:

• Ph8 के लिए V8js मॉड्यूल;
• reactjs / react-php-v8js;
• webpack।

पहला आइटम v8js मॉड्यूल है, जो हमारे प्रतिक्रिया घटकों को php वातावरण में एक स्थिर लेआउट में परिवर्तित करना चाहिए।

निम्नलिखित प्रतिक्रिया समुदाय से एक छोटी सी लाइब्रेरी है, जो v8js मॉड्यूल के जेएस वातावरण में आसान रिएक्ट आरंभीकरण के लिए एक आवरण है।

और निश्चित रूप से वेबपैक, जहां इसके बिना। बेबल के साथ संयोजन के रूप में, यह आपको कोड लिखने के लिए jsx टेम्प्लेट और es6 मानक का उपयोग करने की अनुमति देता है। सभी उदाहरणों को एस 6 सिंटैक्स में प्रस्तुत किया जाएगा। यह काफी सरल है, लेकिन अगर यह तुरंत समझ में नहीं आता है, तो आपको इसके लिए अपनी स्मृति को ताज़ा करना चाहिए।

Ph8 के लिए V8js मॉड्यूल।

यह मॉड्यूल php के लिए एक एक्सटेंशन है, जो आपको ph8 में js कोड निष्पादित करने के लिए V8 जावास्क्रिप्ट इंजन का उपयोग करने की अनुमति देता है। एक नियमित PECL एक्सटेंशन की तरह, काफी सरलता से स्थापित करता है। मुख्य बात यह है कि आपके पास आपके सिस्टम लाइब्रेरी और V8 हेडर फाइलें हैं।

Webpack

प्रतिक्रिया और प्रतिक्रिया घटकों के पुस्तकालय का निर्माण करने के लिए, हम वेबपैक का उपयोग करते हैं। सामने और पीछे की विधानसभा फाइलें थोड़ी अलग हैं। हम 3 फाइल करने जा रहे हैं:

• initialize.js -> app.js - सामने के लिए आवेदन;
• reactServer.js -> reactBuild.js - सर्वर पक्ष के लिए लाइब्रेरी पर प्रतिक्रिया करें;
• Components.js -> reactCompords.js - प्रतिक्रिया घटकों का एक संग्रह।

सर्वर रेंडरिंग के लिए असेंबली के बीच मुख्य अंतर यह है कि सभी पुस्तकालयों और घटकों को वैश्विक वस्तु में डाला जाना चाहिए और पुस्तकालयों को आवश्यक फ़ंक्शन के माध्यम से जोड़ा जाता है। किसी कारण से आयात निर्देश काम नहीं करता है।

सभी स्रोत फ़ाइलें स्थानीय / टेम्पलेट / <टेम्पलेट नाम> / src / निर्देशिका में हैं



परियोजना के मूल में webpack.config.js - सेटिंग्स है।



विधानसभा फ़ाइलों की सामग्री लेख के अंत में पाई जा सकती है।

Npm और निम्न पैकेज स्थापित होने चाहिए:

• कोलाहल;
• कोलाहल-CLI;
• webpack;
• प्रतिक्रिया;
• प्रतिक्रिया-डोम;
• अंडरस्कोर // वैकल्पिक।

विधानसभा कमान चलाने के द्वारा की जाती है:
$ वेबपैक।

बिट्रिक्स टेम्पलेट इंजन का अनुकूलन

1C-Bitrix सिस्टम में एक अनुकूलित इंजन को पंजीकृत करने के लिए, आपको इसकी सेटिंग्स को वैश्विक चर $ arCustomTemplateTines पर जोड़ने की आवश्यकता है। कुंजी में आपको अपने इंजन का कोड निर्दिष्ट करना होगा। हमने "JSX" का उपयोग किया। मूल्यों में आपको टेम्पलेट के फ़ाइल एक्सटेंशन को निर्दिष्ट करने की आवश्यकता है, टेम्पलेट को रेंडर करने का कार्य। 100 के मान से नीचे एक प्रकार निर्दिष्ट करना उचित है, ताकि हमारे इंजन की प्राथमिकता मानक से ऊपर हो।

निम्नलिखित तरीकों से JSXEngine क्लास बनाएँ:

• setEngine - एक टेम्पलेट रजिस्टर;
• init - Reajjs / react-php-v8js लाइब्रेरी रैपर के माध्यम से v8js का आरंभीकरण;
• निष्पादित - टेम्पलेट प्रतिपादन कार्यक्षमता

और _JSXEngineExecute टेम्पलेट प्रदान करने के लिए एक आवरण फ़ंक्शन, क्योंकि 1C-बिट्रिक्स सिस्टम को किसी विशेष फ़ंक्शन के पंजीकरण की आवश्यकता होती है।

प्रत्येक बार एक प्रतिक्रिया उदाहरण को प्रारंभ न करने के लिए, इसे एक स्थिर चर में रखें और एक आरंभिक विधि जोड़ें।

प्रतिक्रिया घटक को प्रस्तुत करने के लिए एक विशेष इंटरफ़ेस ReactJS वर्ग के ReactJS / react-php-v8js लाइब्रेरी में लागू किया गया है। क्लास कंस्ट्रक्टर एक इनपुट के रूप में दो पैरामीटर लेता है, जिसमें रिएक्शन मॉड्यूल का js-code और सभी रिएक्शन कंपोनेंट्स होने चाहिए जो वेबपैक के माध्यम से एकत्रित प्रोजेक्ट में उपयोग किए जाते हैं। आरंभीकरण के बाद, हम उन्हें सौंप सकते हैं। ऐसा करने के लिए, घटक को घटक नाम और प्रॉम्प्स सरणी के मापदंडों के साथ स्थापित करने का सेटकंपोनेंट विधि को कॉल करें। उसके बाद, getMarkup विधि घटक की सामग्री को प्रदर्शित करेगा, और getJS घटक को सामने की तरफ बांधने के लिए js कोड प्रदर्शित करेगा। GetJS विधि को HTML ब्लॉक के पहचानकर्ता की आवश्यकता होती है जिसमें घटक मापदंडों में स्थित होता है। ऐसा करने के लिए, हमने HTML ब्लॉक में एक रेंडर किए गए घटक को लपेटने के लिए एक सरल टेम्पलेट लागू किया। ब्लॉक की सेटिंग्स को केवल एक json-file में स्थानांतरित किया जाता है, जिसे 1C-Bitrix सिस्टम घटक टेम्पलेट में रखा गया है। सेटिंग्स को json प्रारूप में संग्रहीत किया जाता है।





एक घटक को एक नए टेम्पलेट में स्थानांतरित करें

हम एक मानक मेनू घटक के उदाहरण का उपयोग करके घटक का रिएक्ट में अनुवाद दिखाएंगे। घटक का लेआउट पहले से ही मानक टेम्पलेट इंजन में एकीकृत किया गया है। प्रतिक्रिया घटकों में कार्यक्षमता को तोड़ने के लिए एक नीति की सिफारिश करती है। इसके अलावा, घटक बहुत छोटे हो सकते हैं। हाइपरलिंक टैग तक। हम इस तरह के trifles के लिए हमारे मेनू को नहीं तोड़ेंगे, लेकिन फिर भी हम एक छोटे से अपघटन करेंगे।

हमारा मेनू 3 स्तरों तक नेस्टिंग का उपयोग करता है। इसलिए, मेनू प्रतिक्रिया को 3 प्रतिक्रिया घटकों में, प्रत्येक स्तर पर तोड़ना तर्कसंगत होगा। यदि आप ध्यान से देखें, तो आप देखेंगे कि दूसरे स्तर के मेनू आइटम दो कॉलम में व्यवस्थित हैं। इस कार्यक्षमता को एक अतिरिक्त घटक में रखा जाना चाहिए।



इस प्रकार, हमारे पास 4 घटक हैं। चलो उन्हें फाइलों में रखें TopMenu.js, SubMenuLevel2.js, SubMenuLevel3.js, TwoColumnItem.js src / Components डायरेक्टरी में (अंत में अन्य घटकों के लिए कोड देखें):



हमारे टेम्पलेट को काम करने के लिए, आपको 1C-Bitrix सिस्टम मेनू घटक के लिए एक टेम्पलेट बनाने की आवश्यकता है। टेम्पलेट का नाम प्रतिक्रिया घटक के नाम से मेल खाना चाहिए। टेम्प्लेट के अंदर आपको हमारे इंजन की सेटिंग्स के अनुरूप एक्सटेंशन के साथ फाइल रखने की आवश्यकता है। फ़ाइल के अंदर आपको html नोड निर्दिष्ट करने की आवश्यकता है जिसमें हमारे प्रतिक्रिया घटक को प्रदान किया जाएगा।

परिणाम

यह समाधान आपको बैक-एंड साइड और फ्रंट-एंड साइड पर प्रतिक्रिया घटकों का उपयोग करने की अनुमति देता है। इस प्रकार, कार्यक्षमता प्रदर्शित करने का तर्क एक जगह जमा हो जाता है, जो परियोजना के समर्थन को बहुत सुविधाजनक बनाता है।

प्रारंभिक पृष्ठ रेंडरिंग की गति लगभग 1s बढ़ गई। क्योंकि अब आपको उस घर-तत्व को दोबारा तैयार करने की आवश्यकता नहीं है जिसमें घटक स्थित है। ReactJs इसे मक्खी पर चुनता है। इसके अलावा, कमजोर उपकरणों पर तत्वों की झपकी गायब हो गई।

भविष्य में, SEO के लिए पेज जेनरेट करने की क्षमता बरकरार रखते हुए नोड-जेएस पर आधारित सेवा के माध्यम से बैक-एंड की ओर से रेंडर करने के लिए स्विच करने की योजना बनाई गई है और एक ही पेज एप्लिकेशन को लागू किया गया है।

आवेदन

initialize.js



components.js



reactServer.js



SubMenuLevel2.js



SubMenuLevel3.js



TwoColumnItems.js