ما تعلمته عن React من بناء Pagelyze

غيّر بناء Pagelyze نظرتي لـ React. توقفت عن النظر إلى الجانب النظري وبدأت في النظر إلى بنية المنتج (product architecture).

Pagelyze هي أداة لتدقيق المواقع الإلكترونية. ليست مجرد تطبيق تجريبي صغير، بل تتعامل مع تقارير التدقيق، ومنطق تسجيل النقاط، ولوحات التحكم (dashboards). وبسبب ذلك، كان عليّ الإجابة على سؤال واحد:

هل سيبقى هذا الكود نظيفاً مع نمو المنتج؟

الـ Hooks مثل useState أو useEffect مهمة، لكنها ليست القصة بأكملها. يمكنك استخدام قواعد كتابة (syntax) حديثة ومع ذلك تظل تواجه فوضى في الصيانة. المشكلة عادةً تكمن في "المسؤولية" (responsibility).

في الإعداد السيئ، يتولى ملف واحد كل شيء، بدءاً من تحميل البيانات وصولاً إلى عرض النتائج. هذا الأسلوب يفشل مع التوسع (scale).

الطريقة الأفضل هي تقسيم المكونات (components) حسب الغرض منها:

  • AuditSummary
  • LeadCheckPanel
  • EvidenceList
  • ServiceRecommendationCard
  • ReportActions

كل جزء له وظيفة واحدة. يمكنك تغيير تصميم بطاقة (card) دون كسر منطق البيانات (data logic).

توقف عن التساؤل عما إذا كان يجب عليك استخدام Redux أو Context. اسأل نفسك: من الذي يحتاج إلى الحالة (state)؟

  • حالة واجهة المستخدم المحلية (Local UI state): التبويبات (tabs) والنوافذ المنبثقة (modals)
  • حالة النموذج (Form state): الروابط (URLs) والتحقق من الصحة (validation)
  • حالة الخادم (Server state): التقارير وعمليات الفحص (scans)
  • الحالة العامة (Global state): ملف تعريف المستخدم والصلاحيات

يجب أن تمثل الـ Custom hooks السلوك (behavior). لا ينبغي أن تكتفي بمجرد نقل الكود الفوضوي إلى ملف آخر. الـ hook الجيد هو الذي يجلب البيانات بحيث يقتصر دور مكون الصفحة (page component) على تنسيق الشاشة فقط.

قم بتنظيم مجلداتك حسب الميزة (feature):

  • features/audit-report/
  • features/lead-rescue/
  • features/dashboard/

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

ابنِ بوضوح. حدد عنق الزجاجة (bottleneck). أصلح ذلك الجزء تحديداً.

أفضل ممارسات React تتعلق بالقرارات. أنت من يقرر ما يملكه المكون (component). أنت من يقرر أين تعيش الحالة (state). وأنت من يقرر ما إذا كان المسار (route) يساعد المستخدم أم لا.

Pagelyze هو اختباري. أنا لا أختبر قدرتي على بناء شاشة، بل أختبر قدرتي على الحفاظ على نظافة المنتج مع نموه.

Source: https://dev.to/prazink/what-building-pagelyze-taught-me-about-react-best-practices-5fhb