مسار الـ Front End Developer … كيف أصبح مطور محترف في الـ Front End ؟

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

– الطريقة : من أجل بدئ العمل بهذه التقنيات ستحتاج الى بعض البرامج المميزة مثل Adobe XD, Sketch و غيرها، وفرناها لك بشرحها الكامل في مقالنا بعنوان 5 برامج تساعدك على تصميم UI/UX إحترافي قبل تطويره برمجياً .

– الأدوات : يوجد العديد من الأشياء التي يجب عليك القيام بها للشروع في تعلم هذا القسم، اولا مراجعة بعض الكورسات المساعدة من مقالنا إليك أفضل المصادر لتعلم الـ UI/UX و قواعده بإحترافية ، فهم الـ UI/UX من مقالنا بعنوان : ما هو الUI و الUX ؟ و ما الفرق بينهما ؟ ، فهم بعض قواعد الـ UX من مقالنا بعنوان : قواعد ” تجارب الإستخدام ” : قواعد في مجال الـ UX من الضروري معرفتها، ثم لديك الحرية بعدها لتوسيع دائرة آفاقك لاحقا بمجموعة من الدروس الأخرى أيضا.

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

– الطريقة : من أجل البدئ في هذين التقنيتين عليك البدئ في فهم طريقة هيكلة صفحة ويب، لأن الـ HTML و الـ CSS يمكنك إحتراف التعامل معهما في أقل من 24 ساعة إلا ان المشكلة لا تبقى بشكل محدد في تعلمهما، و إنما إدراك أي الأكواد الملائمة لوضعها من أجل صناعة عنصر معين، و أي وسم يجب إستخدامه، وفي حالة أردنا صناعة انيميشن مميز أي كود سنختار و هكذا دواليك. 

– الأدوات : ستحتاج في بداية الأمر الى محرر أكواد جيد، هذه قائمة لأفضل محررات الأكواد الخاصة بالتطوير ، يوجد أيضا محرر Visual Studio Code و هو الأكثر شهرة حاليا لكن تحتاج الى تهيئته، هذه بعض إضافات VS Code المميزة ، بعد ذلك توجه الى بعض القنوات على اليوتيوب التي تشرح لك هذين التقنيتين، هذه قائمة لبعض قنوات اليوتيوب المتخصصة في ذلك أيضا، ثم بعد ان تجيد و تفهم الـ HTML و CSS، قد تود الإطلاع على بعض مقالاتنا مثل : ليس دائما الـ div … وسوم في الـ HTML ضرورية لا تستخدمها إلا نادراً و مقالنا : 10 قواعد عليك ان تتعلمها في الـ CSS تجعلك محترفا في التنسيق التي ستساعدك في صقل مهاراتك أكثر .

 تعلم الـ Javascript … الـ Vanilla Javascript :

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

– الطريقة : ستتيح لنا الجافاسكربت لاحقا التعامل مع مجموعة من الإطارات التي ستسهل علينا العمل لاحقا، من المهم تعلمها لتصير مطور ويب، يمكنك البدئ بتعلم الجافاسكربت عن طريق مجموعة من الكورسات، فقط تذكر ان تتعلم الـ Vanilla Javascript و ليس الـ jQuery او إطاراتها الأخرى، فقط الجافاسكربت الإعتيادية.

– الأدوات : نخصص لك مقالنا التالي بعنوان : أفضل 20 مصد لتعلم البرمجة بلغة الجافاسكربت (Javascript) لتعلم الجافاسكربت لأنه مفيد و شامل و يضم عدداً جيدا من الكورسات المميزة.

 قم بعدها إطارات العمل الخاصة بالجافاسكربت (Javascript) :

– الشرح : الجافاسكربت قوية و تساعدنا على القيام بالعديد من الأشياء في صفحتنا على الويب، و كمطور Front End ستحتاجها كثيراً، لكن لاحقا ستود تحسين صفحاتك بشكل أفضل، مثل تطوير صفحات SPA إختصاراً لـ Single Application Page و هي مواقع يتم الإنتقال بين صفحاتها دون الحاجة الى تحميل الصفحة من جديد، او صناعة نظام شات في موقعك و الكثير، لن تستطيع القيام بالأمر بإستخدام الجافاسكربت العادية، و هنا ستحتاج بعض الإطارات الخاصة بالجافاسكربت التي تستطيع تنفيذ الأمر.

