كيفية تحقيق إعادة الاستخدام مع مكونات التفاعل

تعد قابلية إعادة الاستخدام واحدة من أكثر الكلمات الشائعة استخدامًا في هندسة البرمجيات اليوم. لقد وعدت به مجموعة واسعة من الأطر والأدوات والنماذج ، والتي يبدو أن لكل منها ليس فقط منهجه الخاص لتحقيق إعادة الاستخدام ، ولكن تعريفه الخاص للكلمة نفسها.

إذن ماذا نعني بإعادة الاستخدام؟

إعادة الاستخدام الحقيقية ليست عملية مخصصة ، ولكنها استراتيجية تطوير. يجب أن تكون المكونات القابلة لإعادة الاستخدام مبنية من الألف إلى الياء مع مراعاة إمكانية إعادة الاستخدام ، والتي تتضمن تخطيطًا دقيقًا وتصميم واجهة برمجة تطبيقات متعاطفة. علاوة على ذلك ، في حين أن أدوات وأطر التطوير الحديثة يمكن أن تدعم وتشجع إعادة استخدام الكود ، إلا أنه لا يمكن تحقيق إعادة الاستخدام من خلال التكنولوجيا وحدها - فهي تتطلب عمليات تنفذ بشكل متسق عبر فرق العمل ، والالتزام على جميع مستويات المؤسسة.

لذلك عندما نناقش إمكانية إعادة الاستخدام ، فإنها ليست مجرد مناقشة فنية. ويشمل أيضًا ثقافة الشركات والتدريب ومجموعة من الاعتبارات الأخرى. سنتطرق إلى عدد قليل من هؤلاء هنا ، ولكن النقطة المهمة هي أن إعادة الاستخدام هي عملية تمس كل مرحلة من مراحل التنمية وكل مستوى من مستويات المنظمة.

يتكون Walmart من العديد من العلامات التجارية ، بما في ذلك Sam's Club و Asda وفروع إقليمية مثل Walmart Canada و Walmart Brazil. عبر هذه العلامات التجارية ، لدينا العشرات من التطبيقات الأمامية التي صممها وصيانتها المئات من المطورين.

نظرًا لأن لكل من هذه العلامات التجارية وجودها على الإنترنت ، فلكل منهم مطورون يعملون على مكونات مشتركة بين جميع العلامات التجارية لـ Walmart - صورة دائري ، عناصر ملاحية مثل فتات الخبز ، منشورات الطيران ، مكونات نموذج بطاقة الائتمان ، على سبيل المثال. يمثل ازدواجية العمل الذي أنجزه بالفعل فريق آخر مضيعة للوقت والمال ، كما أنه يخلق مساحة أكبر من الأخطاء. يتيح القضاء على هذا الازدواج للمطورين قضاء المزيد من الوقت في المشاريع التي تحقق قيمة جديدة لتجربة العملاء.

في الخلفية ، تعد مشاركة الكود عبر العلامات التجارية أكثر سهولة: يمكن لخدمة واحدة أن تتلقى طلبات من علامات تجارية مختلفة متعددة وتعيد البيانات المناسبة لتلك العلامة التجارية (وهناك طرق قليلة للتعامل مع ذلك استنادًا إلى شكل البيانات). على الواجهة الأمامية ، يكون الموقف أكثر تعقيدًا لأنه يتضمن أخذ البيانات التي توفرها الخلفية وتطبيق السمات والتحولات الأخرى المناسبة لعلامة تجارية معينة وعرض. إن القيام بذلك بطريقة تعزز إعادة الاستخدام ليست مشكلة تم حلها بالكامل.

React Component Reuse atWalmartLabs

بالنسبة إلى Walmart.com ، اخترنا React لإطار عمل الواجهة الأمامية الخاص بنا ، وكان أحد الأسباب التي اخترناها هو أن طراز المكون الخاص به يوفر نقطة بداية جيدة لإعادة استخدام الشفرة - خاصة عند الاقتران مع Redux لإدارة الحالة. ومع ذلك ، لا تزال هناك تحديات كبيرة لإعادة استخدام رمز الواجهة في مؤسسة بحجم Walmart.

القدرة الفنية على مشاركة الكود

التحدي الأول ينطوي على الوسائل التقنية لمشاركة الكود - تحتاج المكونات إلى الإصدار ، وسهلة التركيب ، وقابلة للترقية. وضعنا جميع مكونات React في منظمة GitHub منفصلة. حاليًا ، يتم تجميع المكونات في repos استنادًا إلى الفرق التي أنشأتها ، ولكننا في طريقنا نحو إعادة تعيين موضع وظيفي ، مثل repo "Navigation" التي تحتوي على مكونات breadcrumb وعلامات التبويب و sidenav. يتم بعد ذلك نشر المكونات في سجل npm الخاص ، مما يعني أنه يمكن للمطورين تثبيت إصدار مكون معين بسهولة ، مما يضمن عدم توقف تطبيقاتهم فجأة عن الترقية.

