من خلال هذا المسار المقترح سيتم استعراض المناطق المهمة في هذا المجال، وكيف يمكن من خلال تعلم مهارات محددة التميّز في مهنة مطور واجهات المستخدم أو الـ Front-end Developer.

من هو مطور واجهات المستخدم Front-end Developer؟

مطور واجهات المستخدم: هو الشخص الذي يقوم بعمليات تخطيط وتطوير مواقع وتطبيقات الويب لتظهر بالشكل المرئي النهائي القابل للتفاعل من المستخدم. ويختلف بذلك عن مطور الجهة الخلفية Back-end Developer والذي يهتم بالعمل على الجانب الذي لا يظهر للمستخدم النهائي، مثل البيانات ومعالجتها وتخزينها وإرسالها.

المهارات المهمة لمطور واجهة المستخدم

1-إتقان الـ HTML & CSS، وهذا يشمل:

• معرفة كيفية بناء صفحة الويب بطريقة صحيحة وتدرج سليم وعمل عناصر لغة الترميز HTML المختلفة مثل <p>، <h1>، <div> الخ.
• استخدام الأنماط المتتالية أو الـ CSS لتغير مظهر صفحة الويب والخطوط والألوان، وفهم الموضوعات البارزة فيها ومنها على سبيل المثال لا الحصر:
  

Box Model -Position - Selectors - (Pseudo-Elements)

ويمكن الاطلاع على عدد من الكتب المقترحة لتعلّم HTML و CSS بالضغط على هذا الرابط.

2- التركيز على طرق الإخراج أو الـ Layout في الـ CSS، ويتضمن ذلك:

• معرفة أشكال التخطيط أوالـ Layout الممكنة لصفحات الويب وعلى رأسها التخطيط المتجاوب أو الـ Responsive Design.
• تعلم وإتقان استخدام تقنيات الـ Flexbox و Grid.

3- الإلمام بأحد أطر العمل الشهيرة للأنماط المتتالية الـ CSS Frameworks مثل الـ Bootstrap أو الـ Tailwind CSS و الـ Bulma.

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

4- الإلمام بالتطبيق المثالي للـ SEO:

ويعني تحسين نتائج محركات البحث، حيث تشترط محركات البحث كجوجل بناء ملفات الـ HTML بطريقة جيدة وجعلها متاحة الوصول Accessibility، إلى جانب إضافة عدد معين من عناصر الـ <meta> التي تساعد في تحسين نتائج البحث، منها على سبيل المثال:

description - image - title - url - open graph

5- تعلم الـ Node js و إدارة الحُزم مثل npm و yarn:

النود جي إس هو إطار عمل تم تصميمه ليسمح للغة الـ Javascript بتطوير تطبيقات ويب قوية تتعامل مع السيرفر مباشرة بعد أن كانت لغة الجافاسكربت تتعامل فقط مع جانب المستخدم أو العمل أو ما يسمى بـ الـ Client side.

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

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

تستطيع استخدم نظام إدارة الحزم npm عند تنصيب الـ Node js، ويمكنك أيضًا استخدام نظام إدارة الحزم yarn المطور من شركة فيسبوك بعد تنصيبه لعمل نفس المهام ولكن بشكل أسرع!.

6- تعلم العمل على مجمّع الوحدات أو ما يسمى بـ Module Bundler:

مجمّع الوحدات أو الـ Module Bundler هو أداة تستخدم في تطبيقات الويب لتجميع ملفات الجافاسكربت المستخدمة في التطوير لتكون في حزمة واحدة أو عدة حُزم بترتيب صحيح بحيث تعتمد على بعضها البعض بالإضافة إلى تقليل التعارض فيما بينها وزيادة كفاءة تحميل موقع الويب بحيث يتم تحميل الحزم الأهم أولاً.

من أمثلة مجمعات الوحدات:

• ويب باك Webpack وهو المجمّع الأشهر وهو مناسب للعمل على المواقع الكبيرة نظرًا لتعدد خصائصه.
• بارسل Parcel ويتميز بسهولة تنصيبه والعمل عليه، وهو ملائم للمواقع الصغيرة.

7- تعلّم الجت Git والعمل على المواقع التي تقدم هذه الخدمة:

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

من أمثلة المواقع التي تقدّم خدمة الـ Git:

• GitHub وهو مملوك حاليًا لشركة مايكروسوفت.
• Bitbucket وهو مملوك لشركة أتلاسيان.

8- إتقان أحد المكتبات أو أطر العمل الشهيرة كـ React js أو Vue أو Angular

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

9- إجادة التعامل مع الـ APIs سواء الـ Rest أو الـ Graphql

يرمز مصطلح الـ API إلى Application Programming Interface وتعني واجهة التطبيق البرمجية، وهي تقنية تسمح بتبادل البيانات بين نظامين برمجيين منفصلين.

ومن أشهر صور الـ APIs المستخدمة حاليًا في تطوير الويب الريست Rest API و الجراف كيو إل Graphql، لهذا سيكون من الجيد أثناء تعلّم تطوير واجهات المستخدم معرفة كيفية التعامل مع هذين النوعين.

10- الإلمام بمبادئ التصميم العامة

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

ختامًا..

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