– الطريقة : يوجد مئات الآلاف من إطارات الجافاسكربت في هذا العالم التي يمكنك إستخدامها، لكن سنركز على الأكثر شهرة، ننصحك بتعلم الـ jQuery أولا كبداية لأنها تختصر عليك كتابة كود Vanilla Javascript و تجعله أكثر تحسينا ( و تقيك من العديد من الـ Bugs) بعدها ننصحك بتعلم إطار Angular او React او Vue ( سنوفر لك مقالا عاجلا حول اهم الفروقات بينها من أجل مساعدتك في الإختيار ) الإطارات الثلاث السابقة لها كمية هائلة من الخواص و المميزات و كذلك المكتبات الوسطية التي ستمكنك من صناعة أي موقع ويب بإحترافية جد جد هائلة، كما انها تسرع عمل موقعك و تجعله أكثر إتقانا.
بعد ان تعتاد على الـ Front End بعد مدة من الزمن، يمكنك الإهتمام بإطارات أخرى مثل Ember.js او Polymer او Backbone.

– الأدوات : لن نذهب بعيدا و سنقترح عليك قائمتنا لأفضل أفضل 20 مصد لتعلم البرمجة بلغة الجافاسكربت (Javascript) فهي تضم كورسات أيضا في المكتبات و الإطارات السابقة.

 تعلم الـ Automation و تجهيز الـ Directory الخاص بالمشروع :

– الشرح : بعد تعلمك للتقنيات أعلاه كاملة، بت الآن قادراً على إبتكار نموذج تطبيق ويب للعمل عليه، ثم تطويره باللغات التي تعلمتها و تحقيق النتائج المطلوبة و يعتبر تقريبا نصف الطريق …، كمطور Front End انت تعلم ان التصميم و الشكل يلعب دوراً جيدا، لكن التنظيم يلعب الدور الأهم، على سبيل المثال إضافة بعض الأنيميشن و الصور في صفحة الويب قد يجعل مدة تحميلها ثقيلة نوعا ما مما يؤثر بالسلب على الإستخدام ( عد إلى قواعد الـ UX ) ، إلى جانب هذا، مع الوقت ستستكشف مكتبات أخرى للعمل مثل Bootstrap او Foundation و Fontawesome و ما الى ذلك، سيكون من الصعب عليك إدارة هذه المكتبات و الإطارات و العمل بها بسبب كثرتها و قلة تنظيمها، أيضا أثناء بناء مشروع كامل و ليس صفحة ويب واحدة، ستجد ان مشروعك يتضمن العديد من الملفات، و فقدان التنظيم قد يجعل مشروعك متلخبطا بالكامل، لذلك المهارة التالية يجب عليك تعلمها هي الـ Automation و تنظيم الـ Directory.

– الطريقة : لحسن الحظ، يوجد ما يسمى بمدراء الحزم او Package Managers التي تسمح لنا بتهئية المشروع البرمجي و تنظيم الـ Directory بشكل أفضل، مثلا إن قمت بإستخدام الـ NPM سيمكنك تجهيز كل ملفات المشروع من خلال سطر الأوامر (CLI)، ثم العمل في مشروعك البرمجي بسلاسة، إن اردت إضافة مكتبة محددة قم بإضافتها من خلال الـ npm، و إبدأ العمل مباشرة فكل شيئ منظم، إن اردت إضافة ملف جديد نفس الأمر سيان، بهذه الطريقة يبقى مشروعك منظما بالكامل و ستجد سهولة في إضافة عدة مكتبات او إطارات في مشروعك على الويب دون لخبطة او مشاكل.
الـ Automation شيئ جيد قد تود بدئ العمل فيه، نحن نعلم مثلا انه إن قمت بصناعة 3 ملفات CSS عليك إدراجها جميعها في صفحة الـ index مثلا، فماذا لو قمنا بتهيئة برمجية صغيرة تقوم بالتحقق من كل الملفات الموجودة في مجلد CSS ثم إختصارها جميعها في ملف واحد مثلا مع ضغطها (Minifying) من أجل تقليص حجمها، كذلك بالنسبة للصور، و ملفات الجافاسكربت و أي ملفات خارجية، سيكون الأمر جيداً لمشروعنا البرمجي، من بين المكتبات التي تقوم بهذا الأمر يوجد الـ Grunt.js و Gulp.js، و حتى الـ npm يستطيع القيام بالأمر أيضا.