في هذه المرحلة ، نظرًا لأن الكود يتم مشاركته بين الفرق ، نحتاج إلى ضمان وجود هيكل ثابت ومعايير تشفير عبر مئات المكونات ، حتى مع ترقية التبعيات وتغيير الاحتياجات. لهذا السبب أنشأنا نماذج إلكترود للمكونات والتطبيقات. تشتمل النماذج الأولية على ملفات تهيئة للنسق ، التحويل ، والتجميع ، وتوفر نقطة مركزية يمكننا من خلالها إدارة التبعيات والمهام / البرامج النصية الأساسية. بدءاً من بنية مشتركة ووضع معايير ترميز متسقة في جميع المشاريع ، يمكننا من الحفاظ على أفضل الممارسات الحديثة في جميع أنحاء المنظمة ويزيد من ثقة مطوري البرامج في كود بعضهم البعض ، مما يحسن فرص إعادة استخدام المكونات القابلة لإعادة الاستخدام فعليًا. تم تحسين هذه الثقة بشكل أكبر من خلال نظام صارم للتكامل المستمر / النشر المستمر ، بما في ذلك قواعد لرمز الشفرة ، وقياس الأداء ، والاختبار عبر أجهزة متعددة ، ومتصفحات ، ودقة الشاشة. يمكن أن يشتمل نظام CI على قواعد لنشر نسخة تجريبية من أحد المكونات عند إرسال PR وإجراء اختبارات وظيفية لجميع التطبيقات التي تستخدم هذا المكون ، للتأكد من أن PR لا يكسر أي شيء.

فريق ميتا

في الأيام الأولى من هذا المشروع ، ساهمت غالبية المكونات المشتركة بفرق قليلة فقط ، وتميل تلك المكونات إلى التغيير بسرعة كبيرة. في النهاية ، اخترنا عددًا قليلاً من المطورين الذين لديهم فهم عميق بشكل خاص لإطار Electrode و Walmart internals وأنشأنا مجموعة نسميها فريق meta. يكرس هؤلاء الأفراد بضع ساعات أو يوم كل بضعة أسابيع لمراجعة الكود الذي يذهب إلى المنظمة المكونة ، والتأكد من اتباع جميع أفضل الممارسات ، والمساعدة بشكل عام بأي طريقة ممكنة. طور هذا الفريق أيضًا معرفة شاملة بما يجري بناؤه عبر المؤسسة ، وعمل كسفراء لمشروع Electrode في فرقهم الخاصة. أخذ أعضاء فريق Meta أيضًا معلومات حول تغييرات النموذج الأصلي المعلقة على فرقهم ، وجمعوا تعليقات لمشاركتها مع فريق Electrode الأساسي.

كانت هذه الخطوات بداية رائعة ، لكننا ما زلنا نرى المزيد من الفرص لتحسين إعادة استخدام الشفرة كمؤسسة.

مشكلة اكتشاف المئات من المكونات

بدأنا نلاحظ الكثير من الرسائل في قنوات سلاك لدينا على طول موضوع مشترك. أراد المطورون معرفة ما إذا كان قد تم إنشاء مكون بالفعل لمهمة معينة أم لا. أرادت فرق UX أن تكون قادرًا على رؤية المكونات المتاحة. أراد مديرو المشروعات معرفة المكونات التي تم بناؤها بواسطة فرق أخرى. كان الخيط المشترك بين كل هذه الرسائل هو الاكتشاف. كنا بحاجة إلى طريقة سريعة وبسيطة لاكتشاف المكونات المتاحة ، لرؤيتها قيد الاستخدام والتفاعل معها ، وللتعرف على تنفيذها وتكوينها والاعتمادية.

إجابتنا على هذه المشكلة هي Electrode Explorer ، والتي ناقشتها في منشور سابق. يمكّن Explorer مطورينا من تصفح مئات المكونات المتاحة فيWalmartLabs ، وقراءة الوثائق الخاصة بهم ومعرفة الشكل الذي يشبهونهم ، وحتى تصفح تاريخ إصداراتهم لمعرفة كيف تغيرت مع مرور الوقت. نظرًا لأن Electrode Explorer يوفر واجهة ويب لجميع مكونات React في إحدى المؤسسات ، فلن يحتاج المطورون إلى "تثبيت npm" لأحد المكونات لرؤيته والتفاعل معه.

الازدواجية من خلال تسرب الشقوق

