أساسيات معمارية الواجهات الأمامية › التنفيذ 4 / 5 السابق التالي

ضوابط الحماية والقيود

الدرس 36 من 38 · التنفيذ · 8 دقيقة و1 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

الموارد

التفريغ النصي

[00:02] قد يكون للنسخة الأولية من مشروعنا بنية نظيفة للغاية وتصميم محدد جيدًا. ولكن مع استمرار نمو قاعدة الشيفرة وزيادة عدد الأشخاص الذين يساهمون فيها، فمن المحتمل جدًا أن تنمو قاعدة الشيفرة فوضوية وتزيد من التعقيد أيضًا. لذلك من المهم قضاء بعض الوقت في تحديد بعض الحواجز والقيود، خاصة في بداية المشروع إذا استطعت. بهذه الطريقة يمكننا حمايتها لأنها تنمو مع مرور الوقت.

[00:32] أريد أن أشارك في هذا الفيديو بعض أدواتي المفضلة التي استخدمتها في الماضي لتطبيق هذه الأنواع من القيود على قاعدة الشيفرة. أول واحد يسمى Dependency Cruiser. هذه مكتبة تعمل على كل مشروع JavaScript أو TypeScript يمكننا استخدامه للتحقق من اعتماديات قاعدة الشيفرة الخاصة بنا مقابل مجموعة من القواعد.

[00:55] على سبيل المثال، واحدة من أكثر القواعد شيوعًا التي قد نرغب في تحديدها لتطبيقنا هي أن الوحدات لا يمكن أو لا ينبغي أن تعتمد على بعضها البعض. أحد الأسباب التي تجعلنا نحدد الوحدات في المقام الأول هو الحفاظ على الأشياء لطيفة ومنفصلة. على سبيل المثال، لدي هنا وحدة المطعم الخاصة بي، ووحدة التسليم الخاصة بي، ووحدة الخادم، وأريد أن تكون مستقلة قدر الإمكان.

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

[01:40] الآن، المشكلة في هذا هي أننا نجعل وحدة البحث الخاصة بنا تعتمد على وحدة مطعم بطريقة ضمنية تقريبًا. من المحتمل جدًا أن يتغير هذا المكون بمرور الوقت. هذا المكون الذي ينتمي فقط إلى وحدة مطعم قد كسر وحدة البحث الخاصة بك بشكل غير متوقع. هذه واحدة من المفاجآت التي لا نحبها. نزيد من احتمالات حدوث هذه السيناريوهات عندما نكسر تغليف هذه الوحدات بهذه الطريقة.

[02:12] لذلك يمكننا استخدام Dependency Cruiser، هذه المكتبة، لإنشاء هذه القواعد والقول، على سبيل المثال، أننا لا نريد أن يعتمد مكون في وحدة على مكون يتم تعريفه في وحدة مختلفة. دعوني أريكم كيف يبدو ذلك.

[02:26] يمكنك العثور على هذا المثال في فرع constraints في المستودع. هذا هو أساسا أنا فقط تثبيت مكتبة Dependency Cruiser وأنا خلقت هذا الملف dependency-cruiser.js التي أنا فقط تعريف قاعدة واحدة. هذه قاعدة محظورة حول كيفية عدم اعتماد الوحدات على وحدة أخرى في مجلد منفصل. إذاً هذا خطأ أريد أن يكسر هذا بناء بلدي إذا كسرت هذه القاعدة.

[02:59] هنا لديك هذه التعريفات التي يمكنك العثور على مزيد من المعلومات حول كيفية تعريف هذا باستخدام التعبيرات العادية في وثائق Dependency Cruiser. دعوني أريكم كيف يعمل هذا.

[03:09] إذا قمت بتشغيل البرنامج النصي NPM تشغيل التحقق من القيود هنا، فإنه سيتم التحقق من القيود بلدي وسوف يقول أنه لم يتم العثور على انتهاكات التبعية لأن هذا هو كل شيء جيد. أنا لا أكسر أي قواعد. ولكن الآن دعونا نرى ما إذا كنت، على سبيل المثال، في مكون كاروسيل المطعم هذا الذي ينتمي إلى وحدة التسليم الخاصة بي، استيراد هذه الوظيفة. هذه هي إحدى الوظائف التي حددناها في أحد مقاطع الفيديو السابقة، ولكن هذه الوظيفة تنتمي إلى وحدة المطعم، أليس كذلك؟ انها ليست حقا عنصر مشترك أو وظيفة مشتركة أو أي شيء من هذا القبيل. وهو ينتمي إلى وحدة مجاورة.

