ما هو تطوير الواجهة Front End

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

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

ما هي الواجهة الأمامية وكيف تختلف عن الواجهة الخلفية؟

ما هي الواجهة الأمامية وكيف تختلف عن الواجهة الخلفية؟
ما هي الواجهة الأمامية وكيف تختلف عن الواجهة الخلفية؟

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

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

يركز تطوير الواجهة الأمامية بشكل أساسي على ما قد يسميه البعض “جانب العميل” في التطوير، حيث يقوم مطورو الواجهة الأمامية بكتابة وتحليل الكود الذي يفرز شكل ومظهر موقع الويب الذي يتعامل معه العميل. §

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

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

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

لغات البرمجة المستخدمة في تطوير الواجهة الأمامية

لغات البرمجة المستخدمة في تطوير الواجهة الأمامية
لغات البرمجة المستخدمة في تطوير الواجهة الأمامية

يستخدم مطورو الواجهة الأمامية ثلاث لغات برمجة أساسية لتصميم مواقع الويب وتطبيقات الويب

  • لغة البرمجة
  • CSS
  • جافا سكريبت

HTML و CSS

HTML و CSS
HTML و CSS

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

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

تعد كل من HTML و CSS أدوات أساسية لبرمجة الواجهة الأمامية وحتى لا يمكن إنشاء مواقع الويب بدون هاتين اللغتين.

جافا سكريبت

جافا سكريبت
جافا سكريبت

تختلف لغة البرمجة، JavaScript، تمامًا عن لغة Java المستخدمة في تطبيقات Android لأن JavaScript جنبًا إلى جنب مع HTML و CSS يشكلان مجموعة أدوات متكاملة لتطوير الواجهة الأمامية.

تُستخدم JavaScript بشكل أساسي لإنشاء هياكل تتغير وتتحدث في الوقت الفعلي في صفحة ويب، مثل الخرائط أو الأفلام التفاعلية أو الألعاب عبر الإنترنت.

تجدر الإشارة إلى أن JavaScript هي لغة البرمجة الأكثر شيوعًا في العالم.

الإطارات المستخدمة في تطوير الواجهة الأمامية

الإطارات المستخدمة في تطوير الواجهة الأمامية
الإطارات المستخدمة في تطوير الواجهة الأمامية

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

من بين الإطارات الأكثر استخدامًا

  • إطار التفاعل
  • الإطار الزاوي
  • إطار عمل Vue.js

إطار التفاعل

إطار التفاعل
إطار التفاعل

طور Facebook إطار عمل React بهدف نقل وظائف ديناميكية لصفحات الويب بحيث يجد المستخدم النهائي للصفحة الصفحة تتحرك بين العناصر ويسهل إدارة الصفحات.

الإطار الزاوي

الإطار الزاوي
الإطار الزاوي

طورت Google أيضًا إطار عمل يساعد المطورين على بناء الواجهة الأمامية وحتى إنشاء تطبيقات معقدة (نعني هنا تطبيقات الويب).

إطار عمل Vue.js

إطار عمل Vue.js
إطار عمل Vue.js

يعد Vue.js Framework أحد أبسط أطر عمل التأليف الأمامية ويساعد المطورين على إنشاء صفحات ويب جذابة ومنظمة جيدًا.

يعد Vue.js Framework الخيار الأمثل للمطورين المبتدئين لأنه يسمح لهم بإنشاء مشاريع حقيقية باستخدام JavaScript و HTML فقط. §

Scroll to Top