Şøķåŕą
02-19-2022, 05:02 PM
قد يكون مصطلح الواجهة الأمامية Front End جديدًا عليك وخصوصًا إذا لم تكن من هواة البرمجة، ولكن تأكد أنك تتعامل مع ما يفرزه هذا المصطلح وما ينتجه مبرمجو الواجهة الأمامية، فكلنا يتصفح يوميًّا عشرات مواقع الإنترنت أو ربما المئات ونتفاعل معها عبر رسوماتها وواجهاتها البيانية.
ولكن ما علاقة ذلك بتطوير الواجهة Front End؟
ما المقصود بالواجهة Front End وكيف تختلف عن الواجهة Back End
الواجهة الأمامية Front End هي مصطلحٌ يتضمن بناء صفحات الويب وواجهات المستخدم لتطبيقات الويب، حيث يشمل هذا المصطلح كلّ شيءٍ نراه على الشاشة بما في ذلك التصاميم البيانية والأشكال والرسومات عند فتح مواقع الويب أو تطبيقات الويب على هواتفنا الذكية. 1
على الطرف المقابل فإن مصطلح الواجهة الخلفية Back End يشير إلى بناء وتطوير صفحات وتطبيقات الويب من جهة المخدم Server وقواعد البيانات Data base.
مواضيع مقترحة
يركز تطوير الواجهة الأمامية في الغالب على ما قد يسميه البعض "جانب العميل" من التطوير، حيث يعمل مطورو الواجهة الأمامية على كتابة وتحليل الترميز البرمجي Code الذي يفرز الشكل والمظهر الخارجي لموقع الويب الذي يتعامل معه العميل. 2
يعمل الترميز المكتوب من قبل مطورو الواجهة الأمامية داخل متصفح المستخدم في حين يعمل الترميز المكتوب من قبل مطورو الواجهة الخلفية داخل مخدمات الشبكة Web Servers. يتم تشغيل الشيفرة التي يكتبونها داخل متصفح المستخدم (على عكس مطور الواجهة الخلفية، والذي يعمل الرمز الخاص به على خادم الويب).
للتبسيط يمكن أن نشبه مطور الواجهة الخلفية Back End بالمهندس الذي يخطط شبكات الكهرباء والماء والمياه والصرف الصحي وكل ما يتعلق بالبنية التحتية، في حين يمكن تشبيه مطور الواجهة الأمامية Front End بالمهندس الذي ينسق شكل الأبنية وتناسقها مع بعضها البعض.
كما يتعين على مصمم الواجهة الأمامية Front End التأكد من عدم وجود أخطاء في الواجهة التي يتفاعل معها المستخدم، وكذلك التأكد من ظهور التصميم كما هو مفترض في مختلف المنصات والمتصفحات. 3
لغات البرمجة المستخدمة في تطوير Front End
يستخدم مطورو الواجهة الأمامية ثلاث لغاتٍ برمجيةٍ أساسيةٍ لتصميم المواقع وتطبيقات الويب هي:
HTML
CSS
JavaScript
HTML و CSS
لا تعتبر لغة (HTML( Hypertext Markup Language لغة برمجةٍ، ولكنها لغة توصيف Markup Language، وتستخدم بشكلٍ أساسيٍّ لبناء محتوى الصفحات سواء النصوص أو الصور وإنشاء القوائم، لكنها لا تضيف أيًّا من التأثيرات الشكلية كالألوان والأنماط.
تشترك CSS مع HTML بأنها لغةُ توصيفٍ أيضًا وليست لغة برمجة، لكنها تختلف عنها بأنها تعنى بتنسيق المحتوى المكتوب باستخدام HTML فهي ما يجعل صفحة الويب أكثر جمالًا ورونقًا إن صح التعبير.
تعتبر كل من HTML و CSS من الأدوات الأساسية لبرمجة الواجهة الأمامية بل لا يمكن إنشاء مواقع الويب بدون هاتين اللغتين.
JavaScript
بدايةً لغة البرمجة JavaScript مختلفةٌ تمامًا عن لغة Java المستخدمة في تطبيقات الأندرويد، حيث تشكل JavaScript مع HTML و CSS صندوق الأدوات المتكامل لتطوير الواجهة الأمامية Front End.
تستخدم JavaScript بشكلٍ أساسيٍّ لإنشاء التراكيب التي تتغير وتتحدث خلال الزمن الحقيقي ضمن صفحة الويب مثل الخرائط أو الأفلام التفاعلية أو الألعاب عبر الشبكة Online.
ومن الجدير بالذكر أن JavaScript هي لغة البرمجة الأكثر شيوعًا في العالم.
الإطارات المستخدمة في تطوير Front End
بالإضافة للغات البرمجة المذكورة أعلاه يستخدم مطورو الواجهة الأمامية Front End ما يسمونه بالإطارات Framework لتسريع عملية البناء والتطوير.
من أهم الإطارات المستخدمة:
React framework
Angular framework
Vue.js framework
React Framework
طورت فيسبوك إطار React بهدف إضفاء مزايا ديناميكية على صفحات الويب بحيث يجد المستخدم النهائي للصفحة سرعة التنقل بين العناصر وسهولة في التعامل مع الصفحات.
Angular Framework
قامت شركة Google أيضًا بتطوير إطارٍ يساعد المطورين في بناء الواجهة الأمامية بل ويسمح لهم ببناء التطبيقات المعقدة (نقصد هنا تطبيقات الويب).
Vue.js Framework
يعتبر Vue.js Framework من أسهل الإطارات المخصصة لبناء الواجهة الأمامية Front End كما أنه يساعد المطورين على بناء صفحات ويب جذابة وجيدة التنظيم.
ويعد Vue.js Framework الخيار الأمثل بالنسبة للمطورين المبتدئين حيث يسمح لهم ببناء مشاريعَ حقيقيةٍ باستخدام JavaScript و HTML فقط. 4
ولكن ما علاقة ذلك بتطوير الواجهة Front End؟
ما المقصود بالواجهة Front End وكيف تختلف عن الواجهة Back End
الواجهة الأمامية Front End هي مصطلحٌ يتضمن بناء صفحات الويب وواجهات المستخدم لتطبيقات الويب، حيث يشمل هذا المصطلح كلّ شيءٍ نراه على الشاشة بما في ذلك التصاميم البيانية والأشكال والرسومات عند فتح مواقع الويب أو تطبيقات الويب على هواتفنا الذكية. 1
على الطرف المقابل فإن مصطلح الواجهة الخلفية Back End يشير إلى بناء وتطوير صفحات وتطبيقات الويب من جهة المخدم Server وقواعد البيانات Data base.
مواضيع مقترحة
يركز تطوير الواجهة الأمامية في الغالب على ما قد يسميه البعض "جانب العميل" من التطوير، حيث يعمل مطورو الواجهة الأمامية على كتابة وتحليل الترميز البرمجي Code الذي يفرز الشكل والمظهر الخارجي لموقع الويب الذي يتعامل معه العميل. 2
يعمل الترميز المكتوب من قبل مطورو الواجهة الأمامية داخل متصفح المستخدم في حين يعمل الترميز المكتوب من قبل مطورو الواجهة الخلفية داخل مخدمات الشبكة Web Servers. يتم تشغيل الشيفرة التي يكتبونها داخل متصفح المستخدم (على عكس مطور الواجهة الخلفية، والذي يعمل الرمز الخاص به على خادم الويب).
للتبسيط يمكن أن نشبه مطور الواجهة الخلفية Back End بالمهندس الذي يخطط شبكات الكهرباء والماء والمياه والصرف الصحي وكل ما يتعلق بالبنية التحتية، في حين يمكن تشبيه مطور الواجهة الأمامية Front End بالمهندس الذي ينسق شكل الأبنية وتناسقها مع بعضها البعض.
كما يتعين على مصمم الواجهة الأمامية Front End التأكد من عدم وجود أخطاء في الواجهة التي يتفاعل معها المستخدم، وكذلك التأكد من ظهور التصميم كما هو مفترض في مختلف المنصات والمتصفحات. 3
لغات البرمجة المستخدمة في تطوير Front End
يستخدم مطورو الواجهة الأمامية ثلاث لغاتٍ برمجيةٍ أساسيةٍ لتصميم المواقع وتطبيقات الويب هي:
HTML
CSS
JavaScript
HTML و CSS
لا تعتبر لغة (HTML( Hypertext Markup Language لغة برمجةٍ، ولكنها لغة توصيف Markup Language، وتستخدم بشكلٍ أساسيٍّ لبناء محتوى الصفحات سواء النصوص أو الصور وإنشاء القوائم، لكنها لا تضيف أيًّا من التأثيرات الشكلية كالألوان والأنماط.
تشترك CSS مع HTML بأنها لغةُ توصيفٍ أيضًا وليست لغة برمجة، لكنها تختلف عنها بأنها تعنى بتنسيق المحتوى المكتوب باستخدام HTML فهي ما يجعل صفحة الويب أكثر جمالًا ورونقًا إن صح التعبير.
تعتبر كل من HTML و CSS من الأدوات الأساسية لبرمجة الواجهة الأمامية بل لا يمكن إنشاء مواقع الويب بدون هاتين اللغتين.
JavaScript
بدايةً لغة البرمجة JavaScript مختلفةٌ تمامًا عن لغة Java المستخدمة في تطبيقات الأندرويد، حيث تشكل JavaScript مع HTML و CSS صندوق الأدوات المتكامل لتطوير الواجهة الأمامية Front End.
تستخدم JavaScript بشكلٍ أساسيٍّ لإنشاء التراكيب التي تتغير وتتحدث خلال الزمن الحقيقي ضمن صفحة الويب مثل الخرائط أو الأفلام التفاعلية أو الألعاب عبر الشبكة Online.
ومن الجدير بالذكر أن JavaScript هي لغة البرمجة الأكثر شيوعًا في العالم.
الإطارات المستخدمة في تطوير Front End
بالإضافة للغات البرمجة المذكورة أعلاه يستخدم مطورو الواجهة الأمامية Front End ما يسمونه بالإطارات Framework لتسريع عملية البناء والتطوير.
من أهم الإطارات المستخدمة:
React framework
Angular framework
Vue.js framework
React Framework
طورت فيسبوك إطار React بهدف إضفاء مزايا ديناميكية على صفحات الويب بحيث يجد المستخدم النهائي للصفحة سرعة التنقل بين العناصر وسهولة في التعامل مع الصفحات.
Angular Framework
قامت شركة Google أيضًا بتطوير إطارٍ يساعد المطورين في بناء الواجهة الأمامية بل ويسمح لهم ببناء التطبيقات المعقدة (نقصد هنا تطبيقات الويب).
Vue.js Framework
يعتبر Vue.js Framework من أسهل الإطارات المخصصة لبناء الواجهة الأمامية Front End كما أنه يساعد المطورين على بناء صفحات ويب جذابة وجيدة التنظيم.
ويعد Vue.js Framework الخيار الأمثل بالنسبة للمطورين المبتدئين حيث يسمح لهم ببناء مشاريعَ حقيقيةٍ باستخدام JavaScript و HTML فقط. 4