[03:51] لذلك أنا ذاهب لحفظ ذلك وأنا ذاهب لتشغيل الاختيار Dependency Cruiser مرة أخرى، وهذه المرة يجب أن تفشل وسوف اسمحوا لي أن أعرف ما هو انتهاك بلدي هنا. وإذا قمت بالتمرير طوال الطريق، أرى أن لدي خطأ في وحدة التسليم هذه التي تحاول استيراد شيء من وحدة المطعم.

[04:09] هذا مجرد مثال على إحدى القواعد التي يمكنك تحديدها، ولكن ربما يمكنك التفكير في قواعد أخرى أيضًا. ربما لا تريد أن تعتمد الفرق على عمل بعضها البعض أو شيء من هذا القبيل، ويمكنك استخدام Dependency Cruiser لتحديد تلك القواعد.

[04:27] أريد أن أذهب بسرعة على عدد قليل من الأدوات الأخرى التي أعتقد أنها يمكن أن تكون مفيدة. في بعض الحالات، القواسم المشتركة هي أداة أحدث التي يتم استخدامها، وأعتقد، في الغالب في repos أحادية، ولكن يمكن أن توفر بعض مستويات مماثلة من القيود والشيكات ل repos أحادية الخاص بك. حتى تتمكن من مساعدتك في تنظيم قاعدة الشيفرة الخاصة بك والتأكد من عدم وجود أي تبعيات دائرية أو أي شيء من هذا القبيل. يمكنك تحديد ملكية حزم معينة ويمكنك وضع علامة عليها وما إلى ذلك.

[04:56] لذلك إذا كنت تستخدم repo أحادي، فهذه أداة جيدة جدًا لإلقاء نظرة عليها. كما أنه يوفر بعض التصور لطيفة جدا من الحزم الخاصة بك وجميع التبعيات الخاصة بك.

[05:08] إذا كنت تهتم بالأداء، دعنا نقول أن الأداء هو أحد سمات الجودة التي تحاول الترويج لها، فهناك بعض الأشياء التي يمكنك وضعها أيضًا لحماية معماريتك عندما يتعلق الأمر بالأداء. أداة واحدة بسيطة أحب استخدامها هي هذه الأداة التي تسمى حجم الحزمة. هذا فحص بسيط جدًا لحجم حزمك المختلفة، ويمكنك ببساطة تحديد كائن يحتوي على أنواع الملفات أو أسماء الملفات التي تريد التحقق منها، وما هو الحد الأقصى للحجم الذي تريد السماح به. إذا كانت ملفاتك تنمو فوق هذا الحد، فسيفشل البناء.

[05:49] لذا ستعلمك هذه الأداة بوجود حالة استخدام لهذا، حتى إذا كنت لا تهتم كثيرًا بالأداء لأنك قد ترغب في التحقق من أن حزمك لا تمر بميغابايت واحد أو شيء كبير جدًا من هذا القبيل، لأنك تريد منع تثبيت مكتبة أو حزمة ثقيلة جدًا عن طريق الخطأ. هذه الأداة سوف تساعدك على التقاط تلك الأخطاء كذلك.

[06:09] إذا كان لديك متطلبات أداء أكثر صرامة، شيء يمكنك النظر فيه هو هذا الشيء يسمى ميزانيات الأداء. سأربط هذه المقالة التي تحتوي على الكثير من المعلومات حول كل ما تحتاج إلى معرفته حول كيفية عملها. لكنها في الأساس طريقة للتحقق من العناصر الحيوية الأساسية للويب والمقاييس الأخرى مثل حجم الحزمة على نطاق واسع أو حجم صورك وما إلى ذلك. سوف يعطونك تنبيهات من شأنها أن تتيح لك معرفة ما إذا كنت فوق عتبة معينة يمكنك تحديدها على أنها ميزانيتك.

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

[07:08] الأداة الأخيرة التي أريد أن أدعو بها هي امتداد VS Code هذا المسمى SonarLint. لا يرتبط هذا بالمعمارية في حد ذاتها، بل يتعلق أكثر بالتصميم، ولكنه يمكن أن يساعدك في إدارة تعقيد الشيفرة الخاص بك. أحد الأشياء التي يتحقق منها هذا الامتداد هو التعقيد المعرفي لشفرتك. لذلك إذا كان لديك الكثير من مسارات التنفيذ أو إذا كان الشيفرة الخاص بك، كما تعلمون، إذا كانت وظائفك كبيرة جدًا، فسوف تتيح لك معرفة المشاكل وما يمكنك القيام به لإصلاحها.

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