إن كل مواقع الويب التي تتصفحها يومياً تتألف من قسمين وهما الواجهة التي يتفاعل معها المستخدم مباشرةً وهي ما تعرف بالـ Front-end، وما يتم تنفيذه من جهة المخدم (السيرفر) من منطق برمجي والتعامل مع قواعد البيانات وهو ما يعرف بالـ Back-End وإن الخبير في كلا المجالين هو من يسمونه الـ Full-stack.
وهذه المقالة سنخصصها للحديث عن الـ Front-End، ما هو؟ وما هي اللغات والأدوات المستخدمة فيه.
يعرف الـ Front-end بإنه الجزء من الموقع او التطبيق الذي يتفاعل معها المستخدم مباشرةً وهذا يتضمن كل ما يمكن للمستخدم رؤيته والتفاعل معه من صور ونصوص وقوائم وأزرار مربعات إدخال، وهو مجال واسع يتضمن الكثير من المساحة للإبداع فيستطيع المطور المختص بهذا المجال إطلاق العنان لخياله لتصميم مواقع بالطريقة التي يراها مناسبة.
ولكن للقيام بذلك فعليه تعلم الكثير الكثير من لغات البرمجة والأدوات وهذا يتضمن كأساس كل من HTML لبناء هيكل الموقع الأساسي و CSS لتنسيق الموقع بالطريقة التي يراها المطور مناسبة ومن ثم الـ Javascript لجعل الموقع يتفاعل مع المستخدم النهائي، وإن لهذه اللغات التي ذكرناها عدة إصدارات وكل منها تقريباً له مكتبات وأُطر خاصة بها، وعلى مختص الـ Front-end أن يكون مُلِماً بأغلب هذه التقنيات ليكون قادراً على العمل منفرداً او بشكل جماعي.
وسنقوم بشرح كل لغة من اللغات السابقة بشكل مختصر لبيان دور كل منها في مجال الـ Front-end.
اولاً الـ HTML:
لغة توصيف النص الفائق HyperText Markup Language وهي اللبنة الأساسية لبناء اي موقع على شبكة الإنترنت، وهي لا تعتبر لغة برمجة كما يعتقد الكثيرين وإنما هي لغة توصيف تُعالج وسومها Tags من قبل المتصفح وليس من قبل مفسر كما هو الحال مع لغات البرمجة الفعلية.
وهي تؤمن الهيكل التنظيمي لكل صفحة ويب لجعل المتصفح قادراً على فهم المحتوى وعرضه بشكل صحيح، فعند استخدام “وسم” (tag) مثل <h1> فإن المتصفح سيعلم أن هذه المنطقة وهذا النص ما هو إلا عنوان heading له خصائص محددة مسبقة (يمكن التعديل عليها لاحقاً)، وعند وجود <img> سيعلم أن هذه المنطقة هي مكان مخصص لصورة معينة بخصائص محددة أيضاً وهكذا دواليك.
وإن أي وثيقة او ملف html لها بنية أساسية مؤلفة من “رأس” head يحتوي معلومات الموقع الأساسية و”جسم” body وهو القسم الذي يحتوي على الوسوم التي تنظم الموقع.
ويمكن تضمين أكواد CSS و Javascript بشكل مباشر لتخصيص الوسوم، لكنه أسلوب غير شائع وغير احترافي فغالباً ما يميل المطورون لفصل كل ملف على حدى لجعل الأمور أكثر تنظيماً وأسهل للتعديل والتنقيح.
ثانياً الـ CSS:
وهي اختصار لـ Cascading Style Sheets ونستطيع ترجمتها إلى “وثائق التنسيق المتتالية”، هي الأخرى أيضاً ليست لغة برمجة وإنما لغة توصيفية مسؤولة عن تنسيق ملفات الـ HTML وإضافة التنسيقات عليها، وهي من تضفي الطابع العام للموقع وشكله النهائي، فنستطيع من خلالها التعديل على وسوم الـ HTML لموقعنا لتزويدها بخصائص properties جديدة كحجم وأبعاد ولون ونوع خط وهوامش وحدود وحركة وخلفية وغيرها الكثير، فمثلاً عند استخدام خاصية background-image لجسم body ملف الـ HTML فإننا نختار خلفية لموقعنا ككل.
وعند تعلمك لها فإنك غالباً ما ستتجه بعدها لتعلم إحدى الأطر لتوفير الكثير من الجهد والوقت كبوتستراب bootstrap او تيلويند Tailwind اللذان يعدان أشهر إطاران لهذه اللغة، وتعلمهما او إحداهما على الاقل شيء لابد منه لمن يريد الدخول في هذا المجال.
ثالثاً JavaScript:
وهي الخطوة الثالثة في عملية تعلم الـ Front-end، فبعد هيكلة الموقع وتنسيقه لابد من بث بعض الحياة فيه عن طريق جعله متفاعلاً مع المستخدم، فعند النقر على شيء او القيام بإدخال شيء على الموقع عليه أن يقوم بفعل شيء ما، هنا تأتي JavaScript لتلبية هذه الحاجة، وهي لغة برمجية خفيفة وسريعة يتم تفسيرها في المتصفح وهي متعددة الأنماط فتدعم البرمجة الكائنية على سبيل المثال، وتعد واحدة من أهم اللغات في عالم الويب.
وهي ايضاً لها الكثير الكثير من المكتبات والأطر التي تساهم في تسهيل عملية التطوير مثل React.js التي تستخدم لبناء واجهات المستخدم بناءً على مفهوم المكونات Components، وJQuery و D3.js و loadash و Moment.js وغيرها.
وبهذا نكون قد ذكرنا تقريباً جميع الأساسيات التي يجب عليك معرفتها عن مجال الـ Front-end كمعلومات عامة او قبل دخولك هذا المجال، ونشجع على البدء به إن كان لديك الكثير من الصبر والحس الإبداعي فهو مجال يحتاج لكليهما بشكل كبير.
ونهايةً في نهاية هذه المقال ندعوك كعادتنا الى متابعتنا على مواقع التواصل الاجتماعي لتبقى على اطلاع بكل جديد ولزيادة حصيلتك المعرفية في العديد من المجالات التقنية التي لا شك أنك مهتمٌ بها.
رابط تحميل كورس تحميل كورس برمجة وتطوير واجهة المستخدم بروابط مباشرة وتدعم الإكمال التلقائي ..
