الفرق بين الواجهة الأمامية والخلفية (Frontend و Backend)

عند دخولك عالم تطوير الويب ستسمع مصطلحات Frontend و Backend و Full-stack. لنوضّحها ببساطة.

الواجهة الأمامية (Frontend)

كل ما تراه وتتفاعل معه في المتصفّح: الأزرار، الألوان، التخطيط، الحركات.

تقنياتها:

• HTML — الهيكل
• CSS — التصميم
• JavaScript — التفاعل
• أطر مثل React

فكّر فيها كـ"ديكور المطعم وقائمة الطعام" — ما يراه الزبون.

الواجهة الخلفية (Backend)

كل ما يحدث خلف الكواليس: قواعد البيانات، المنطق، المصادقة، الخوادم.

تقنياتها:

• Node.js أو Python/Django أو PHP/Laravel
• قواعد البيانات (SQL)
• الواجهات البرمجية (APIs)

فكّر فيها كـ"المطبخ" — حيث يُحضَّر كل شيء بعيدًا عن نظر الزبون.

Full-stack — الاثنان معًا

مطوّر Full-stack يتقن الواجهتين معًا، ويستطيع بناء تطبيق كامل بمفرده.

مثال عملي: نفس الزرّ من الجهتين

اضغط المستخدم زرّ "أضف إلى السلّة" في متجر إلكتروني. هذا ما يحدث:

Frontend — يستمع للنقرة ويرسل طلبًا:

button.addEventListener("click", async () => {
  const res = await fetch("/api/cart", {
    method: "POST",
    body: JSON.stringify({ productId: 42 }),
  });
  const cart = await res.json();
  updateCartBadge(cart.itemsCount); // يحدّث الرقم بجانب أيقونة السلّة
});

Backend — يستقبل الطلب، يتحقّق منه، ويحدّث قاعدة البيانات:

app.post("/api/cart", async (req, res) => {
  const { productId } = req.body;
  const product = await db.product.findUnique({ where: { id: productId } });
  if (!product) return res.status(404).json({ error: "المنتج غير موجود" });
  const cart = await db.cart.addItem(req.user.id, productId);
  res.json(cart);
});

نفس النقرة الواحدة تعبر الحدّ الفاصل بين الجهتين: Frontend لا يعرف شيئًا عن قاعدة البيانات، و Backend لا يهتمّ بشكل الزرّ أو لونه — كلٌّ منهما مسؤول عن طبقته فقط، ويتواصلان عبر API.

خطأ شائع عند المبتدئين

كثير من المبتدئين يظنّون أن التحقّق (Validation) على الـ Frontend كافٍ — مثلًا التأكّد أن حقل السعر رقم موجب في جافاسكريبت قبل الإرسال. هذا يحسّن تجربة المستخدم فقط، لكنه لا يحميك أمنيًّا إطلاقًا: أي شخص يستطيع تجاوز الـ Frontend كليًّا ويرسل طلبات مباشرة للخادم. كل تحقّق أمني حقيقي يجب أن يتكرّر في الـ Backend، لأنه الطبقة الوحيدة التي لا يتحكّم بها المستخدم.

أيهما تختار؟

الخلاصة

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

ابدأ مسارك الأول مع The Code Fix.