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

تتمتع مكتبة React بأنماط تصميم  Design Patterns شائعة. دعونا نستعرض معًا في هذا المقال كيف يُمكننا الجمع بين إعادة الاستخدام و قابلية التخصيص باستخدام نمطي التصميم Render Props و Compound Pattern وكيف يُسهمان في بناء واجهات مستخدم مرنة.

هذا المقال سيكون مُقسم إلى جزأين حيث في الجزء الأول سنتطرق إلى الـ Compound Pattern، بينما في الجزء الثاني سنقوم بالتطرق إلى الـ Render Props.

تعريف نمط التصميم Compound Pattern

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

الآن، سنقوم بالانتقال إلى تطبيق عملي لنمط التصميم Compound Pattern، حيث سنبني مُكون شريط التقدم Progress Bar  و سيكون هذا الأخير headless، مما يعني أنه لن يتضمن أي تنسيقات CSS و هذا سيُعطي للمستخدمين الحرية التامة في طريقة تنسيق المكون حسب احتياجاتهم. لاحقا في الكود المصدري الكامل المُرفق مع هذا المقال حتى يكون بالإمكان رؤية الأمثلة لاستخدام المُكون و تخصيصه ستجد أنني استخدمت Panda CSS من ناحية التنسيق.

يمكن الوصول للكود المصدري الكامل لهذا الشرح على GitHub من خلال الرابط التالي: اضغط هنا.

الخطوة الأولى: إنشاء خطاف مُخصص Custom Hook بالاعتماد على React Aria

سنقوم أولاً بإنشاء Custom Hook يعتمد على مكتبة React Aria. سيسمح لنا هذا الـ Hook بإنشاء Progress Bar ذي امكانية وصول عالية High Accessibility.

لقد فصلنا الـ Logic Code في Custom Hook بدلا من إدارة كل شيء في نفس ملف المُكون لعدة أسباب:

  • إعادة الاستخدام: من خلال وضع الكود المتعلق بإدارة كل التفاصيل و العمليات التي يحتاجها المُكون للعمل بالشكل المطلوب في Custom Hook يمكننا الاستفادة منه في عدة أماكن دون الحاجة إلى إعادة كتابته كل مرة و هذا يعزز فعالية إعادة الاستخدام و يُقلل من التكرار، مما يُساهم في توفير الوقت والجهد في التطوير.
  • تنظيم كود المُكون: تجنب تعقيد كود المكون الرئيسي مما يجعله أكثر وضوحًا وسهل القراءة.
  • سهولة الصيانة: يجعل من السهل فهم وصيانة الكود. يمكن للمطورين التركيز على تفاصيل المكون الرئيسي دون الحاجة إلى التعامل مع كل تفاصيل العمليات الداخلية.
  • تحسين قابلية الاختبار: يُصبح من السهل إجراء اختبارات أحادية ‘Unit Tests’ مما يزيد من جودة الكود.

تحقيق أحد مبادىء الـ SOLID و هو مبدأ Single Responsibility: عندما نقوم بفصل مسؤولية العرض عن مسؤولية المنطق، فإننا نضمن أن المكون الرئيسي يركز فقط على عرض البيانات، بينما يتم التعامل مع جميع العمليات الفنية و المنطقية الأخرى في مكان منفصل.