كيف تصبح مطور الواجهة الأمامية؟ دليل خطوة بخطوة إلى عالم الواجهة الأمامية

تحياتي للجميع! اسمي Anastasia Puchnina ، أنا مطور رئيسي في DomClick ، ​​أشارك في الواجهة الأمامية لعرض الإعلانات. اليوم أود أن أشاطركم رأيي حول ما هو مهم لمطور الواجهة الأمامية معرفته. ستكون هذه المقالة مفيدة لأولئك الذين بدأوا للتو طريقهم في التطوير ، أو لديهم خبرة في البرمجة في منطقة أخرى وقرروا التبديل إلى الواجهة الأمامية.



المحتوى:

1. من هو الواجهة الأمامية وماذا يفعل؟
2. من أين تبدأ وماذا تقرأ؟ قائمة مراجعة التدريب
3. ما الصعوبات التي يمكن أن تكون؟ أخطاء في بداية المسار
4. التحضير لمقابلة مطور مبتدئ

من هو الواجهة الأمامية وماذا يفعل؟

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



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



مطورو الواجهة الأمامية هم مبرمجون مسؤولون عن إنشاء موقع ويب للواجهة الأمامية. هذا هو جزء العميل من الموقع الذي يتفاعل معه المستخدم مباشرة على جهاز الكمبيوتر أو الهاتف (العميل).



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





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

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

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

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

? -

بغض النظر عن المنطقة التي تريد العمل فيها والحلول التي يجب إنشاؤها ، هناك قاعدة معينة ، في رأيي ، يجب أن يعرفها أي مطور أمامي.



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







ثلاثة حيتان لتطوير المتصفحات هي HTML و CSS و JavaScript ، مع التي تستحق البدء.



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



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



حفظ في الإشارات والاستخدام.

1. كيف يعمل الويب

قبل أن تبدأ في تطوير المواقع ، يجب أن تفهم ما يحدث عندما تفتح موقعًا في متصفح ، وكيف يعمل نموذج خادم العميل ، وما هو بروتوكول HTTP.

• كيف يعمل الويب: كتاب تمهيدي للوافدين الجدد لتطوير الويب أو لأي شخص (FreeCodeCamp) ؛
• كيف يعمل Mozilla Web (MDN) ؛
• كل ما تحتاج لمعرفته حول HTTP .

2. بيئة التنمية

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

• VSCode هو محرر سريع مجاني مع العديد من الوظائف الإضافية للتطوير ؛
• JetBrains WebStorm - بيئة تطوير متكاملة كاملة ، هناك فترة تجريبية وإمكانية الوصول بموجب ترخيص طالب ؛
• إذا كنت بحاجة إلى إرسال جزء من التعليمات البرمجية لشخص آخر ، والتحقق من الرمز أو حفظه بسرعة عبر الإنترنت ، فيمكنك استخدام محرر عبر الإنترنت مثل Codepen .

3. أساسيات HTML

تعرف على هيكل مستند HTML ، وما هي العلامات وما هي ، والعلامات الوصفية ، والسمات ، وكيفية إضافة الصور ، وإنشاء النماذج. الدلالات وإمكانية الوصول هي نقاط مهمة في التخطيط.

• دليل HTML - Mozilla (MDN)
• مرجع HTML ، دروس HTML و CSS - Webref ؛
• FreeCodeCamp - تعلم البرمجة في المنزل - مصدر مفيد للغاية للتعلم العملي لـ HTML و CSS و JS وما إلى ذلك (المهام خطوة بخطوة في وضع التعلم التفاعلي) ؛
• مقدمة إلى Chrome DevTools. لوحة عناصر لعرض عناصر HTML للموقع ؛
• الدلالات ( العلامات الدلالية لـ HTML5: ما هي وكيفية استخدامها !، الترجمة الروسية ) ؛
• إمكانية الوصول ( كتابة HTML مع وضع إمكانية الوصول في الاعتبار ، الترجمة الروسية ).

4. CSS

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

• CSS و CSS3. خصائص تنسيق عناصر HTML - Html5Book؛
• أوراق الأنماط المتتالية (CSS) - Mozilla (MDN) ؛
• مرجع CSS - Webref ؛
• أدوات مطور Chrome DevTools لعرض الأنماط ؛
• تخطيط على Flexbox في CSS. إشارة كاملة ( ترجمة و الأصلي على الخدع CSS)؛
• 10 تخطيطات حديثة في سطر واحد من CSS من Google ؛
• منهجية BEM ؛
• BEM للمبتدئين. مشاكل التخطيط الواضحة وغير الواضحة .

5. نظام التحكم في إصدار بوابة

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

• جولة تفاعلية GIT للمبتدئين - GitHowTo ؛
• Github هي أكبر خدمة ويب لاستضافة مشاريع تكنولوجيا المعلومات وتطويرها معًا.

ممارسة. ممارسة. ممارسة!

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



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

6. لغة برمجة جافا سكريبت

لا تخلط بين JavaScript وجافا. تعلم أساسيات اللغة: المتغيرات ، الكائنات ، أنواع البيانات ، الوظائف ، السياق والإغلاق ، الطبقات. قارن الاختلافات بين مواصفات EcmaScript القديمة والجديدة. بعد فهم الأساسيات ، انتقل إلى أشياء أكثر تعقيدًا: تعقيدات البرمجة غير المتزامنة (الاسترجاعات ، الوعود ، الانتظار غير المتزامن) وتقديم الطلبات إلى الخادم (XmlHttpRequest ، Ajax ، Fetch ، Cookie).

