تعلم كيفية تعلم جافا سكريبت

5 توصيات حول كيفية قضاء وقتك عند تعلم JavaScript

صورة للفونس موراليس على Unsplash

يعد التنقل في النظام البيئي الواسع لجافا سكريبت الحديثة مهمة شاقة. هناك مجموعة واسعة من الأطر الأمامية ، وحفنة من الحزم النمطية ، و 1000 من مكتبات الأدوات المساعدة - ناهيك عن جميع الوحدات النمطية Node.js التي يمكن تشغيلها على جهازك أو الخادم. كيف تعرف من أين تبدأ؟ في أي الموضوعات يجب أن تقضي وقتك؟

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

1. الحصول على راحة مع جافا سكريبت غير متزامن.

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

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

يستغرق بعض الوقت لقراءة الموارد التي أدرجها أدناه ، بالترتيب. ينبغي أن يعطيك فكرة جيدة عن المكان الذي تبدأ به البرمجة غير المتزامنة.

الموارد الموصى بها:

  • تاريخ (ومستقبل) JavaScript غير المتزامن من مدونة مطور Okta
  • الفصل الثاني: الاسترجاعات من كتاب كايل سيمبسون للأداء والأداء
  • الفصل الثالث: وعود من كتاب كايل سيمبسون للتزامن والأداء
  • باستخدام الجلب من شبكة تطوير Mozilla (MDN)
  • Async / في انتظار البرنامج التعليمي من scotch.io

2. تعلم أساسيات TypeScript.

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

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

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

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

الموارد الموصى بها

  • TypeScript في 5 دقائق من وثائق TypeScript الرسمية
  • اللعب في جميع أنحاء في TypeScript REPL
  • [Paywalled] TypeScript 4 ساعات ورشة عمل من قبل مايك الشمالية

3. فهم سبب وجود أطر JavaScript.

لقد كانت أطر عمل JavaScript موجودة منذ أن بدأت تطوير الويب لأول مرة في أواخر عام 2012. في ذلك الوقت ، كانت AngularJS هي صاحبة أعلى نسبة ، وحصلت Backbone.js على حصة سوقية جيدة ، وكانت Ember أكثر الشركات شهرة (المقصود منها التورية). ومن المثير للاهتمام ، على الرغم من أنها أصبحت الآن شيئًا من الماضي (تم استبداله في الغالب بـ React و Vue) ، إلا أن المشكلات التي تتناولها أطر عمل الواجهة الأمامية لم تتغير كثيرًا. فمثلا:

  • ربط البيانات طريقة عرض إلى وحدة تحكم. هذا هو الأكثر أهمية. يعد الحفاظ على عرض واجهة المستخدم متزامنة مع حالة تطبيق الواجهة الأمامية هو السبب الرئيسي لجميع أطر عمل الواجهة الأمامية. سواء أكان الإطار MVC أو MVVM أو مجرد طبقة عرض ، فلديهم جميعًا طريقة لربط بعض الحالات بمنظر وإبقائها متزامنة.
  • مكونات قابلة لإعادة الاستخدام. هذا هو أكبر شيء حصلت عليه AngularJS بشكل صحيح. إن التركيب القائم على المكونات لطرق العرض الأمامية الخاصة بك ، مع JS التي تقوم بتجميع القوالب إلى HTML ، يقع في قلب الأطر الحديثة مثل React و Vue ، ولكنه موجود منذ AngularJS. ببساطة ، لا يمكن إنشاء مكونات ديناميكية قابلة لإعادة الاستخدام ، دون استخدام إطار عمل موجود أو إنشاء إطار خاص بك ، لأن واجهة برمجة التطبيقات لمكون الويب محدودة للغاية ولا تتعامل مع ربط البيانات.

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

الموارد الموصى بها

  • أعمق سبب وجود أطر جافا سكريبت الحديثة

4. تعلم اثنين من أطر مماثلة في وقت واحد.

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

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

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

5. إزالة الغموض عن عملية البناء.

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

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

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

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

الموارد الموصى بها

  • Webpack من لا شيء. ينصح به بشده! الغوص العميق العميق في المشاكل التي يحلها webpack
  • Grunt و Gulp.js: أدوات عداء المهام لتبسيط عملية تطوير الواجهة الأمامية

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