الفرق بين Frontend و Backend هو من أهم المفاهيم في تطوير الويب، وفهمه يساعدك تختار المسار المناسب لك 👇
أولاً: ما هو Frontend؟
Frontend هو كل ما يراه ويتفاعل معه المستخدم داخل الموقع.
ببساطة:
هو “واجهة الموقع”
أمثلة:
- الأزرار
- القوائم
- الصور
- النصوص
- التصميم
التقنيات المستخدمة:
- HTML (هيكل الصفحة)
- CSS (التصميم)
- JavaScript (التفاعل)
مثال:
عندما تدخل موقع:
- ترى زر “تسجيل الدخول”
- تضغط عليه
- تظهر لك نافذة
👉 هذا كله Frontend
ثانياً: ما هو Backend؟
Backend هو الجزء الذي يعمل خلف الكواليس ولا يراه المستخدم.
ببساطة:
هو “عقل الموقع”
وظيفته:
- معالجة البيانات
- تخزين المعلومات
- إدارة المستخدمين
- التعامل مع السيرفر
مثال:
عندما تضغط “تسجيل الدخول”:
- يتم إرسال البيانات للسيرفر
- يتم التحقق من كلمة المرور
- يتم إرجاع النتيجة
👉 هذا هو Backend
مثال بسيط لتوضيح الفرق
تسجيل الدخول:
| الخطوة | النوع |
|---|---|
| كتابة البريد وكلمة المرور | Frontend |
| الضغط على زر الدخول | Frontend |
| التحقق من البيانات | Backend |
| عرض النتيجة | Frontend |
الفرق بين Frontend و Backend
| المقارنة | Frontend | Backend |
|---|---|---|
| ماذا يفعل | يظهر الموقع | يدير الموقع |
| يراه المستخدم؟ | نعم | لا |
| يعمل أين؟ | المتصفح | السيرفر |
| لغات البرمجة | HTML, CSS, JS | PHP, Python, Node.js |
| الهدف | تجربة المستخدم | منطق الموقع |
مثال واقعي (متجر إلكتروني)
Frontend:
- عرض المنتجات
- تصميم الصفحة
- زر الشراء
Backend:
- حساب السعر
- حفظ الطلب
- إدارة المخزون
- معالجة الدفع
كيف يعملان معًا؟
Frontend و Backend يتواصلان عبر API.
العملية:
- المستخدم يضغط زر
- Frontend يرسل طلب
- Backend يعالج الطلب
- يرجع النتيجة
- Frontend يعرضها
أيهما تختار؟
اختر Frontend إذا:
- تحب التصميم
- تهتم بالشكل
- تحب التفاعل مع المستخدم
اختر Backend إذا:
- تحب المنطق
- تحب حل المشاكل
- تحب العمل مع البيانات
أو يمكنك تعلم الاثنين 👇
Full Stack Developer
هو المطور الذي يجمع بين:
- Frontend + Backend
مثال بسيط للتوضيح
Frontend (زر):
<button onclick="login()">تسجيل الدخول</button>
Backend (فكرة فقط):
function login() {
// إرسال البيانات للسيرفر
}
تشبيه بسيط جدًا
تخيل مطعم 🍽️
- Frontend = الواجهة + القائمة + النادل
- Backend = المطبخ + الطباخ
المستخدم يرى النادل، لكن الطعام يأتي من المطبخ 👨🍳
خلاصة
- Frontend = ما تراه
- Backend = ما لا تراه
- الاثنين يعملان معًا لبناء موقع كامل