الفرق بين backend و frontend

أهلا بك سيدي عبد الله.

البرمجة بالكلمات البسيطة هي  إنشاء مواقع، وتطبيقات حاسوب وهاتف وأمور أخرى مشابهة.

التطبيقات والمواقع التي تستخدمها في حياتك اليومية عادة ما تتكوّن من جزأين. هناك جزء ظاهر للمستخدم، وهذا الجزء يتضمّن النص، الصور، الشعارات، الخطوط، وطريقة العرض بشكل عام، كما يحوي الأزرار والحقول النصيّة وكل ما يمكّن المستخدم من التعامل مع الموقع أو التطبيق. هذا الجزء من البرامج يعرف باسم الواجهة الأماميّة (frontend).

يوجد جزء أخر غير ظاهر، وهو من يقوم عادة بحفظ البيانات والقيام بالحسابات ومعالجة أمور الدفع وغيرها مما لا يطّلع على كيفيّة القيام بها المستخدم العادي، وهذه الأمور عادة تكون معقّدة عليه ولا يهتم بكيفيّة حصولها، كما أن كثيرا منها هي أمور سريّة لا يسمح بالاطلاع عليها من طرف المستخدمين. هذا الجزء غير المرئي من البرنامج يعرف باسم الواجهة الخلفيّة (backend).

لإنشاء أي برنامج متكامل، عادة ما نحتاج إلى إنشاء الواجهتين، الأماميّة والخلفيّة. في البرامج ذات الحجم الصغير أو المتوسط، عادو ما يكون مطوّر الجزأين هو نفس الشخص أو الأشخاص (لذلك يحتاج أغلب المبرمجين لإتقان الجزأين) بينما في البرامج الضخمة، يتخصص مطوّرون في العمل على الواجهة الخلفيّة وآخرون على الواجهة الأماميّة.

بالنسبة لدورة واجهات المستخدم، فهذه يمكنك أن تتعلّم منها أساسيّات بناء الواجهات الأماميّة، وهذا شيء جيّد جدّا للبدأ به. عندما تتخرَج من هذه الدورة سيكون بإمكانك دراسة الدورات الأخرى مثل JavaScript، Python،  Ruby، لتتعلّم كيفيّة بناء الواجهات الخلفيّة.

لمعلومات أكثر تفصيلا، يرجى الاطّلاع على هذه المقالات فهي تتضمّن شرحا ممتازا وأجوبة على كل أسئلة المبتدئين:

حاليًا لا تشغل بالك كثيرًا بأنواع البرمجة وخلافه، فبعد دراسة الدورة والتطبيق العملي سيصبح لديك مفهوم عن ما هية الواجهة الأمامية والواجهة الخلفية.

وببساطة وبدون تفاصيل معقدة، الواجهة الأمامية أصبح بجسم السيارة من طلاء وزخارف وأدوات لاستخدام السيارة، لكن هل ستسير السيارة بالشكل فقط؟ بالطبع فهي بحاجة إلى وجود محرك لكي تعمل وذلك التشبيه بالضبط هو الفرق بين الواجهة الأمامية والخلفية.

حيث الواجهة الأمامية Frontend:

• هو الجزء الذي يراه المستخدم ويتفاعل معه في الموقع الإلكتروني.
• يشمل التصميم، الألوان، الخطوط، الصور، الأزرار، القوائم، كل ما هو مرئي على الشاشة.
• يعتمد على لغات برمجة مثل HTML و CSS و JavaScript.
• يركز على تجربة المستخدم وسهولة الاستخدام.

أما الواجهة الخلفية Backend:

• هو الجزء الذي لا يراه المستخدم، و هو مسؤول عن معالجة البيانات و تشغيل الموقع.
• يشمل قاعدة البيانات، معالجة الطلبات، تخزين المعلومات، ربط الموقع بالتطبيقات الخارجية.
• يعتمد على لغات برمجة مثل Python و Java و PHP.
• يركز على الوظائف و الأداء.

كمثال:

• Frontend: عندما تضغط على زر "إرسال" في نموذج على موقع إلكتروني.
• Backend: معالجة البيانات المدخلة في النموذج، تخزينها في قاعدة البيانات، إرسال رسالة بريد إلكتروني.

هل هناك مواقع تعمل بدون واجهة خلفية؟

بالطبع وهي مواقع static بحيث لا يتغير محتواها ولا حاجة إلى تخزين بيانات في الواجهة الخلفية بها، او من الممكن أن تكون مواقع Dynamic (يتغير محتواها) لكن ليس بحاجة أيضًا إلى واجهة خلفية حيث يكفي أن نقوم بجلب بيانات من خلال API ونعرض تلك البيانات في موقعنا بناءًا على رغبة المستخدم.

وستجد تفصيل أكثر ذكرته سابقًا هنا:

تعد الواجهة الأمامية والواجهة الخلفية جانبين مهمين لأي تطبيق. الواجهة الأمامية هي ما يراه المستخدمون وتتضمن عناصر مرئية مثل الأزرار ومربعات الاختيار والرسومات والرسائل النصية. تسمح للمستخدمين بالتفاعل مع تطبيقك. الواجهة الخلفية هي البيانات والبنية التحتية التي تجعل تطبيقك يعمل. تقوم بتخزين بيانات التطبيق ومعالجتها للمستخدمين.

كيف تعمل الواجهة الأمامية للتطبيق؟

