المهنة: مطور أمامي

xxx: ماذا تكتب الواجهة الأمامية؟
yyy: على العكازات والدراجات
الثلاثون: مم ، إطار جيد!
Bash.im


عندما يخطر ببالك أن تصبح مبرمجًا ، فإنك تلهم دليل Shildt's C ، وتطلب كتاب Stroustrup C ++ سميك ، وتتعلم المزاح حول مؤشر إلى مؤشر إلى مؤشر وعن التكرار. الرومانسية القاسية لأول مرة ... لكن كل شيء يتغير عندما تدخل JavaScript عن طريق الخطأ إلى حياتك. "يا لها من بنية بسيطة ومباشرة! كل شيء ، تقرر ، سأكتب مواقع الويب "، يعتقد المبرمج المبتدئ ويقرر أن يصبح المعلم للويب بأكمله. ولكن بعد ذلك يغير المكدس المحدد وجهه الودود ، وكلما زاد ذلك. ولكن لا يمكنك التوقف الآن ، لأنك واحد منهم - مطورو الواجهة الأمامية. أولئك الذين "ينظرون إلى وجه الموقع". حسنًا ، أردت الانضمام؟ ثم بالنسبة لك 2 سلسلة من قسمنا الخاص "المهنة: ..."


لقد كنا بالفعل نعد هذا المقال عندما ظهرت مقالة "Habr Careers" يوم الأربعاء بمقابلة مع ممثل مدرسة على الإنترنت حول عمل الواجهة الأمامية ، والتي لا يسعها إلا أن تفرح: فهذا يعني أن المادة التالية المطلوبة والمفيدة ذات الصلة ستظهر في سلسلتنا "المهنة: .." . بالمناسبة ، تم تخصيص العدد الأول لمهنة مسؤول النظام

من هذا؟


أولاً ، بعض كلمات الأغاني وحالات الضغط.

عند عتبة العقد الثالث من القرن الحادي والعشرين ، يبدو أن اهتمام المستخدمين والمطورين قد تحول من واجهات الويب إلى تطبيقات الهاتف المحمول وإنترنت الأشياء. ولكن يبدو فقط. لنقم بتجربة فكرية بسيطة. فكر في عدد المواقع التي تزورها من جميع أدواتك أسبوعيًا وقم بتحليل تطبيقات الجوال التي قمت بتثبيتها. على الأرجح ، اتضح أنك تشاهد جميع المعلومات وموارد الأخبار على الإصدارات الكاملة والمتنقلة من المواقع (في المتصفح) ، وتؤدي تطبيقات الهاتف المحمول مهام "محددة": الشبكات الاجتماعية والمراسلات الفورية والمخططين والهوايات ، وما إلى ذلك. أي أنه من السابق لأوانه الحديث عن انقراض الويب.

علاوة على ذلك ، أصبح أحد اتجاهات 2019-2020 (وأعتقد أنه قبل عام 2025) أصبح ما يسمى PWA (تطبيقات الويب التقدمية) ، والتي تسمى مستقبل الويب المحمول. لتبسيط الأمر قدر الإمكان ، ليس PWA أكثر من مجرد موقع محمول للشخص السليم كما ينبغي. تم تعريف PWA بشكل أفضل من قبل أحد مبدعي هذا المفهوم ومؤلف مصطلح Alex Russell: "إن تطبيقات الويب التقدمية ليست سوى مواقع ويب تأخذ جميع الفيتامينات الصحيحة." ("PWA مجرد موقع يأخذ جميع الفيتامينات الضرورية.")

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

بالمناسبة ، إذا كنت مهتمًا بمعرفة PWA بشكل أفضل ، فهناك صفحة رائعة حول هذا الموضوع ، وبطبيعة الحال ، توصيات Google .

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