• يعد برنامج JavaScript التعليمي الحديث مصدرًا رائعًا يحتوي على العديد من الأمثلة ؛
• « JS» — ( );
• FreeCodeCamp JS;
• - JavaScript ( Facebook, Redux Create React App);
• Chrome Dev Tools. JavaScript .

7. DOM (Document Object Model)

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



تمت تغطية موضوع DOM أيضًا بالتفصيل في Expressive JavaScript بواسطة Marein Haverbeck.

8. Node.js، NPM

بفضل منصة برمجيات Node.js ، يمكن استخدام JavaScript خارج المتصفح فقط. باستخدام هذه الأداة ، يمكنك كتابة برنامج وحدة تحكم أو تطبيق من جانب الخادم.



حاول كتابة الخادم الصغير الخاص بك .



يمكنك استخدام الوحدات التي كتبها مطورون آخرون في برامج JavaScript الخاصة بك. تحقق من المستودع عبر الإنترنت لحزم NPM .

9. بابل

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



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

10. بناة الوحدات ، Webpack

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



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



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

• Webpack Screencast مع LearnJavascript ؛
• حزمة الويب. أكمل الدورة 2020 (فلاديلين مينين).

11. معالجات CSS الأولية

المعالج المسبق لـ CSS هو إضافة إلى CSS يوفر بناء جملة جديدًا مناسبًا للمطور ، مضيفًا ميزات جديدة تجعل تطوير الأنماط والحفاظ عليها أسهل وأسرع.



أشهر المعالجات:

• ساس (SCSS) ؛
• قلم .
• أقل .

المزايا الرئيسية لاستخدام معالجات CSS الأولية هي:

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

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

12. معالجات HTML الأولية (القوالب)

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



محركات القوالب الشائعة:

• الصلصال (اليشم سابقًا) ؛
• المقاود .

قم بتخصيص مشروعك عن طريق إضافة أدوات تحميل إلى تكوين حزمة الويب للمعالجة المسبقة لرمز CSS و HTML.

13. أسلوب الكود والنُسالة

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



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



هناك أدوات خاصة يمكنها التحقق من التعليمات البرمجية تلقائيًا وتسهيل الحفاظ على الكود الخاص بك بأسلوب معين عن طريق إعداد تكوين مشروعك مرة واحدة:

• أجمل .
• ESLint .
• EditorConfig ؛
• أجش .

تحقق من توثيق الأدوات ، وحاول توصيلها بمشروعك و IDE ، واتبع نمطًا معينًا من التعليمات البرمجية في مشروعك لجعل التطبيق أفضل!

14. تعلم مكتبة الإطار / واجهة المستخدم

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



أنصحك بالبدء بـ React - فهي تحظى بشعبية كبيرة بين المطورين والشركات ، وتستمر في التطور ، ومن السهل فهمها لمطوري الواجهة الأمامية المبتدئين ، ولديها الكثير من الأدوات الأخرى ومجتمع كبير حولها.



ابدأ بتعلم React بالوثائق الرسمية ، فهي مفصلة للغاية. إذا وجدت أنه غير كافٍ ، فيمكنك العثور على دورة كاملة عن Udemy (على سبيل المثال ، Modern React و Redux- باللغة الإنجليزية ، مع شرح واضح ومفصل للمبتدئين ، وتمارين عملية وجميع المواد اللازمة على React والمكتبات).



انتبه لوصف أنواع معلمات الإدخال لمكونات React ( فحص النوع باستخدام PropTypes ) ، بالإضافة إلى كتابة التعليقات على معيار JSDoc ( سلسلة من المقالات حول استخدام JSDoc).



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



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

15. الاختبار الآلي

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

16. في العمق

• (Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015);
• — Html5Rocks;
• : event loop? | JSConf EU 2014;
• CSS- ( Glen Maddern);
• ;
• VSCode JS ( );
• HTTP REST;
• CORS;
• ( Javascript Design Patterns);
• Progressive Web Applications;
• Redux-Saga React-.

ما الصعوبات التي يمكن أن تكون؟ أخطاء في بداية المسار

أطر التعلم بدلا من المعرفة الأساسية

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





لست بحاجة إلى معرفة كل خاصية أو طريقة CSS في JS عن ظهر قلب تمامًا ، يمكنك البحث عنها إذا نسيت. من المهم فهم المفاهيم الأساسية والتعقيدات: هذا هو الأساس المتين في تطوير الواجهة الأمامية.

التعلم هو العمل الجاد والانضباط الذاتي والكثير من الممارسة

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



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



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



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

نسخ كود شخص آخر

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



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

لا تثق بنسبة 100٪ في الكود الذي تجده

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



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

التحضير لمقابلة مطور مبتدئ

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



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



يمكن أن تكون الأسئلة نظرية وعملية لحل المشكلات الصغيرة.



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



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

مواقع الويب ذات المهام البرمجية:

• LeetCode .
• HackerRank .
• CodeWars .

يمكن أن تساعد قنوات Telegram التي تحتوي على مهام واختبارات JavaScript (على سبيل المثال ،js_test) في التحقق من المعرفة.



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



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





شكرا على القراءة حتى النهاية. آمل أن يكون المقال مفيدًا لك. إذا كنت تعلم أنه يمكن أن يكون مفيدًا لشخص آخر ، فشاركه.



أتمنى لك حظًا سعيدًا في قهر قمم جديدة!