إذا بدأت مؤخرًا بالتعلم حول ما يخص تطوير الويب والمراحل المختلفة التي يتم اتباعها في تصميم المواقع الإلكترونية، فبالتأكيد سترغب بمعرفة تفاصيل برمجة الواجهة Front-end وبرمجة الخلفية Back-end أو ربما ببساطة لديك الفضول لزيادة معلوماتك حول هذه المواضيع.

برمجة الواجهة Front-end

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

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

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

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

لغات برمجة الواجهة

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

  • HTML: لغة الترميز التي تتيح ابتكار وترتيب محتوى الموقع وجعله متاحًا للعرض والتصفح باستخدام متصفحات الإنترنت
  • CSS: لغة تنسيق تعمل على وفاق مع اللغة السابقة، وتحدد ثيمة الموقع الخاصة به وجماله من ألوان ونوع الخطوط، يطلق على هذه اللغة “صفحات الطرز المتراصة”
  • JavaScript: لغة برمجة متطورة يتم استخدامها لمنح زوار الموقع ميزات تفاعلية أكثر مثل منتديات التواصل وأيضًا ابتكار ستارة القوائم التي تظهر عند الضغط على سهم في زوايا الموقع مثلًا وغيره.

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

برمجة الخلفية Back-end

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

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

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

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

في ما يخص برمجة الخلفية، يتم التعامل مع قواعد مخصصة لتخزين البيانات مثل MySQL أو SQL Server أو Oracle وغيره، وعند وجود قاعدة البيانات المناسبة في خلفية الموقع، لا تزال بحاجة إلى لغات برمجة مخصصة لتتمكن هذه القاعدة من فهمها، وهنا يتم استخدام لغات مثل Ruby أو PHP أو Java وغيرها.1

الفرق بين برمجة الواجهة Front-end وبرمجة الخلفية Back-end

مما ذكرناه سابقًا يمكننا استنتاج اختلافات جوهرية بين برمجة الواجهة Front-end وبرمجة الخلفية Back-end فرغم ارتباطهما معًا لإنتاج صفحة ويب متكاملة وتفاعلية، نستطيع القول أن الاختلافات هي كما يلي :

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

المراجع