كل ما يهمك عن
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.
في المواقع التفاعلية ستجد الموقع يقوم بمهام أكثر من مجرد عرضها. مثلا عندما تقوم بالضغط على أيقونة يقوم الموقع بعرض نافذه فيها معلومات اكثر. أو عند الضغط على أيقونة يقوم المتصفح بإخفاء معلومات معينة أو اضافة بضائع إلى السلة في مواقع التجارة الإلكترونية، أو اضافة تعليق… الخ. وهذا ما نعنيه بالبرمجة. جافاسكريبت هي اللغة الوحيدة التي يمكن للمتصفح فهمها و التفاعل معها. يمكن كتابة الجافاسكريبت كما هو و يطلق عليه بمصطلح Vanilla JavaScript أو استخدام منصات و مكتبات لتسهيل و اضافة البرمجيات بشكل أعمق. من أهم هذه المكتبات React و Angular و jQuery. و العديد من المكتبات الأخرى.
المسميات الوظيفية
المسميات الوظيفية لمطور الويب المختص في ال Front-End يختلف بحسب طبيعة التقنيات التي يستخدمها.
مصمم الويب: هو الشخص المتخصص في ال HTML و ال CSS و لديه خبرات في مكتبات و تقنيات ال CSS مثل Bootstrap و SCSS و W3CSS و لديه خبرة واسعة في الفوتوشوب و التصميم و تقنيات تحويل تصاميم الفوتوشوب إلى CSS أو كما يطلق عليه في عند المبرمجين “تكويد التصميم”. و يشمل أيضا مصممي الملتيميديا كالفيديوات و المؤثرات الصوتية و العديد من التقنيات المتخصصة في تصميم الويب.
مطور ويب: هو الشخص المتخصص في تطوير و برمجة الويب باستخدام لغة جافاسكريبت. ليس بالضرورة أن يكون لديه خلفيه واسعة في تصميم الويب مثل مصمم الويب لكنه يملك بعض المهارات الأساسية في التصميم. في العادة، يكون مطور الويب متخصصا في مكتبة واحدة أو أكثر و قد يطلق عليه مطور لتلك المكتبة مثل: React Developer أو Angular Developer.
مطور Front-End: هو الشخص المتخصص في جميع تقنيات الويب و لديه الثقة و المهارات الكافية للبرمجة و التصميم. و بالتأكيد يختلف درجة الإحترافية من شخص لاخر.
قد تجد أيضا مسميات أخرى مثل:
Front-End Engineer أو React Engineer و العديد من المسميات الوظيفية المختلفة. اختلاف المسميات ليست هي المقياس لتوظيف مطور ال Front-End انما التقنيات و المهارات التي يملكها هي ما تحدد نوع الوظيفة و المسمى الوظيفي.
Back-End
كما ذكرنا سابقا، كل ما تراه في الويب كمستخدم هو Front-End. أما ال Back-End فهو باختصار كل الأشياء الأخرى التي تحصل في الخادم
(Server) و التي لا يمكنك رؤيتها أو الوصول إليها. و لأن غالبا ما يحدث في الخادم أكبر بكثير من ما يحدث في العميل، لذلك توجد الكثير من الأنماط و النماذج لترتيب و تقسيم العمليات في جهة الخادم أو ال Back-End.
هناك العديد من الأنماط و النماذج التي يمكن تطبيقها في الخادم نظرا لحجم و اختلاف المهام، و ابسط نموذج هو نموذج ال ٣ طبقات أو (Three-Tier Architecture) و التي تنص على فصل البيانات عن المعالجة في ال Back-End.
باختصار، نموذج ال ٣ طبقات هو النموذج الذي يفصل اي برنامج في نموذج الخادم و العميل إلى ٣ أقسام منفصلة.
طبقة العرض - (Presentation Layer): كل ما يتعلق بالعرض أو كما أشرنا في السياق بال Front -End.
طبقة المعالجة (Application Layer) : و هي كل الأكواد و البرامج في الخادم و هو احد جزئي ال Back-End. و هي الطبقة الأكبر للبرنامج و أكثرها تعقيدا.
طبقة البيانات (Data Layer): و هي عبارة عن إجراءات قاعدة البيانات التي تحفظ و تستخرج البيانات. و هو الجزء الثاني من ال Back-End.
النموذج المبسط لعمل تطبيقات الويب
عندما نتحدث عن تطبيقات الويب، فغالبا ما نتحدث عن نموذج ال ٣ طبقات. في هذا النموذج يقوم العميل بطلب المعلومات من الخادم (طبقة العرض)، يقوم الخادم بمعالجة الطلب (طبقة المعالجة) و اخذ البيانات اللازمة من قاعدة البيانات (طبقة البيانات) و إرسال هذه البيانات إلى العميل الذي طلبها.
كل البرامج و الأكواد المكتوبة في الخادم تحصل في طبقة المعالجة، و نسميها من الان فصاعدا بعمليات الخادم. تتمثل عمليات الخادم في خدمة العميل و التحكم في الموقع و سير البيانات. و لها الكثير من الأمثلة و التطبيقات مثل : تسجيل الدخول، إنشاء حساب، إرسال الإيميلات، إنشاء عمليات الدفع، قراءة الملفات، تحميل الملفات.. الخ. كل هذا يحدث في ال Back-End و لأن هذه العمليات تحصل في الخادم الذي لا يمكننا رؤيته و لأن ليس لها واجهة عرض فلا يمكن رؤيتها كما هو الحال في ال Front-End.
يمكننا أن نقول أن الخادم هو مثل العقل البشري بالنسبة لتطبيق الويب، حيث يقوم بالتحكم في كل شيء بما فيها البيانات و العرض في الموقع. لذلك البرمجة في هذا الجانب مهم جدا و أكثر تعقيدا من ال Front-End
التطوير في ال Back-End
كما أشرنا سابقا، فعندما نتحدث عن ال Back-End فهناك طبقتان يجب التعامل معها. طبقة المعالجة و طبقة البيانات. و تتمثل طبقة المعالجة في لغات البرمجة المستخدمة في ال Back-End. و بينما تتمثل طبقة البيانات في قواعد البيانات و التي سنتحدث عنها هنا بالتفصيل.
لغات البرمجة
عندما نتحدث عن لغات البرمجة في ال Front-End فإننا نتحدث فقط عن لغة JavaScript حيث أنها اللغة الوحيدة التي يتعامل فيها المتصفح. أما في ال Back-End فالخيارات عديدة جدا و لكل منها فوائدها و عيوبها. و يعتمد اختيار أحدها على عدة عوامل أهمها المتطلبات التقنية و الخبرات المتوفرة. سنذكر هنا أهم اللغات و اكثرها انتشارا.
جافاسكريبت باستخدام نود
لغة جافاسكريبت ليست فقط مختصة في ال Front-End . إنما لها استخدام واسع و كبير جدا في ال Back-End أيضا. تحتاج هذه اللغة على مشغل لها لكي تعمل، ففي ال Front-End يقوم المتصفح بتشغيلها. أما في Back-End فهناك أكثر من مشغل لها و الأهم منها هو NodeJS. لذلك ستسمع كثيرا بمصطلح مطور نود أو Node Developer حيث المعني بذلك هو : مبرمج Back-End باستخدام NodeJS. نود هو من أشهر المشغلات و لها اقبال كثير جدا لمطوري ال Front-End الذين يبرمجون ايضا في ال Back-End باستخدام نفس اللغة.
بايثون
بايثون هي لغة برمجية مستخدمة كثيرا في مجالات متعددة منها الويب. تتميز طريقة كتابتها بالسهولة و الوضوح مما يجعلها مثالية للتعلم للمبتدئين. اشتهرت مؤخرا في استخداماتها المتعددة في مجال الذكاء الاصطناعي. من أهم منصاتها Django و Flask.
جافا
واحدة من أهم اللغات و أكثرها انتشارا. تتميز جافا بقوة نضوجها حيث حجم استخدامها و تبنيها من Oracle اعطتها ميزة الثبات و النضج البرمجي. و هي احدى اللغتين المستخدمة في تطوير تطبيقات ال Android. تشتهر جافا أكثر في الشركات الضخمة و من أهم منصاتها Spring و Jakarta EE و Struts
سي شارب - #C
سي شارب، هي لغة أخرى تتميز بالثبات و النضج البرمجي. تم تطوير هذه اللغة في مايكروسوفت و تشتهر لغة سي شارب في الشركات التي تعتمد على تقنيات مايكروسوفت بشكل أساسي. في السابق، لم يكن بإمكان هذه اللغة العمل في بيئة أخرى غير بيئة Windows و لكن تم تغيير هذا و يمكنها الان العمل في أي بيئة مثل الجافا. من أهم منصاتها ASP.NET Core
PHP
واحدة من اللغات المشهورة في ال Back-End و تتميز بسهولة تعلمها بالذات للمبتدئين حيث يمكن كتابتها من غير تعلم الكثير من الأنماط البرمجية. من أهم المواقع التي تستخدم هذه اللغة هي WordPress و من اهم منصاتها Laravel و Symfony و Zend
قواعد البيانات
من أهم ميزات تطبيقات الويب هي ميزة التخزين. فمن غير التخزين، لا يمكن للموقع حفظ أو إنشاء أي بيانات. تحفظ البيانات في ال Back-End في طبقة البيانات في برامج تسمى بقواعد البيانات. تنقسم قواعد البيانات الى قسمين، مترابطة و غير مترابطة Relational vs Non-Relational
قواعد البيانات المترابطة
تحفظ قواعد البيانات المترابطة البيانات في جداول. حيث الصفوف تمثل المدخلات و الأعمدة تمثل الحقول. تستخدم قواعد البيانات لغة اسمها SQL و لذلك أيضا تسمى ب SQL Database . كل قاعدة بيانات لديها اضافات بسيطة و تغييرات صغيرة على هذه اللغة و تسمى عادة باللهجة Dialect. سنذكر أشهر قواعد البيانات المترابطة و أكثرها استخداما
Oracle
اوراكل هي احدى أقوى قواعد البيانات في العالم و اكثرها استخداما في الشركات الكبرى. نظرا لارتفاع قيمة رخصة استخدامها، فإنها غير مناسبة للشركات الصغيرة و المتوسطة. تتميز بسرعتها و أداءها الفائق.
MySQL
واحدة من أهم قواعد البيانات المجانية و المتوفرة للكل. و تتناسب كثيرا مع طبيعة الشركات الصغيرة و الناشئة. تم تطويرها في السويد و استحوذت عليها اوراكل في عام 2010
SQL Server
المنافس الأقوى من مايكروسوفت لاوراكل و تتميز بالسرعة و الأداء الفائق. تماما مثل اوراكل فهي غير مناسبة للشركات الصغيرة و المتوسطة و تشتهر أكثر في الشركات التي تعتمد على تقنيات مايكروسوفت
PostgreSQL
تم تطوير بوستغريس بواسطة فريق من المتطوعين من جميع أنحاء العالم و يعتبر واحدة من أهم قواعد البيانات للشركات الصغيرة و الناشئة.
قواعد البيانات الغير مترابطة
تقوم قواعد البيانات الغير مترابطة أو كما تسمى بال (NoSQL) بحفظ البيانات بطرق أخرى غير طريقة الجدول المستخدمة في قواعد البيانات المترابطة. هناك عدة طرق لحفظ البيانات في هذا النوع من قواعد البيانات من أهمها Key-Value pairs. يستخدم (NoSQL) عادة في المشاريع ذوي البيانات الضخمة جدا (Big Data). سنذكر مثال واحد فقط في هذا النوع من قواعد البيانات
MongoDB
يعد مونغو من أهم قواعد البيانات الغير مترابطة و أكثره انتشارا و هو مجاني الاستخدام. يتميز بسهولته و انتشاره الواسع بين المطورين الجدد.
أهمية تطوير ال Back-End
من غير برمجة ال Back-End لا يمكن للموقع حفظ البيانات و اضفاء تفاعل في الموقع. لذلك من المهم جدا التركيز في هذه المنطقة حيث التطوير أكثر تعقيدا و يتطلب معرفة مسبقة للتقنيات و المنصات و انظمة التشغيل و الحاويات و قواعد البيانات و … الخ
المسميات الوظيفية
المسميات الوظيفية لمطور ال Back-End تختلف بحسب طبيعة التقنيات التي يستخدمها. أكثرها انتشارا ما يلي:
مهندس برمجيات: هو الشخص الذي يستطيع بناء أي برنامج باستخدام انماط هندسية مختلفة بحسب متطلبات البرنامج. يستطيع مهندس البرمجيات بهندسة الموقع و تطويره بإحدى اللغات التي يعرفها و الإشراف عليه.
مطور Back-End: هو الشخص المتخصص في برمجة ال Back-End باستخدامه احدى اللغات التي يعرفها.
مطور Full-Stack: هو الشخص الذي يقوم ببرمجة Front-End و Back-End . يتميز هذا المبرمج بامكانية عمله في كلا الجهتين، و يستخدم منصات معينة من المذكورة و الغير مذكورة اعلاه لتحقيق ذلك و بالتأكيد يختلف درجة الإحترافية من شخص لاخر.
Java Developer / Java Engineer: مطور جافا (أو أي لغة أخرى) و يعني أن الشخص هو مطور Back-End باستخدام لغة جافا و منصاتها. و قس على ذلك اللغات الأخرى.
بواسطة : فريد رضائي
مطور منذ عام ٢٠٠٨، حاليا مدير تقني و شريك مؤسس لشركة qvm.parts
أحاول ان اضع البصمة الإنسانية في التقنية.