شيء ما أخذني إلى الواجهة الخلفية. لا نقطة. خلاصة القول هي أنه مع أي خلفية خلفية لأي موقع يجب أن يكون هناك "وجه" للموقع ويجب أن يعمل بطريقة أو بأخرى. وكل شيء يحدث عندما يأتون - مطورو الواجهة الأمامية. إنهم مسؤولون عن تطوير الواجهة الخارجية للموقع ، أي كيف تتفاعل الواجهة الخلفية وتصميم الموقع مع المستخدم (إذا حدث فجأة أن تكون على حبري ، فسأشرح - الكثير من كل شيء مخفي خلف كل موقع: التصميم ، والطبقات المختلفة والواجهة الخلفية الضخمة ، أي منطق العمل بأكمله ، DBMS وهلم جرا). بشكل عام ، بمجرد تغطية الحقيقة في هذه الصورة:



لقد تغيرت هذه الصورة الملحمية والمألوفة اليوم بالفعل ، وبالفعل ، أصبحت مهنة مطور الواجهة الأمامية أكثر تعقيدًا ومتعدد العناصر بشكل لا مثيل له مما كانت عليه قبل حوالي 7-10 سنوات. الآن يبدو هذا ، و 2028 يبدو أقرب بكثير :-) 



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

لست خائفا من مثل هذه الاحتمالات حتى الآن؟ ثم نذهب أبعد من ذلك. 

أين هو مطلوب؟


باختصار ، حيثما يوجد تطوير ويب ، أي:

  • , — : , , , , , , . , , .
  • -, , .
  • - : , , CRM, ERP, BPM .
  • .

أي إذا كنت ترغب في ذلك ، يمكنك أن تجد وظيفة في أي مجال يثير اهتمامك ، ويجمع بين اهتمام وحرفية الواجهة الأمامية. نعم ، بعض الشركات تبحث عن رصة كاملة ، ولكن كقاعدة عامة ، إما أن تكون شركات جادة جدًا ومستعدة للدفع مقابل مبرمج كامل رائع حقيقي ، أو مكاتب صغيرة يكون فيها الرصة الكاملة مبرمجًا مشابهًا لدعم موقع على CMS. والباقي هم أرباب العمل المحتملين. على سبيل المثال ، في وقت كتابة المقالة حول "Habr Career" ، كان هناك 249 وظيفة شاغرة انتقائية ، وعلى hh.ru - أكثر بقليل من 4100 (على الرغم من أنها ليست انتقائية ، ولكنها مهمة). 

متوسط ​​الدخل


سنلقي نظرة أيضًا على الأجور في Haber Career. خذ البيانات للنصف الثاني من عام 2019 ، بغض النظر عن ملكية مكدس معين. بالمناسبة ، فإن معرفة مكتبة أو إطار عمل معين لا تضيف الكثير إلى الراتب ، في مكان ما من 5 إلى 15 ألف روبل. 
المستوى التخصصي
متوسط ​​الدخل
نجارة
53404 فرك.
الأوسط
99396 فرك.
أول
170535 فرك.
مقدم العرض (رائد)
185335 فرك.

الفرق بين المستويات ملحوظ تمامًا ، والمكدس داخل الوظائف الشاغرة كبير للغاية - لذلك مع دورات جافا سكريبت عبر الإنترنت وحدها ، من غير المحتمل أن تتمكن من تحقيق مهنة أمامية.

المتطلبات المهنية الأساسية


في الواقع ، يجب ألا يعرف مطور الواجهة الأمامية المدفوع جيدًا لغة البرمجة الأساسية فحسب ، بل يجب أيضًا أن يعرف المكتبات والأطر. لقد اخترنا التقنيات الخمسة الأكثر شعبية التي يملكها مطورو مختلف المستويات. أيضًا ، بدءًا من Junior ، بعض المهارات الهامة الأخرى التي يمكن رؤيتها في السطر الأخير تنضم إلى ملكية المكدس. من حيث المبدأ ، كل شيء متوقع ، بالنسبة لي لا توجد مفاجآت في الجدول عمليًا.
متدرب (متدرب)
نجارة
الأوسط
أول
مقدم العرض (رائد)
  1. جافا سكريبت
  2. مخطوطة
  3. لغة البرمجة
  4. CSS
  5. React.js

  1. جافا سكريبت
  2. React.js
  3. لغة البرمجة
  4. CSS
  5. إعادة

  1. جافا سكريبت
  2. React.js
  3. Vue.js
  4. إعادة
  5. CSS

  1. جافا سكريبت
  2. React.js
  3. الزاوي
  4. Vue.js
  5. إعادة

  1. React.js
  2. جافا سكريبت
  3. Vue.js
  4. الزاوي
  5. مخطوطة


