ماهو مطور واجهات المواقع

مجال تطوير تطبيقات الويب ينقسم الى مجالين رئيسيين و بشكل عام ( يوجد مجالات فرعية و ثانوية )و هما : الـ Front End و الـ Back End

ماهو مطور واجهات المواقع ( Front-end Developer ) :

مطور واجهات المواقع هو الشخص الذي يجيد التعامل مع ما يراه المستخدم فقط , في المواقع بشكل عامل يوجد واجهتين واجهة يتفاعل معها المستخدم وتسمى Front-end وواجهة اخرى خلف الكواليس تقوم بعملية جلب البيانات والاتصال مع السيرفر وقواعد البيانات وتسمى Back-end.

يختص مطور واجهات المواقع فقط في مايراه المستخدم ويتفاعل معه في البرمجية.

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

ما الذي يجب تعلمه لتصبح مطور واجهات المواقع

:ببساطة تعلم ثلاث تقنيات وهم : html, css and JavaScript , لكن ليس فقط هذه التقنيات فكل تقنية تندرج تحتها العشرات من التقنيات والمكتبات التي يجب تعلمها بالاضافة الى بعض الادوات التي تساعدك لانجاز المشاريع ,

ساذكر بعض التقنيات المهمة وشرح بسيط لها:

1- تعلم HTML ثم CSS:

HTML اختصار لعبارة ( Hyper Text Markup Language )، تسمح لنا الـ HTML بتحديد الهياكل الأساسية لصفحة الويب من تحديد الترويسات و القوائم العلوية. CSS إختصار لعبارة ( Cascading StyleSheet ) التي تسمح لنا بتحريك تلك العناصر في الـ HTML و تزيينها بشكل أكثر، إضافة ألوان او تعديل تموضعها و أيضا الأنيميشن و إضافة تقريبا أي زينة ممكنة لتلك العناصر، و لا يمكن إطلاقاً إطلاقا إطلاقا ان تصير مطور Front End إن لم تحترف و تجيد التعامل مع هذين التقنيتين.

2- تعلم JavaScript :

الان لأضافة بعض الديناميكية لصفحة الويب, مثل التعديل على العناصر في وسط الصفحة دون الحاجة لتحميلها , سنحتاج الى لغة أخرى يتم إستخدامها في الويب و هي الجافاسكربت او Javascript، و هي لغة برمجة نستطيع من خلالها التحكم في عناصر الـ DOM او Document Object Model أثناء إستخدام الصفحة، كتغيير الأسماء ، الأزرار، الألوان إخفاء او إظهار عناصر و حتى القيام بالعمليات الحسابية او التحقق من المدخلات و غيرها، تعلم الـ Javascript كذلك سيساعدنا لاحقا في التعامل مع بعض الإطارات الأخرى.

3- تعلم اطارات عمل JavaScript :

بعد تعلم JavaScript بعض المشاريع التي قد تريد القيام بها لا يمكن عملها بإستخدام Javascipt العادية , يجب عليك تعلم بعض المكتبات وأطر العمل التي سوف تساعدك على في بناء اي مشروع تريده .

يوجد العديد من أطر العمل والمكتبات وسأذكر افضل المكتبات وأطر العمر حسب تصنيف موقع Stackoverflow منها :

1- Jquery

2- React.Js

3- Vue.js

4- Angular.js

4- تعلم الـ Collaborative Work و الـ Version Control :

عند البدء في العمل على مشاريع مع مطورين اخرين ستحتاج الى ارسال المشروع او تحديثه باستمرار مع ايصال التحديثات للمطورين الاخرين , كيف يمكن عمل ذلك ؟ سنعتمد على أداة مميزة ستساعدنا في حل مشكلة العمل التشاركي او Collaborative Work، و ستساعدنا على التعامل مع الـ Version Control بالنسبة لهذا الاخير لمن لا يعرفه، فهو إطلاق النسخة الأولى من موقعك، ثم بعدها قد ترى بعض التعديلات و تقوم بها و تطلق النسخة الثانية، لكن قد تود العودة للنسخة الأولى ربما لأنك خربت شيئاً ما، بالطبع الـ Ctrl + Z لن تكون متاحة ! أداة الـ Git هي الأداة المثالية لهذا الغرض، تساعدنا هذه الأخيرة على التحكم في المشروع كاملا، رفعه على منصات مثل Github او Bitbucket، مشاركته مع الآخرين، توفير للآخرين فرع من أجل التعديل على المشروع، يمكن لعدة مطورين العمل على مشروع واحد و تطويره في نفس الوقت، الى جانب التحكم في الإصدارات و العودة لإصدارات سابقة ...، يعتمد الـ Git بشكل كبير على سطر الأوامر أيضا، لذلك قد تود متابعة فيديو يشرح الأمر . الـ Git سيحل لنا مشكلة الـ Version Control و سيساعدنا على تنظيم العمل التشاركي على المشروع.

5- مهارات أخرى قد تساعدك لتصير مطور Front End أكثر إحترافية :

بالطبع يوجد الكثير من الأدوات و التقنية في هذا العالم الرقمي التي ستساعدك دائما على تطوير نفسك، يوجد تقنيات و مهارات أخرى نرى انها ستفيدك على المدى الطويل من بينها :

- تعلم التعامل مع Preprocessors CSS

:جيدة و قوية في تنسيق المواقع، لكن ينقصها الكثير، إستخدام Preprocessor مثل SASS, LESS, STYLUS و غيرها سيوفر لك خواص مثل الشرط (if) الحلقات التكرارية (loops) المتغيرات و الـ Mixins و غيرها التي ستساعدك على كتابة كود CSS أكثر قوة و سلاسة.

- حاول تعلم التعامل مع CMS :

معظم الأشخاص حاليا يميلون الى تطوير مواقعهم الخاصة على منصات مختلفة مثل Wordpress, Blogger, Joomla, Shopify ... هذه المنصات تضمن لك Back-End جيد و محمي لكن يبقى مشكلة تطوير و تنسيق الواجهة و هو دور الـ Front End Developer، لذلك قد تود تعلم بعض الـ CMS و تعلم التعديل عليها من ناحية الواجهة.

- تعلم تقنيات SEO :

بشكل كبير، يعتمد الـ SEO على هيكلة صفحات الويب بشكل أكبر مثل إستخدام الـ H1 و الـ H2 و غيرها بشكل مرتب، تنسيق الصور و إعطائها وسم alt و name ...، لذلك من المهم ان يحصل مطور الـ Front End على المعلومات الكافية في الـ SEO من أجل إظهار الموقع بشكل صحيح لمحركات البحث و المواقع الإجتماعية.

- تعلم MVC/MVVM/MVP :

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