👨🏻‍⚕️ 🍭 🤾🏻 كيف تتعلم تطوير الواجهة الأمامية ، والعثور على وظيفتك الأولى وعدم الحصول على نتوءات 🐇 👦🏽 🙆🏿

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

سألنا Oleg Shikov ، عميد قسم تطوير الويب في GeekBrains ، و Daria Dyachkova ، مطور ويب مبتدئ ، حول كيفية التعلم بشكل صحيح ، وكيفية عدم الحصول على لقطات كبيرة والانتقال خلال مهنة .

في عام 2015 ، دخلت داريا دياتشكوفا المدرسة العليا للاقتصاد في كلية الاقتصاد العالمي والشؤون الدولية لأنها أحبت اللغات أكثر من أي شيء آخر في المدرسة - درست اللغة الإنجليزية والألمانية ، وفازت باستمرار بدورة الألعاب الأولمبية. لقد أحببت هذا المجال ، ولكن ليس بالروعة في عينيها ، لذلك استمرت داريا في البحث عن مهنة مستقبلية. في عام 2018 ، جاءت في يوم مهني إلى إحدى وكالات الموارد البشرية ، وبعد ذلك غيرت اتجاهها في اتجاه غير متوقع.

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

في المنزل ، بدأت في google ، ومشاهدة مراجعات للمهن. في السابق ، قامت داريا بعمل صفحات ويب على Tilda و Wix ، وأبقت على مراجعة مدونتها للأخبار الدولية ، لذلك فكرت في الواجهة الأمامية في المقام الأول. ومع ذلك ، نظرت في جميع الندوات التمهيدية عبر الإنترنت للمهن ولغات البرمجة ، وحاولت كتابة جزء صغير من التعليمات البرمجية بعدة لغات برمجة ، واخترت JS كأقرب لغة.

ماذا تفعل موافقة الجبهة

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

كتب أوليغ الرمز منذ الطفولة. كانت التجارب الأولى في C ، وفي عام 2011 تحول إلى جافا سكريبت. الكثير مما يوجد في التكنولوجيا الآن كان فقط في مهده. لم يكن لدى HTML و CSS إمكانات كبيرة ، وساد Flash في الصناعة. كانت المهنة ككل أبسط بكثير - مجرد تخطيط HTML وتخطيط بسيط. كان يكفي كتابة العلامات وتصميمها بشكل جميل في CSS. نقر المستخدمون على زر وتم تحديث الصفحة بالكامل. غادر الطلب إلى الخادم ، أعطى الخادم تخطيط جديد. لكن هذا النهج لم يسمح بواجهة مستجيبة.

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

واجهة التعلم - هل تعلم جافا سكريبت؟

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

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

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

"قبل بضع سنوات ، ألقى الجميع باللوم على PHP معًا ، والآن ألقى الجميع باللوم على جافا سكريبت ، فهذا هو التيار السائد. بالطبع ، جافا سكريبت لا تخلو من المشاكل ، لا أحد يجادل في ذلك. ولكن على سبيل المثال ، لا يتم تنفيذ TypeScript (لغة شائعة أخرى من Microsoft ، وهي امتداد لقدرات JS) في المتصفح نفسه - يتم ترجمتها (تجميعها) إلى JavaScript. إذا كتبنا شيئًا على TypeScript ، فسنستمر في الحصول على JavaScript ، والذي سيتم تشغيله بالفعل في المتصفح. لتصحيح الكود بشكل صحيح ، تحتاج إلى معرفة JavaScript وأن تكون قادرًا على العمل مع المتصفح. "

لكن داريا تستغرق وقتًا لتعلم الأشياء التي لم يتم تضمينها في البرنامج.
"اعتدت على التعلم والفهم كثيرًا حتى النهاية ، فأنا أحد هؤلاء الأشخاص الذين يقرؤون جميع المواد الإضافية للمقالات ويقومون بمهام إضافية ، لأنهم مهتمون فقط. أنا أمضي بعض الوقت لأتعلم ، على سبيل المثال ، Nuxt.js و Typescript و Vue.js و Webpack و Stylus ".

ما هي ردود الفعل ، فيو والزاوية وكيفية اختيارهم

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

