كل ما يهمك عن
Front-End vs Back-End
سواءً كنت مطوراً جديداً أو ريادي أعمال أو مدير مشروع تقني أو تريد توظيف مبرمج لمشروعك التقني، ستجد نفسك أمام مسارين مهمين في التطوير. الجهة الأمامية أو كما هو متعارف عليه Front-End و الجهة الخلفية أو كما هو متعارف عليه Back-End. في هذا المقال سنسرد كل ما يهمك معرفته لبناء خلفية جيدة عن كل منهما.
نموذج الخادم و العميل
قبل أن نقوم بشرح المسارين، من المهم معرفة النموذج التقني الذي هو أساس تقسيم مسار البرمجة إلى Front-End و Back-End. هناك العديد من النماذج التقنية التي لن نتطرق اليها في هذا المقال غير نموذج واحد فقط و هو نموذج الخادم و العميل أو Client-Server Model. فما هو هذا النموذج؟
نموذج الخادم و العميل هو نموذج يقوم بتقسيم المهام إلى قسمين: خادم و عميل، حيث الخادم يقوم بتقديم الخدمات و العميل يقوم بطلب الخدمة. تماما كما يحدث مع النادل و الزبون في المطعم. في عالم الويب، يقوم العميل (المتصفح الذي تستخدمه مثل Chrome أو Firefox ) بطلب الخدمة (الموقع مثلا) من الخادم (Server) و يقوم الخادم بتوفير هذه الخدمة بناء على طلب العميل. على سبيل المثال: عندما تقوم بتسجيل الدخول يقوم المتصفح بإرسال بيانات الدخول اسم المستخدم و كلمة المرور إلى الخادم، و يقوم الخادم بتأكيد وجود هذه البيانات المسجلة مسبقا و تأكيد صحة بيانات الدخول و إعطاء الصلاحيات و البيانات الجديدة للمتصفح لإظهارها بعد تسجيل الدخول.
ربما بدأت تفكر الان عن اختلاف طبيعة المهام في كل جهة من نموذج الخادم و العميل. عندما نقوم بتبسيط المهام بشكل بدائي جدا، سنرى أن من أهم مهام العميل هي العرض أو اظهار و ترتيب المعلومات و اظهارها بشكل معين بعد طلبها من الخادم، بينما مهام الخادم تكمن في توفير هذه البيانات ليقوم المتصفح بعرضها، و قد تشمل حفظ البيانات و استخراجها و العمل على إعطاء الصلاحيات بحسب المستخدم. فمثلا سيعرف الخادم من انت فور ادخال بياناتك و سيقوم باستخراج بياناتك مثل اسمك و صلاحياتك و ارسالها للمتصفح لعرضها.
تطوير الويب - Web Development
تطوير الويب هو مجال واسع جدا في هندسة البرمجيات و تتركز في بناء المواقع في الانترنت. المواقع تختلف بحسب محتواها، فإما تكون مواقع غير متغيرة تعرض فقط معلومات مثل المواقع التعريفية للشركات و الأشخاص حيث لا يوجد فيها الكثير من البرمجة و تتركز في عرض المعلومات فقط، أو تكون ذات محتوى تفاعلي حيث يوجد فيها مستوى عالي من البرمجة لعرض محتوى تفاعلي مثل تسجيل الدخول و شراء البضائع و ارسال الطلبات و التفاعل مع الأصدقاء مثل الشبكات الاجتماعية. و تطلق عليها عادة تطبيقات الويب بدلا من المواقع.
من هذا المنطلق، تقسم برمجة تطبيقات الويب الى قسمين، قسم يتركز في برمجة العميل FrontEnd و قسم يتركز في برمجة الخادم BackEnd. سنقوم بسرد تفاصيل هاذان القسمان في هذا المقال.
Front-End
كل ما تراه في الويب يدخل في نطاق Front-End حيث أن هذا القسم هو المعني بعرض محتوى الويب. يقوم المتصفح بطلب محتوى الموقع من الخادم و يقوم بعرضها للعميل. كيفية العرض لهذا المحتوى و كيفية التفاعل معه هي ما تحدده تقنيات ال Front-End. تقسم هذه التقنيات الى ٣ أقسام أو ٣ لغات: HTML, CSS, JavaScript.
و لكل لغة منها مهام معينة سنسردها هنا:
دور ال HTML في صفحة الويب هو عرض هيكلة المعلومات كعرضها في جداول أو كنص، أو كقائمة أو عرضها بجانب بعضها البعض.. الخ.
دور ال CSS هو اضافة الطابع الجمالي لهيكلة المعلومات، مثل اضافة الألوان و تباعد النصوص و حجم النصوص و الخطوط و عرض المعلومات على حسب حجم الشاشة (ربما لاحظت أن شكل الموقع في متصفح الكمبيوتر يختلف عن شكل الموقع في متصفح الهاتف النقال). يمكن كتابة ال CSS كما هي أو استخدام مكتبات تقوم بتسهيل عمل التصميم مثل Bootstrap.