يشير المصطلح الواجهة الأمامية إلى واجهة المستخدم الرسومية (GUI) التي يمكن للمستخدمين التفاعل معها مباشرةً، مثل قوائم التنقل وعناصر التصميم والأزرار والصور والرسوم البيانية. من الناحية الفنية، فإن الصفحة أو الشاشة التي يراها المستخدم من خلال العديد من مكونات واجهة المستخدم تسمى نموذج كائن المستند (DOM).

تؤثر ثلاث لغات كمبيوتر أساسية على كيفية تفاعل المستخدمين مع الواجهة الأمامية:

تحدد HTML بنية الواجهة الأمامية وعناصر نموذج كائن المستند (DOM) المختلفة

تحدد أوراق الأنماط المتتالية (CSS) نمط تطبيق الويب، بما في ذلك التخطيط والخطوط والألوان والنمط المرئي

تضيف JavaScript طبقةً من الوظائف الديناميكية من خلال معالجة نموذج كائن المستند (DOM)

يمكن لـ JavaScript تنفيذ التغيرات على الصفحة وعرض معلومات جديدة. هذا يعني أن الواجهة الأمامية يمكنها التعامل مع تفاعلات المستخدم الأساسية (أو الطلبات)، مثل عرض التقويم أو التحقق مما إذا كان المستخدم قد أدخل عنوان بريد إلكتروني صالحًا. تقوم الواجهة الأمامية بتمرير الطلبات الأكثر تعقيدًا إلى الواجهة الخلفية.
 

كيف تعمل الواجهة الخلفية للتطبيق؟

تقوم الواجهة الخلفية لتطبيقك، التي يُطلق عليها أحيانًا اسم جانب الخادم، بإدارة الوظائف العامة لتطبيق الويب. عندما يتفاعل المستخدم مع الواجهة الأمامية، يرسل التفاعل طلبًا إلى الواجهة الخلفية بتنسيق HTTP. تقوم الواجهة الخلفية بمعالجة الطلب وإرجاع الاستجابة.

عندما تعالج الواجهة الخلفية طلبًا، فإنها تتفاعل عادةً مع ما يلي:

خوادم قاعدة البيانات لاسترجاع البيانات ذات الصلة أو تعديلها

الخدمات المصغرة التي تؤدي مجموعةً فرعيةً من المهام التي طلبها المستخدم

واجهات برمجة تطبيقات تابعة لأطراف ثالثة لجمع معلومات إضافية أو لأداء وظائف إضافية

المقارنه بين الواجهة الأمامية و الواجهة الخلفية

الواجهة الأمامية والواجهة الخلفية عبارة عن مصطلحات عامة تُجمّع بطريقة منطقية مختلف التقنيات والطبقات البرمجية لأي تطبيق. تركز الواجهة الأمامية على تلك الجوانب التي يراها المستخدمون. وعلى العكس من ذلك، فإن الواجهة الخلفية هي كل ما يجعل التطبيق يؤدي وظيفته.

يمكنك النظر في الواجهة الأمامية على أنها الجزء الخارجي من السيارة والواجهة الخلفية هي جميع الآلات الموجودة بالداخل. إن السيارة ذات التصميم الجميل الرائع لا تعمل على النحو الأمثل إلا إذا كانت الآلية الداخلية تعمل بشكل صحيح. ومع ذلك، تساهم بعض جوانب التصميم الخارجي أيضًا في السرعة والأداء. وبالمثل، يجب تصميم الواجهة الأمامية والواجهة الخلفية لتطبيقك بطريقة متناغمة للحصول على أفضل النتائج.

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

 1 - تطوير الواجهة الأمامية (Frontend development)  :

هو ذلك الجزء من موقع الويب الذي يتفاعل معه المستخدم مباشرة، ويشار إليه أيضًا باسم جانب العميل (Client Side). يتضمن كل ما يختبر المستخدمون مباشرة مثل : ألوان وأنماط النص، والصور، والرسوم البيانية والجداول، والأزرار، والألوان، قائمة التنقل.

 HTML و CSS و JavaScript هي اللغات المستخدمة لتطوير Frontend. يتم تنفيذ بهم الهيكل والتصميم والمحتوى وكل شيء يظهر على شاشات المتصفح عند فتح مواقع الويب أو تطبيقات الويب أو تطبيقات الهاتف المحمول من قبل مطوري الواجهات الأمامية (Frontend Developers). و يجب على المطور التأكد من أن الموقع يظهر بشكل صحيح على الأجهزة من جميع الأحجام، ولا ينبغي لأي جزء من موقع الويب أن يتصرف بشكل غير طبيعي بغض النظر عن حجم الشاشة.

2 - تطوير الواجهات الخلفية (Backend development) :
الواجهة الخلفية (Backend) هي جانب الخادم (Server Side) للموقع. تقوم بتخزين البيانات وترتيبها، وتتأكد أيضًا من أن كل شيء على جانب العميل (Client Side) من موقع الويب يعمل بشكل جيد. وهو جزء من موقع الويب لا يمكنك رؤيته والتفاعل معه. ولا يكون هذا الجزء من البرمجيات على اتصال مباشر مع المستخدمين. يتم الوصول إلى الأجزاء والخصائص التي طورها المصممون الخلفيون (Backend) بشكل غير مباشر من قبل المستخدمين من خلال تطبيق الواجهة الأمامية.
ومن اللغات المستعمله في ال (backend) PHP و Ruby و Python

وكبداية عليك انت تعرف وتتعارف علي كليهما ولو بشكل بسيط لان الBackend و الFrontend مترابطين بشكل كبير بعضهما البعض فكل منهما يكمل الاخر .

يمكنك تحصيل المزيد من المعلومات هنا :