المكتبة هي أيضًا رمز JavaScript مكتوب بالفعل من قبل المطورين الآخرين. يوفر مجموعة مريحة من الحلول لأداء الإجراءات المعدة المطلوبة بانتظام في العمل. توجد مجموعة كبيرة ومتنوعة من المكتبات على الويب تسهل كتابة واجهات مواقع الويب سريعة الاستجابة. من بينها ، الأكثر شهرة هي React و Vue و Angular.

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

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

داريا تكتب روايات مغامرات وتطور دليلاً لكون كتابها على Nuxt.js. كما أنها تقوم بتنفيذ مشاريع وهبوط لأصدقائها ، لذلك تعلمت تخطيطًا تكيفيًا واستفسارات إعلامية والمزيد. "بدأت React.js ، توصلت إلى مشروع للمستقبل أريد تنفيذه على React Native. بينما أخطط للهندسة المعمارية ، أرسم باستخدام المخططات الانسيابية ، واقرأ عن التقنيات التي يمكن استخدامها ".

كيف هي الدراسة

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

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

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

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

بالإضافة إلى الدراسة ، تحب Daria الدراسة على منصة Kodiri.com ، حيث تقام المسابقات الدولية في JS. "هناك يمكنك التدريب بمفردك ، وحل المهام المتعلقة بوقت ودقة وجمال الرمز. قابلت مؤسس منصة ريكاردو - إنه رجل رائع. الآن أكتب لهم الألغاز لهم. لكل مهمة ، أقوم بتطبيق حل مرجعي واختبارات (لذلك ، بالمناسبة ، بدأت كتابة اختبارات الوحدة). من الممتع بالنسبة لي أن أقوم بالتنافس مع لاعبين آخرين عندما يكون احتمال أن تكون واحدة من المهام الخمس على الأقل هي تأليفك ≈0.94. نعم ، فكرت ، كنت أشعر بالفضول لماذا أقابلهم كثيرًا. أنا بصراحة أقرر بلادي ولا أنظر إلى الإجابات. إنه يلتقط عنصر التلعيب ، لقد تلقيت بالفعل أعلى الكتفيّات (إمبيريال ماجستي) ، والآن يبقى نقل يوراش كأفضل لاعب في الشهر. بشكل عام ، افتقرت إلى هذا العنصر من اللعبة وروح المنافسة في التدريب.أعتقد أن الأمر يستحق إضافة مثل هذه الفرص إلى المنصات التعليمية. بضعة أيام من ألغاز Kodiri على السرعة ، وفي الحلم سأكتب arr.map (e => ".

إيجاد وظيفتك الأولى

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

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

عندما حصلت داريا على ستة أشهر من التدريب وملخص محفظة على شكل موقع ، خضعت لعدة مقابلات ، لكنها لم تكن لديها المهارات الكافية للحصول على مطور أمامي.

"في المقابلة الأولى ، كان الأمر مخيفًا. تقدمت بطلب للحصول على وظيفة كمطور أمامي لـ Vue. لقد حضرت بعناية ، وكررت جميع مواد JS و Vue ، وكل ما تعلمته GeekUniversity في ستة أشهر ، وفرز الأسئلة الصعبة وجميع أنواع الأشياء الصغيرة حيث تتصرف JS بشكل غير متوقع. أجريت المقابلة على سكايب. شركة صغيرة ، على الفور مقابلة فنية ، تجاوز الموارد البشرية. أجبت بمرح على الأسئلة ، وتحدثنا لمدة ساعة ... ثم اتضح أنهم ما زالوا يبحثون عن مجموعة كاملة من مطور البرامج. يحدث ".

_{في Habr Career ، يمكنك الاطلاع على أحدث الوظائف الشاغرة لمقدمي الخدمات الأمامية والاشتراك في الوظائف الجديدة.}

قال أوليغ: "يُطرح على المطورين الصغار أسئلة بسيطة للتأكد من أنهم يعرفون الأساسيات. وسأستفسر عن التصميم التكيفي والدلالي ، حول كيفية العمل مع JavaScript خالص. الآن الاتجاه هو على الأطر والمكتبات ، نفس JavaScript ، Vue و Angular ، و "vanilla" بدون مكتبات إضافية - لا يعرفها الجميع. أود أن أتأكد من أن المطور يعرف كيفية العمل معه ، ولم يهرع على الفور إلى معسكر رد الفعل الشرطي.

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