ولكن حتى مع كل هذه الأدوات والعمليات لتسهيل إعادة استخدام الشفرة ، ما زلنا نشهد مشاكل. كانت إحدى المشكلات هي أن الفرق غالبًا ما طورت مكونات جديدة دون إدراك أنها قد تكون مفيدة للفرق الأخرى. لا يمكن إعادة استخدام المكونات إذا لم يتم تضمينها في النظام البيئي القابل لإعادة الاستخدام. حتى داخل نظام المكونات المشتركة ، رأينا الكثير من الازدواجية ، أو المكونات التي اتبعت مقاربات مختلفة قليلاً لمشاكل مشابهة للغاية. ما أدركناه هو أن الحلول التكنولوجية ليست كافية - يجب أن يكون هناك تغيير على مستوى الشركة في التفكير ، حيث يتبع أصحاب المصلحة على جميع المستويات نهجًا أوليًا لإعادة الاستخدام. يتضمن ذلك قضاء بعض الوقت في تعميم المكونات بحيث يكون إعادة الاستخدام أسهل ، وتوسيع المكونات الموجودة بدلاً من البدء من نقطة الصفر ، والسعي بوعي إلى فرص لمشاركة الكود كلما كان ذلك ممكنًا.

للمساعدة في هذا التغيير في التفكير ، أنشأنا عملية اقتراح مكون. في إطار هذا النظام ، يناقش المطورون المكونات الجديدة قبل بدء العمل عليها. يوفر هذا فرصة للمطورين في الفرق الأخرى لاقتراح حلول أو طرق بديلة حالية ، ويسمح للآخرين في المؤسسة بمعرفة ما يحدث.

يساعد نظام الاقتراح جنبًا إلى جنب مع عملية التعريف على عدم حدوث ازدواجية في الشقوق.

أهمية CI / CD

كانت المشكلة الكبيرة التي واجهناها هي أن فريقًا ما سيعمل على مكون ويكسر طلب فريق آخر. إذا لم تقم بإغلاق إصدار المكون الخاص بك ، فقد يفشل CI / CD نظرًا لتعديل مكون من قبل فريق آخر - إنه شعور فظيع ، ويؤدي ذلك إلى قيام العديد من الفرق بإغلاق المكونات في إصدار محدد للغاية ، حيث أنها قد لا تأخذ حتى إصدارات جديدة التصحيح.

هذا هو المكان الذي يلعب فيه CI / CD. عند تحديث إصدار مكون ، يجب على الأتمتة التحقق مما إذا كان يكسر أي تطبيقات مستهلكة على هذا الإصدار الرئيسي - يجب أن يتحقق هذا حتى إذا قام التطبيق بتأمين إصدارات مكوناته. إذا لم يكن هناك انقطاع ، فنحن نريد أن يرسل نظام CI / CD طلبًا للعلاقات العامة يقوم بتحديث الإصدار المغلق إلى الإصدار الجديد الذي لم يقطع التطبيق. إذا كان هناك استراحة ، فيجب إخطار كلا الفريقين بالتحدث عن المشكلة.

Innersource

أساس مقاربتنا لإعادة الاستخدام هو اعتناقنا لفلسفة المصدر المفتوح / المصدر الداخلي ، كما وصفها لوران ديسيجور في منشور سابق. WalmartLabs كان مستخدمًا ومساهمًا في فتح المصدر لسنوات ، كما يتضح من مشاريع مثل Hapi و OneOps و Electrode. أقل وضوحًا من خارج الشركة هو التزامنا بالمصدر الداخلي ، وهو التطبيق الداخلي لنموذج المصدر المفتوح. في نهج المصدر الداخلي ، لا يوجد فريق أو مطور "يمتلك" مكونًا - تتم مشاركة جميع المكونات في جميع أنحاء المؤسسة. هذا يلغي الاختناقات ويمكّن المطورين من تحسين المكونات الحالية.

تزيد هذه السياسات من فرص إعادة الاستخدام بشكل كبير - ولكن الأهم من ذلك أنها تشير إلى المطورين التزامنا كشركة بفلسفة التعاون والتعاون. إنها تُمكِّن المطورين من استخدام وقتهم وخبرتهم حيثما تكون هناك حاجة ماسة إليها ، بدلاً من انتظار اختناق الاختناقات ، ويفيدون الشركة بطرق حقيقية وقابلة للقياس.

استنتاج

إن قابلية إعادة الاستخدام ليست مجرد قرار تقني ، بل هي أيضًا قرار فلسفي يتطلب الالتزام التنظيمي وله آثار بعيدة المدى. فيWalmartLabs ، رأينا الفوائد التي يمكن أن تجلبها - في الوقت الحالي ، نقوم بنقل SamsClub.com إلى منصة Electrode ، ويعيد مطورونا استخدام مئات المكونات من Walmart.com معهم لمطابقة علامة Sam التجارية.

أخبرنا بقصة إعادة الاستخدام - ما هي العقبات التي واجهتك؟ كيف حلتهم؟ ما هي الفرص لمزيد من التحسين ترى؟