الواجهة الأمامية (Front-end) هي ما تراه وتلمسه في المتصفح أو على شاشة الهاتف: الألوان والأزرار والقوائم ونموذج التسجيل والصور والحركات. ومن يبنيها يُسمّى «مطوّر الواجهة الأمامية». وأدواته الرئيسية ثلاث: HTML للبنية وCSS للمظهر وجافا سكريبت للسلوك.
مثال: متجر إلكتروني#
عندما تسحب مرشّح السعر في موقع متجر فتتغير قائمة السلع فوراً، أو عندما تضغط زر «أضف إلى السلة» فيرتفع رقم السلة، فأنت ترى عمل الواجهة الأمامية. أما من أين يأتي المخزون وأين يُسجَّل الطلب فمرتبط بالواجهة الخلفية.
المهام الشائعة لمطوّر الواجهة الأمامية#
- تنفيذ التصميم الذي أعدّه مصمم واجهة المستخدم
- جعل الصفحات من اليمين إلى اليسار ومتجاوبة للغة العربية ولمختلف الهواتف
- تسريع تحميل الصفحة
- ربط الصفحة بـ API وعرض البيانات
- مراعاة إمكانية الوصول ليتمكن الجميع من استخدام الموقع
العلاقة بالواجهة الخلفية#
يشكّل هذان الجزءان معاً منتجاً كاملاً. ترسل الواجهة الأمامية الطلب وترد الواجهة الخلفية؛ ويتم التواصل عادةً عبر API. ومن يجيد الاثنتين يُسمّى مطوّراً شاملاً (Full-stack).
خطأ شائع#
يعتبر بعضهم الواجهة الأمامية مجرد «تجميل الموقع»، بينما جزء كبير منها هندسة: إدارة الحالة والأداء وتوافق المتصفحات وأمان جهة المستخدم.