Front-end و Back-end: شرح الفرق بينهم ببساطة

لو بدأت تتعلم تطوير الويب، غالبًا سمعت عن Front-end و Back-end، بس إيه الفرق بينهم بالظبط؟ تعال نفهم مع بعض.

🎨 Front-end Development - اللي قدام عين المستخدم​

الـ Front-end هو كل حاجة بتظهر في المتصفح وتقدر تتفاعل معاها، زي النصوص، الصور، الأزرار، والألوان.
مثال: لو بتعمل موقع لمطعم، هتحط بيانات المطعم وصور الأطباق لتجذب العملاء، وده كله بيتم باستخدام تقنيات الـ Front-end.

لغات Front-end الأساسية:​

• HTML: لغة بناء هيكل الموقع.
• CSS: تحديد شكل الموقع من ألوان، خطوط، وتصميم.
• JavaScript: العناصر التفاعلية زي القوائم المنسدلة واستمارات الاتصال.

إضافات ومكتبات:​

• مكتبات CSS زي Bootstrap أو Materialize
• أطر عمل JavaScript زي Angular, Vue, React
• إضافات CSS زي SASS, LESS

---

🔧 Back-end Development - ما وراء الكواليس​

بعد ما موقعك يشتغل كويس، لو حبيت تضيف مميزات زي الطلب أونلاين أو حجز طاولات، هتحتاج تتعامل مع البيانات، وده دور Back-end.

وظيفة Back-end:​

• الجزء اللي مش ظاهر للمستخدم.
• مسؤول عن تخزين وتنظيم البيانات.
• يتواصل مع الـ Front-end لإرسال واستقبال المعلومات.

قواعد البيانات:​

• لتخزين معلومات المنتجات والعملاء، زي MySQL, PostgreSQL, MongoDB, Oracle

لغات برمجة Back-end:​

• Python, PHP, Ruby, Java, ASP.Net, Node.js
• غالبًا بيشتغلوا مع أطر عمل لتسهيل التعامل معاهم، زي Django للبايثون.

مثال عملي:​

لما العميل يكتب حاجة في حقل البحث بالـ Front-end، الموقع يرسل الطلب للـ Back-end، يبحث في قاعدة البيانات، ويرجع المعلومات بشكل Front-end عشان تظهر للعميل، سواء للشراء أو الحجز.