ما هي افضل طريقة لترتيب ملفات المشروع الخاصة بالفرونت اند بحيث لا يضطر مبرمج الباك اند لنقل الملفات من مكان لآخر فيما بعد .. واللذي بالتأكيد يخلق مشاكل في التصميم.

لا يجب على مطور الواجهة الأمامية الاهتمام بما سيفعله مطور الواجهة الخلفية بالملفات، غير أنه سيهتم بتوفير هيكلة واضحة ومجموعة ملفات أصول مهيكلة بصورة صحيحة قابلة لتضمينها من مسارات عدة. فقد يحتاج مطور الواجهة الخلفية إعادة هيكلتها أو كتابتها وفق سياق معين أو ما إلى ذلك. ولذلك فإن مطور الواجهة الأمامية مطالب بتوفير هيكلة ملفات مفهومة وسهلة الوصول. وإليك مثالا عن ذلك: - ولنقل أن ذلك يتم بدون أي محزمات ويب مثل webpack أو vite:

front-end
_________index.html: الملف الجذر
_________assets: مجلد حاوي لأصول المشروع
________________webfonts: مجلد حاوي لجميع الويب فونتس المستخدمة
________________images: مجلد حاوي لجميع الصور المستخدمة
________________css: مجلد حاوي لجميع ملفات التنسيقات المستخدمة
________________js: مجلد حاوي لجميع ملفات جافاسكربت المستخدمة
_________components: مجلد حاوي لجميع ملفات مكونات التطبيق
_________pages: مجلد حاوي لجميع الصفحات الفرعية
_________lib: مجلد حاوي لأي مكتبات خارجية مستخدمة

وعليكم السلام ورحمة الله وبركاته.

من الضروري أن تكون ملفات المشروع الخاصة بالواجهة الأمامية منظمة بحيث لا يفسد التصميم في حال تم نقل أي ملف من مكان لآخر.

بجانب الطريقة التي ذكرها الأخ عدنان في التعليقات بتقسيم ملفات المشروع إلى مجلدات لها دلالات واضحة. على سبيل المثال:

assets/: للملفات الثابتة مثل الصور وملفات CSS.

components/: لمكونات الواجهة الأساسية.

pages/: لصفحات التطبيق.

utils/: للدوال والأدوات المساعدة.

styles/: لملفات CSS أو SCSS المتعلقة بالتصميم.

يمكنك استخدام أنظمة تدير ال Packages الخاصة بالمشروع بشكل أفضل مثل npm أو yarn ، يمكنك البحث في اليوتيوب حول مقطع فيديو يشرح الطريقة بشكل مفصل.

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

ويوجد العديد من الممارسات التي يمكنك إتباعها ولكن بشكل عام حاول على قدر الإمكان تنظيم ملفات المشروع داخل مجلدات تعكس هيكل المشروع بشكل عام. على سبيل المثال، يمكن وضع ملفات CSS في مجلد styles، وملفات JavaScript في scripts، والصور في images، وهكذا.

حاول دائماً الإطلاع على مشاريع مفتوحة المصدر التي تستخدم التقنيات التي ترغب في تعلمها، مثل GitHub. انظر إلى كيفية تنظيمها، وكيفية تقسيمها إلى ملفات ومجلدات مختلفة.

ومن خلال إطار عمل معين مثل React أو Angular أو Vue.js معرفة كيف ينظمون مشاريعهم. فهم كيف يقومون بتقسيم التطبيق إلى مكونات وملفات.

وأخيراً من خلال التطبيق العملي على بناء مشاريع بسيطة أو واجهات مستخدم في دورة ما حاول إتباع وفهم الطريقة التي يستخدمها المدرب.