هذا العام ، تم إطلاق ReactJS لأول مرة لمتجر سلسلة Globus hypermarket عبر الإنترنت. المشروع مثير للاهتمام من حيث أنه يوسع قدرات منصة Bitrix وفي الوقت نفسه يحتفظ بالقدرة على إنشاء صفحات لمحركات البحث ولا يتسبب في ازدحام مع تكرار التعليمات البرمجية والتخطيط. في هذه المقالة ، نتحدث عن كيفية ربط مكونات Bitrix بمكونات ReactJS باستخدام وحدة v8js لـ php وحفظ الجزء الأمامي الرئيسي من الموقع.
لماذا كانت هناك حاجة لذلك؟
في البداية ، تم بناء منطق موقع المتجر على الإنترنت في مكتبة Marionette.js. قبل بضع سنوات ، كان هذا المنطق يؤتي ثماره ، ولكن بمرور الوقت ، نمت متطلبات الأعمال الخاصة بوظائف الواجهة الأمامية لدرجة أن كل التحسينات كانت مصحوبة بصعوبات خطيرة. بسبب الحمل العالي ، انخفضت سرعة الجزء الأمامي وتركت الكثير مما هو مرغوب فيه. لحل هذه المشكلة ، اخترنا ReactJS ، ولكن كانت هناك مشكلة في عرض الصفحات في النهاية ثم ربط أجزاء من الصفحات بمكونات تفاعلية. في الوقت نفسه ، كان هدفنا الانتقال التدريجي إلى ReactJS ، مثل يمكن أن تؤدي التغييرات الجذرية إلى إعادة تصميم كاملة للجبهة ، ونتيجة لذلك ، وقع الاختيار على المكونات التالية:
- بطاقات المنتج ؛
- سلة صغيرة
- القائمة
كانت الصعوبة الرئيسية في نقل السلال الصغيرة وبطاقات المنتجات إلى ReactJS هي المزامنة الفورية لكمية البضائع في كلا المكونين ، أي إذا كان هناك 3 كجم من الجزر في السلة ، فيجب أن يتم عرض 3 كجم في الكتلة لإضافة السلع إلى السلة (المنتقي) ، وعندما تتغير كمية البضائع في السلة الصغيرة ، يجب أن يحدث التغيير في المنتقي والعكس صحيح. أيضًا ، كان من الضروري تسوية تأخر طلب النهاية الخلفية بحيث تعمل الواجهة في أسرع وقت ممكن.
"
كان التعقيد الإضافي هو خصوصية المتجر (بيع المواد الغذائية بالتجزئة) ، حيث يوجد مفهوم السلع المرجحة بالقطعة. هذا المنتج يعتبر بالكيلوغرام ، لكن المستخدم يشتريها على شكل قطع ، على سبيل المثال البطيخ ، الذي لا يمكن للعميل شراؤه جزئيًا فقط. يجب عرض مثل هذا المنتج للمستخدم في عدد القطع ، ولكن في النهاية يتم اعتباره بالكيلوجرام.
كيف تحل المشكلة؟
من أجل عدم تكرار تخطيط المكونات في قوالب نظام 1C-Bitrix و React ، تقرر وضعه على مكونات React. يجب أن يتزامن اسم المكون في React مع قالب مكون نظام 1C-Bitrix. استخدمنا مثل هذه الأفكار:
- وحدة V8js لـ php ؛
- reactjs / reap-php-v8js ؛
- حزمة الويب.
العنصر الأول هو وحدة v8js ، والتي يجب أن تحول مكونات رد الفعل لدينا إلى تخطيط ثابت في بيئة php.
فيما يلي مكتبة صغيرة من React Community ، وهي عبارة عن غلاف لتسهيل تهيئة React في بيئة js لوحدة v8js.
وبالطبع Webpack ، حيث بدونها. بالتزامن مع babel ، يسمح لك باستخدام قوالب jsx و es6 القياسي لكتابة التعليمات البرمجية. سيتم عرض جميع الأمثلة في بناء الجملة es6. إنه بسيط للغاية ، ولكن إذا لم يتم فهمه على الفور ، فعليك تحديث ذاكرتك من أجله.
وحدة V8js ل PHP.هذه الوحدة هي امتداد لـ php ، والذي يسمح لك باستخدام V8 Javascript Engine لتنفيذ كود js في php. يتم تثبيته ببساطة شديدة ، مثل امتداد PECL عادي. الشيء الرئيسي هو أن لديك في مكتبات النظام الخاصة بك وملفات رأس V8.
حزمة الويبلبناء مكتبة مكونات التفاعل والتفاعل ، نستخدم webpack. تختلف ملفات التجميع للأمام والخلف قليلاً. نحن ذاهبون إلى 3 ملفات:
- Initize.js -> app.js - تطبيق للجبهة ؛
- reacelServer.js -> ReaberBuild.js - مكتبة تفاعلية من جانب الخادم ؛
- components.js -> responseComponents.js - مجموعة من مكونات التفاعل.
الفرق الرئيسي بين التجميع لتقديم الخادم هو أنه يجب وضع جميع المكتبات والمكونات في الكائن العام والمكتبات متصلة عبر الوظيفة المطلوبة. توجيه الاستيراد لسبب ما لا يعمل.
جميع ملفات المصدر موجودة في الدليل المحلي / قوالب / <اسم القالب> / src /
في جذر المشروع هو webpack.config.js - الإعدادات.
يمكن العثور على محتويات ملفات التجميع في نهاية المقالة.
يجب تثبيت Npm والحزم التالية:
- بابل
- بابل cli.
- حزمة الويب
- رد فعل
- رد الفعل دوم.
- تسطير سفلي // اختياري.
يتم التجميع عن طريق تشغيل الأمر:
حزمة الويب $.
تخصيص محرك قالب bitrixلتسجيل محرك مخصص في نظام 1C-Bitrix ، تحتاج إلى إضافة إعداداته إلى المتغير العام $ arCustomTemplateEngines. في المفتاح تحتاج إلى تحديد رمز المحرك الخاص بك. استخدمنا "JSX". في القيم تحتاج إلى تحديد امتداد الملف للقالب ، وظيفة عرض القالب. من المستحسن تحديد نوع أقل من القيمة 100 ، بحيث تكون أولوية محركنا أعلى من المعيار.
قم بإنشاء فئة JSXEngine بالطرق التالية:
- setEngine - تسجيل قالب ؛
- التهيئة - تهيئة v8js من خلال غلاف مكتبة reajjs / react-php-v8js ؛
- تنفيذ - وظيفة عرض القالب
ووظيفة مجمعة لتقديم قالب _JSXEngineExecute ، لأن يتطلب نظام 1C-Bitrix تسجيل وظيفة معينة.
لكي لا تهيئ في كل مرة نسخة تفاعلية ، ضعها في متغير ثابت وأضف طريقة تهيئة.
يتم تنفيذ واجهة خاصة في فئة ReactJS من مكتبة reajjs / React-php-v8js لتقديم مكون التفاعل. يأخذ مُنشئ الفئة معلمتين كمدخل ، والذي يجب أن يحتوي على كود js لوحدة التفاعل وجميع مكونات التفاعل التي يتم استخدامها في المشروع الذي تم جمعه عبر حزمة الويب. بعد التهيئة ، يمكننا تقديمها. للقيام بذلك ، استدعاء الأسلوب setComponent لتثبيت المكون مع معلمات اسم المكون وصفيف الدعائم. بعد ذلك ، ستعرض طريقة getMarkup محتويات المكون ، وسيعرض getJS كود js لربط المكون في المقدمة. تتطلب طريقة getJS معرف كتلة html التي يوجد فيها المكون في المعلمات. للقيام بذلك ، قمنا بتطبيق قالب بسيط لتغليف مكون مقدم في كتلة html. يتم نقل إعدادات الكتلة نفسها إلى ملف json ، والذي يتم وضعه في قالب مكون نظام 1C-Bitrix. يتم تخزين الإعدادات بتنسيق json.
نقل مكون إلى قالب جديدسنعرض ترجمة المكون إلى React باستخدام مثال مكون القائمة القياسي. تم دمج تخطيط المكون بالفعل في محرك القالب القياسي. توصي شركة React بسياسة لتقسيم الوظائف إلى مكونات. علاوة على ذلك ، يمكن أن تكون المكونات صغيرة جدًا. حتى علامة الارتباط التشعبي. لن نقوم بتقسيم قائمتنا إلى مثل هذه التفاهات ، ولكن مع ذلك سنقوم بتحليل صغير.
تستخدم قائمتنا تداخل حتى 3 مستويات. لذلك ، سيكون من المنطقي تقسيم وظيفة القائمة إلى 3 مكونات تفاعل ، كل منها لكل مستوى. إذا نظرت بعناية ، ستلاحظ أن عناصر القائمة في المستوى الثاني مرتبة في عمودين. يجب وضع هذه الوظيفة في مكون إضافي.
وبالتالي ، لدينا 4 مكونات. لنضعها في الملفات TopMenu.js و SubMenuLevel2.js و SubMenuLevel3.js و TwoColumnItem.js في دليل src / مكونات (انظر رمز المكونات الأخرى في النهاية):
لكي يعمل القالب الخاص بنا ، تحتاج إلى إنشاء قالب لمكون قائمة نظام 1C-Bitrix. يجب أن يتطابق اسم القالب مع اسم مكون التفاعل. داخل القالب ، تحتاج إلى وضع الملف بالامتداد المقابل لإعدادات محركنا. داخل الملف ، تحتاج إلى تحديد عقدة html التي سيتم فيها عرض مكون التفاعل الخاص بنا.
النتيجة
يتيح لك هذا الحل استخدام مكونات التفاعل على الجانب الخلفي وعلى الجانب الأمامي. وبالتالي ، يتم تخزين منطق عرض الوظيفة في مكان واحد ، مما يسهل إلى حد كبير دعم المشروع.
زادت سرعة عرض الصفحة الأولي بما يقرب من ثانية واحدة. لأن الآن لا تحتاج إلى إعادة رسم عنصر المنزل الذي يوجد فيه المكون. ReactJs تلتقطها على الطاير. أيضا ، اختفى وميض العناصر على الأجهزة الضعيفة.
في المستقبل ، تخطط للتبديل إلى عرض المكونات على الجانب الخلفي من خلال خدمة تستند إلى node.js وتنفيذ تطبيق صفحة واحدة مع الاحتفاظ بالقدرة على إنشاء صفحات لتحسين محركات البحث.
التطبيق
تهيئة. js
مكونات. js
responseServer.js
SubMenuLevel2.js
SubMenuLevel3.js
TwoColumnItems.js