"بعد مقابلتين إضافيتين ، نصحني بمواصلة دراستي وإعادة المحاولة لاحقًا. كنا بحاجة أيضًا إلى معرفة عامة - بروتوكولات وحلول معمارية والمزيد. لقد فهمت بنفسي ، كان من السابق لأوانه الاستقرار. لذلك ، وجدت عملًا رائعًا مع تكنولوجيا المعلومات - حصلت على مهندس دعم فني في Bookmate. تقع على عاتق القارئ مسؤولية الإجابة عن الأسئلة حول تشغيل التطبيق والموقع ، وتقديم المشورة بشأن شيء صغير حول كيفية إصلاحه ، واستكشاف المشكلات الأكبر لإصلاح الأخطاء في JIRA و Confluence. بالإضافة إلى ذلك ، يمكنني الآن أن أتخيل كيف يستخدم المستخدمون العاديون واجهة المستخدم / UX لتطبيقنا. تلميح ، "هذا ليس خطأ ، هذه ميزة." أو عندما أراد المطورون الأفضل ، لكن المستخدمين لم يفهموا كيف كان ذلك ولماذا.

فرصة جيدة للنظر إلى الجانبين هي كيفية استخدام المستخدمين للتطبيق ، وكيفية تطويره وإصلاحه من قبل المطورين. "

كيف تتطور في المهنة

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

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

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

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

PWA (تطبيقات الويب التقدمية) - هذه مواقع تحتوي على ميزات إضافية تسمح لك بالعمل معها بشكل ملائم ، بما في ذلك من الهاتف الذكي. على سبيل المثال ، على موقع Android PWA ، يمكنك إضافته إلى شاشتك الرئيسية وتشغيله بمجرد النقر على الرمز. هناك فرص يمكنها تحسين الموقع حتى يعمل حتى عندما لا يكون هناك إنترنت على الهاتف الذكي. أي أنه تطبيق أصلي تقريبًا. في الآونة الأخيرة ، أصدرت Google تحديثًا لـ Google Play ، يمكنك بفضله إضافة موقع PWA إلى المتجر ، ويمكن للمستخدمين تنزيله وتحديثه كتطبيق أصلي عادي ، والذي لا يمكن تمييزه تقريبًا عن التطبيق العادي المكتوب ، على سبيل المثال ، في Java. ولكن في الواقع هو مكتوب بلغة جافا سكريبت ويتكون باستخدام HTML.

الرواتب

متوسط الراتب للمتدرب الأمامي هو عند مستوى 35 ألف روبل. يمكن لمتخصص المستوى المبتدئ أن يعتمد على 50 ألفًا ، الوسط - بالفعل على 97 ألفًا.يحصل كل من الإشارة والرصاص في المتوسط على 170-190 ألف روبل. _{وفقًا لمحاسبة راتب Habr Career ، فإن متوسط راتب مطور الواجهة الأمامية أقل بقليل من}_{110000 روبل}_{(الرسم التخطيطي قابل للنقر).}

ما تقرأه وترى للدراسة الذاتية

عبر الانترنت:

تعلم موقع شبيبة Learn.javascript.ru
Refactoring.guru موقع دراسة نمط الأنماط
وضع الحماية المناسب للغاية JS و HTML / CSS مباشرة في المتصفح مع القدرة على مشاركة نتائج عملهم - jsfiddle.net

كتب مباشرة عن JS و HTML / CSS:

أنت لا تعرف JS (هناك ترجمة إلى الروسية "أنت لا تعرف JS")
»HTML5. ".
« CSS3».
«JavaScript. ».
«JavaScript. ».
«JavaScript. ». .

«- ».
« ».
« SQL. MySQL 5». ,
« ».
« - . ». , , ,
« ».
« ». ,
« ». ,
«. ». . , . , . , .

كيف تتعلم تطوير الواجهة الأمامية ، والعثور على وظيفتك الأولى وعدم الحصول على نتوءات