10 مبادئ لمشاريع الواجهة الأمامية القابلة للتطوير

1. مكونات التصميم وليس الشاشات

• حاول تغليف منطق المكون بالكامل بحيث يمكن عرضه بسهولة في أي مكان ، على سبيل المثال ، على شاشات مختلفة وفي أقسام مختلفة.
• تطبق جميع عمليات CRUD للحصول على البيانات اللازمة للتحكم / الموردين. ثم يتم نقل هذه البيانات إلى المكونات المرتبطة بها. أحد الأساليب الشائعة هو استخدام redux / vuex: يتم تخزين البيانات في التخزين وتعتبر صحيحة ، وتسترد الحاويات المعلومات اللازمة.

2. فصل طبقات العرض عن منطق / إدارة الأعمال

3. استخدم طريقة استخراج البيانات القياسية.

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

4. استخدم إستراتيجية إدخال مستخدم شائعة

• وتشمل هذه النماذج واختيار الملصق والتحقق من الصحة وشروط الخطأ.
• : antd.
• UI-, .

5.

• , , Cypress.
• - .
• e2e smoke- . API.

6. Storybook

7. استخدم النسالة والأشكال

• أمثلة اللنتر : ESLint ، stylelint .
• ستقوم معظم أدوات البدء السريع ، مثل إنشاء-رد-تطبيق ، بتثبيت Linters مسبقًا. ولكن إذا كنت تعمل مع قاعدة التعليمات البرمجية القديمة ، فقد تكون الوبر عديمة الفائدة.
• وهي تساعد في العثور على الأخطاء ، ولكن يمكن أيضًا استخدامها لتصميم نمط الرمز الذي يكتبه الفريق. هذا يقلل من الحمل المعرفي عند العمل على الميزات التي تلقيتها من زملائك.
• و sonarJS eslint المساعد سوف تساعد على تحسين نوعية رمز عن طريق فحص بنية منطقية.
• prettier — . . .

8.

• .
• CSS- CSS-in-JS.
• .

9.

• , gitflow — « Git, ».
• . .

• .
• غالبًا ما تكون قواعد كتابة رسائل الالتزام في Angular مناسبة لمشاريع أخرى. وسيساعد الالتزام على الالتزام بهذه القواعد عند كتابة رسائلك.

10. دعم التغيير

والقائمة تطول وتطول