Git ، BEM ، التخطيط التكيفي ، DBMS
+ تخطيط عبر المتصفح
+ إدارة التطوير ، روبي أون ريلز
+ إدارة الأفراد ، تصميم هندسة التطبيقات

في الأوصاف الوظيفية لمطور الواجهة الأمامية ، يمكنك تلبية المتطلبات المختلفة ، من المعرفة الأساسية لـ HTML إلى المعرفة الكاملة لكل شيء في العالم و PHP بالإضافة إلى ذلك. سنسلط الضوء على المتطلبات الأساسية.

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

في بعض الأحيان تشمل متطلبات أصحاب العمل مهارات تصميم الويب ، والعمل مع محرري الرسوم ، والمعرفة والقدرة على تطبيق تحسين محركات البحث (SEO) ، وما إلى ذلك. نعم ، في الواقع ، غالبًا ما تزيد هذه المهارات بشكل كبير من قيمة الأخصائي ، ولكن فكر في ذلك ، ولكن هل ترغب في التخلص من 2-3 من المنشورات عليك بسعر واحد؟ لكن معرفة لغات البرمجة الأخرى الموجهة للويب (PHP ، Ruby ، ​​Python) لن تسمح فقط بالعمل بشكل أفضل مع الواجهة الخلفية عند تطوير الواجهة الأمامية ، ولكن أيضًا ستزيد بشكل كبير من قيمتك في سوق العمل ، وفي الوقت نفسه يمكن أن تكون الخطوة الأولى للنمو نحو رصة احترافية كاملة -مطور.


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

ومرة أخرى ، مخطط تكنولوجي رائع لعام 2020 لمطور أمامي (خريطة طريق)



الصفات الشخصية الهامة


أنا لست مؤيدًا لتقييم المتخصصين حسب صفاتهم الشخصية وأطلب التعاطف من الواجهة الأمامية أو الانطواء من النهاية الخلفية. ومع ذلك ، نظرًا لامتلاك سمات شخصية معينة ، سيتعامل مطور الواجهة الأمامية مع العمل بشكل أفضل قليلاً من منافسيه وزملائه.

  • , , - , , , , . , . - , - — .
  • , , .
  • , , , « », .
  • ستساعد المهارات الفنية والذوق والشعور بالأناقة على الجمع بين التصميم الجاهز وواجهة مبنية بشكل جيد. 

في نفس الوقت ، مثل أي فني ، يجب على المطور فهم الخوارزميات ، وأن يكون لديه تفكير منطقي وأن يكون قادرًا على التحدث بإيجاز في المحتوى وفي الكود.

الحاجة إلى معرفة اللغات الأجنبية


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

من الصعب للغاية تطوير البرمجة دون معرفة اللغة الإنجليزية ، خاصة في تقنيات الويب. 

أين تدرس


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

بالطبع ، أول شيء تصادفه عند اختيار مهنة مطور الواجهة الأمامية هو المدارس عبر الإنترنت. بينما كنت أكتب هذا المقال ، قمت جوجل بالعديد من الصور وتقارير الموقع حول موضوع الواجهة الأمامية. لدي الآن كل من Yandex و Google في الإعلانات التي تعدني بأن أعمل معلم JavaScript في 2-3-6-12 شهرًا. سأغري إذا لم أكن أعرف ما هو جافا سكريبت وكيف أتعلمه في 21 يومًا. إن اتخاذ دورة لبدء أو تنظيم المعرفة أو عدم أخذها هو أمر يتعلق برغبتك ووقتك ودخلك. على أي حال ، لن تتمكن من الاستماع - سيتعين عليك الجلوس والضغط على المفاتيح أو إنشاء مواقع اختبار أو قطع خدمة الحيوانات الأليفة (بما في ذلك الواجهة الخلفية ، بالمناسبة).

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

