سناك خفيف عن الـ Separation of Concerns

تخيل معايا أنك شغال على مشروع كبير، وكل حاجة فيه داخلة في بعض: CSS مع JavaScript، و API logic متشابك مع UI components.

الدنيا هتبقى مدعكة على الآخر...لكن لما تفصل كل حاجة في مكانها الصح، الكود مش بس هيبقى سهل الفهم، ده كمان هيكون سهل في إنك تعدل عليه وتضيف ميزات جديدة بسهولة...

وهنا بييجي دور الـ Separation of Concerns...💯

🧩 يعني إيه Separation of Concerns؟

ببساطة كده، هو مبدأ برمجي بيقول:

"مينفعش تخلط كل حاجة مع بعض في مكان واحد في الكود، والأفضل إنك توزع مسؤولياتك بحيث كل جزء من الكود يبقى مسؤول عن حاجة واحدة بس."

تخيل لو عندك شقة صغيرة، وكل حاجة فيها محطوطة في أوضة واحدة. هدومك، مطبخك، مكتبك، وحتى سريرك! كل حاجة متلخبطة. هتعيش إزاي؟

نفس الفكرة مع الكود:

📍 الـ HTML: مسؤول عن البنية (structure).

📍 الـ CSS: مسؤول عن الشكل (style).

📍 الـ JavaScript​: مسؤول عن السلوك (behavior).

كل حاجة بتعمل شغلها وبس.

🛠 ليه الـ Separation of Concerns مهم؟

١. سهولة التعديلات:

لما تيجي تطور جزء معين، مش هتخاف إنك تبوظ حاجة تانية. لو عايز تعدّل على الشكل (CSS)، مش هتدخل على أكود الـ (JavaScript).

٢. إعادة الاستخدام (Reusability):

الكود المنظم بيسهّل عليك إعادة استخدام أجزاء منه في مشاريع تانية.

٣. سهولة الفهم والصيانة:

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

٤. اختبار أسهل (Testing):

لما كل جزء مستقل بمسؤوليته، يبقى اختبار كل جزء لوحده سهل ومباشر.

🖥 أمثلة على الـ Separation of Concerns:

📌 الـ Frontend Development:

• الـ HTML، CSS، JavaScript زي ما وضحنا.

• في React، بنفصل الـComponents عن الـ Hooks وعن الـ APIs Calls.

📌 الـ Backend Development:

الطبقات (Layers):

• الـ Data Access Layer (DAL): مسؤول عن التعامل مع قواعد البيانات.

• الـ Business Logic Layer (BLL): مسؤول عن منطق الـ Business Logic الخاص بالمشروع.

• الـ Presentation Layer: مسؤول عن عرض البيانات.

📌 الـ Microservices:

كل خدمة (Service) مسؤولة عن وظيفة معينة: واحدة بتتعامل مع المستخدمين، واحدة للمدفوعات، واحدة للرسائل... وهكذا.

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

وفقكم الله لكل خير 🌿