00:00:00حصل ريأكت مؤخراً على أداة جديدة لفحص الأنماط البرمجية السيئة تُدعى “React Doctor”.
00:00:05ابتكرها إيدان باي، وهو المطور الموهوب نفسه الذي ابتكر Million.js،
00:00:11و React Grab، و React Scan، و Amy.
00:00:14وفي فيديو اليوم، سنلقي نظرة على هذه الأداة، وسنرى آلية عملها، وسنجربها
00:00:19بأنفسنا.
00:00:20سيكون الأمر ممتعاً للغاية، فلنبدأ.
00:00:27إذن، React Doctor هي أداة بسيطة تعمل عبر واجهة السطور البرمجية (CLI)، ومصممة لاكتشاف الأنماط البرمجية السيئة الشائعة في ريأكت
00:00:33مثل الاستخدام غير الضروري لـ UseEffects، أو مشاكل الوصول، أو تمرير الخصائص المتكرر (Prop Drilling).
00:00:38داخلياً، تعتمد الأداة على OX lint، وهي واحدة من أسرع أدوات فحص الكود المكتوبة بلغة Rust.
00:00:43وبما أن OX lint مبنية بلغة Rust، فيمكنها فحص عشرات الآلاف من السطور البرمجية في
00:00:44أجزاء من الثانية.
00:00:49تستخدم هذا لبناء شجرة بنية مجردة (AST) لمشروعك، بحثاً عن
00:00:50أنماط ريأكت محددة مثل استخدام الـ hooks، وهيكلة الخصائص، وحدود المكونات.
00:00:56وهي مبنية على أكثر من 47 ممارسة فضلى في ريأكت، وتتضمن فحوصات مفيدة مثل، على سبيل المثال،
00:01:01الفحص بحثاً عن مفاتيح أمنية مكتوبة يدوياً عن طريق الخطأ مثل هذه، أو مثل هذه، حيث
00:01:08تتحقق من نمط حالة التحميل (loading state) وتقدم تقريراً جيداً حول متى يجب استخدامها
00:01:13مقابل متى يجب استخدام useTransition بدلاً من ذلك.
00:01:19وهذا المشروع مفتوح المصدر بالكامل وما زال حديثاً جداً.
00:01:21لذا فهذه فرصة رائعة للمجتمع للمساهمة في المشروع من خلال إضافة
00:01:25فحوصات لممارسات جيدة أخرى تعتقدون أنها قد تكون مفقودة هنا.
00:01:30أعتقد أن الجزء الأروع في هذا المشروع هو واجهة المستخدم.
00:01:33تتمتع بتصميم وجمالية رائعة، بالإضافة إلى أنها سريعة جداً بفضل OX lint.
00:01:36وعلاوة على كل ذلك، يمكنك أيضاً تشغيلها كمهارة لمساعدك البرمجي بالذكاء الاصطناعي،
00:01:42كما يمكنك استخدامها برمجياً في شيء مثل Node.js API، على سبيل المثال.
00:01:47والآن، دعونا نجرب هذه الأداة بأنفسنا.
00:01:52لدي هذا المشروع البرمجي المبني على ريأكت، وهو مجرد أداة بسيطة لتصور الرسوم البيانية للأسهم،
00:01:54كنت قد كتبته قبل ست سنوات، في وقت لم يكن فيه الذاء الاصطناعي موجوداً بعد.
00:02:00سيكون من المثير جداً رؤية مدى جودة كود ريأكت الذي كتبته قبل ست سنوات.
00:02:04لذا سأقوم بتشغيل أمر React doctor في مستودع الكود الخاص بي.
00:02:09وكما ترون، نحصل على النتيجة فوراً.
00:02:12وانظروا إلى ذلك.
00:02:15مشروعي حصل على نتيجة مثالية تقريباً.
00:02:16أعني، يثلج صدري معرفة أنني حتى قبل ست سنوات، كنت أكتب كود ريأكت
00:02:18بجودة عالية.
00:02:24حسناً، دعونا نرى ما اكتشفته الأداة.
00:02:25لقد حصلنا على تحذير بشأن استخدام الفهرس (index) كمفتاح (key)، وهو تنبيه وجيه جداً.
00:02:27ثم تعرفت أيضاً على أن مكتبة recharts ثقيلة.
00:02:31لذا تنصحني باستخدام التحميل الكسول (lazy loading) بدلاً من ذلك.
00:02:35كما لاحظت أيضاً أن لدي أربعة استدعاءات لـ useState داخل useEffect واحد.
00:02:38وتقترح عليّ التفكير في استخدام useReducer.
00:02:44كلها نقاط وجيهة للغاية.
00:02:46شكراً لك، React doctor.
00:02:48والآن دعونا نجرب تشغيلها على قاعدة كود أكبر.
00:02:49إليكم مشروع CRM مشهور جداً يسمى 20، والمفترض أن يكون
00:02:52بديلاً مفتوح المصدر لـ Salesforce.
00:02:57وهو مكتوب بلغة ريأكت.
00:02:59لذا دعونا ننسخ هذا المستودع ونرى كيف تقيمه أداة React doctor.
00:03:00بمجرد التشغيل، نرى أن React doctor تكتشف تلقائياً أن هذا المشروع
00:03:04عبارة عن مستودع موحد (monorepo)، وتتعرف على الحزم بداخله.
00:03:08فلنبدأ بتقييم حزمة الموقع التسويقي الخاص بهم.
00:03:12وكما نرى هنا، النتيجة جيدة جداً أيضاً.
00:03:15لقد حصلنا على خطأ واحد، لكنه مجرد وسم alt مفقود للصورة.
00:03:18لذا أستطيع القول أن هذه نتيجة جيدة جداً بشكل عام.
00:03:22حسناً، دعونا نتحقق من حزمة الواجهة الأمامية (front)، على سبيل المثال.
00:03:25هذه الحزمة كان أداؤها أسوأ قليلاً، لأننا حصلنا على 99 خطأ، لكنها لا تزال في المنطقة الخضراء.
00:03:30إليكم ما أوصي به.
00:03:35إذا كنت مطوراً يرغب في تحسين ملفه الشخصي على GitHub، فهذه أداة رائعة
00:03:37لفحص مشاريع مفتوحة المصدر متنوعة وتحديد المواضع التي يمكنك تقديم
00:03:41مساهمات كبيرة فيها.
00:03:47هذا هو برنامج React doctor باختصار، أعتقد أنه أداة
00:03:48خفيفة ومفيدة جداً يمكنها المساعدة بشكل كبير في مراجعة كود
00:03:52مشاريع ريأكت والتحقق من سلامتها.
00:03:58وبالتأكيد سأستخدمها في مشاريعي الخاصة مستقبلاً.
00:03:59ويا أصدقاء، إذا وجدتم هذا الفيديو مفيداً، يرجى إخباري من خلال الضغط على زر الإعجاب
00:04:03أسفل الفيديو.
00:04:07ولا تنسوا أيضاً الاشتراك في قناتنا حتى لا يفوتكم أي من
00:04:09فيديوهاتنا المستقبلية.
00:04:14كان معكم أندريس من Better Stack، وأراكم في الفيديوهات القادمة.
00:04:15كنت معكم أندريس من Better Stack، وأراكم في الفيديوهات القادمة.