أهم الكتب وأدوات التعلم


تعتمد قائمة الكتب والموارد على المجموعة التي تختارها. ولكن هناك عدد قليل من أي احتياجات الواجهة الأمامية (وحتى أي مبرمج من حيث المبدأ). سأقوم بعمل قائمة فوضوية - بقدر قوة انطباعاتي الخاصة.

  • « ». , . (, ) , , .
  • htmlbook.ru — , . - . 
  • — , . JavaScript.
  • « JavaScript. -» — . , «» 2019 , .
  • webref.ru — , , . 
  • — ( O'Reilly).
  • codecademy.com — . , , , . , — 15$ . , , . 
  • htmlacademy.ru — , . , .
  • , Youtube . , , . , . 
  • وبالطبع - لا تخف ولا تخجل من الالتزام بمشاريع مفتوحة المصدر (ابدأ بمشاريع صغيرة ، وهناك ستصل إلى المكتبات والأطر) ، واختيار رمز شخص ما ، وتعلم المبادئ والخوارزميات.
  • مقال جيد مع لغة إنجليزية بسيطة للغاية ونصائح لبدء رحلتك في JavaScript.
  • طبعا هبر. فريق RUVDS واحد ترجم الكثير في لغة جافا سكريبت والواجهة!

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

الواجهة الأمامية المستقبلية


تحتوي الواجهة الأمامية على ثلاثة مسارات تطوير رئيسية.

  1. -. — ; — , , TDD, ; — , ; — . 
  2. (-) — , , . - ( , - — -).
  3. , , , , . , .

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

أساطير المهنة


▍ الواجهة الأمامية تموت


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


ما عليك سوى إلقاء نظرة على أكثر 10 لغات برمجة شعبية في مشاريع GitHub وتقييم موقع JavaScript في هذا الرسم البياني. في هذه الحالة ، لا يعني الخط المستقيم الموت ، بل يعني الاستقرار والطلب.


لغات البرمجة الأكثر شيوعًا من تقرير StackOverflow . بالمناسبة ، احتلت JavaScript الصدارة هنا للسنة السابعة.

وإليك اتجاهات Google.


ديناميكية الاستعلام عن مطور الواجهة الأمامية في العالم ، 5 سنوات


ديناميات طلب البحث "الواجهة الأمامية" (باللون الأحمر) و "الواجهة الأمامية" (باللون الأزرق) في روسيا ، 5 سنوات

really لا يفهم أصحاب العمل أنواع المبرمجين حقًا


لكن الأسطورة الثانية nifiga ليست أسطورة ، ولكنها حقيقة صافية. غالبًا ما لا يفهم أصحاب العمل من هم الذين يوظفونهم ولا يبحثون عن شخص مستعد لحل مشكلات معينة ويتحمل مسؤولية حلهم ، ولكن بالنسبة لشخص "يحتاج إلى معرفة" نوع من تكديس التكنولوجيا. هذا هو السبب في أنك بحاجة إلى الاستعداد لحقيقة أن مهمة الواجهة الأمامية ستبدو مرة واحدة كمهمة مصمم تخطيط ، والثانية - في مهمة كاملة. إذا كان صاحب العمل قد تعلم اختصار TDD (التطوير المدفوع باختبار) ، فيمكن أيضًا العثور على الوظيفة الشاغرة بين المختبرين :-) في الواقع ، مثل هذه اللعبة كما هو الحال في متطلبات المبرمجين الأماميين لم يتم العثور عليها عمليًا في أي مكان (أسوأ فقط مع متخصصي العلاقات العامة والمسوقين ، تلك بشكل عام يجب أن يكون MFP). إذا كنت تريد حقًا الانضمام إلى الشركة وفهمت أن المقابلة لن تكون هناك ،حاول نقل المحادثة إلى المهام وأخبر كيف ستحلها تمامًا وبمساعدة أي مكدس. ومع ذلك ، إذا لم تذهب إلى هناك بالفعل في المقابلة ، فربما تفكر جيدًا في الشركة؟ 

نصيحة رئيسية


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

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

Source: https://habr.com/ru/post/undefined/


All Articles