– الأدوات : لم نقم بعد بإدراج اي مقالات في موقعنا تتحدث عن طريقة تهيئة المشاريع في مختلف اللغات البرمجية لذلك سنقوم بتحديث هذا القسم فور إطلاق بعض المقالات في القريب كذلك، يمكنك التعرف بشكل أقرب على مفهوم الـ Package Manager و خواصه و أنواعه من هنا .

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

– الشرح : بالطبع كمطور Front End ستوفر مشروعك إما لمطوري Front End آخرين يشتغلون معك في نفس المشروع، او إرساله لمطوري Back End من أجل إضافة الديناميكية على المشروع البرمجي، بالطبع على الطرف الآخر ان يعرف و يفهم مشروعك و كان هذا هو الهدف من الفقرة السابقة، لكن يبقى التساؤل، كيف يمكنني أن ارسل مشروعي لمطورين آخرين؟ هل عبر فلاشة USB؟ عبر رفعه في موقع معين؟ ماذا لو أراد مني تصحيح شيئ معين ثم إعادة إرساله هل علي إعادة رفعه ؟ هنا سنعتمد على أداة مميزة ستساعدنا في حل مشكلة العمل التشاركي او Collaborative Work، و ستساعدنا على التعامل مع الـ Version Control بالنسبة لهذا الاخير لمن لا يعرفه، فهو إطلاق النسخة الأولى من موقعك، ثم بعدها قد ترى بعض التعديلات و تقوم بها و تطلق النسخة الثانية، لكن قد تود العودة للنسخة الأولى ربما لأنك خربت شيئاً ما، بالطبع الـ Ctrl + Z لن تكون متاحة !

– الطريقة : أداة الـ Git هي الأداة المثالية لهذا الغرض، تساعدنا هذه الأخيرة على التحكم في المشروع كاملا، رفعه على منصات مثل Github او Bitbucket، مشاركته مع الآخرين، توفير للآخرين فرع من أجل التعديل على المشروع، يمكن لعدة مطورين العمل على مشروع واحد و تطويره في نفس الوقت، الى جانب التحكم في الإصدارات و العودة لإصدارات سابقة …، يعتمد الـ Git بشكل كبير على سطر الأوامر أيضا، لذلك قد تود متابعة فيديو يشرح الأمر .
الـ Git سيحل لنا مشكلة الـ Version Control و سيساعدنا على تنظيم العمل التشاركي على المشروع، لكنه ليس الوحيد، سنحتاج الى التمرن على برمجيات أخرى مثل Trello لتنظيم المهام في المشروع البرمجي، او Slack للتواصل مع أعضاء المشروع، إلا انها لا تتطلب خبرة كبيرة او سطر أوامر مثل الـ Git.

– الأدوات : كذلك لم نوفر بعد أي مقالات تساعدك على إحتراف الـ Git، لك كامل الحرية للبحث في منصات مثل اليوتيوب او Udemy و إستخلاص بعض الفيديوهات المساعدة لتعلم التعامل مع الـ Git في مشروعك البرمجي.

 مهارات أخرى قد تساعدك لتصير مطور 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، عموما قد تصادف مشروعا بهذه التقنية و تود تطويره و قد تجد صعوبة في إيجاد او هيكلة الملفات بكفاءة، فوجب عليك تعلم بعض هذه المعماريات.

 TL;DR : 

و ختاما، المقال كله كان مخصصاً لمسار مطور الـ Front End، هذا المسار الذي يبدأ بتعلم تصميم الواجهات عن طريق الإستلهام و الإبداع، ثم تحويل هذه الواجهات الى حدث ملموس عن طريق لغات مختلفة مثل HTML,CSS,Javascript، ثم التعامل مع المشروع البرمجي بإحترافية من أجل تمكين مشاركته او العمل عليه في إطار مجموعة لا الفرد، ثم بعض التقنيات الأخرى التي قد تساعدك على تطوير قدراتك، نستقبل دائما في التعليقات تساؤلاتك و إستفساراتك حول كل ما وفرناه في هذا المقال، و سنحاول ان نجيب في أقرب وقت.