Как да научим JavaScript

5 препоръки как трябва да прекарвате времето си, когато изучавате JavaScript

Снимка на Алфонс Моралес на Unsplash

Навигацията в необятната екосистема на съвременния JavaScript е обезсърчаваща задача. Има широк спектър от фронтални рамки, шепа модулни пакети и 1000 библиотеки за помощни програми - да не говорим за всички модули Node.js, които могат да работят на вашата машина или сървър. Как да разберете откъде да започнете? На кои теми трябва да отделяте времето си?

Има безброй неща, за които научих, че никога не съм стигал до употреба, и други неща, за които бих искал да съм отделил повече време. Имайки предвид научените уроци през моята седемгодишна кариера, това са моите препоръки за това как трябва да научите JavaScript.

1. Удобствайте се с асинхронен JavaScript.

Ако погледнете историята на JavaScript (или уеб разработката като цяло), ще откриете, че асинхронен JavaScript напълно промени играта. Това позволи на уебсайтовете да преминават от статични страници само с действия от страна на клиента до пълноценни приложения във вашия браузър. Възможността за отправяне на HTTP заявка и изчакване на отговора без презареждане на страницата, буквално, промени световната мрежа.

Безопасно е да се каже, че асинхронното програмиране е основен принцип на уеб разработката. Това е мястото, където трябва да инвестирате много от времето си рано в изучаването на JavaScript, тъй като той капсулира други основни принципи като обратни повиквания, обещания, асинхронизиране / чакане и извличане.

Отделете малко време, за да прочетете ресурсите, които изброявам по-долу, за да. Те трябва да ви дадат добра идея откъде да започнете с асинхронното програмиране.

Препоръчителни ресурси:

  • Историята (и бъдещето) на асинхронния JavaScript от блога за разработчици на Окта
  • Глава 2: Обратни обаждания от книгата за асинхронизация и ефективност на Кайл Симпсън
  • Глава 3: Обещания от книгата за асинхронизация и ефективност на Кайл Симпсън
  • Използване на Fetch от мрежата за развитие на 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 имаше приличен пазарен дял, а Ембер беше най-горещата и най-популярната (каскадна целта). Интересното е, че въпреки че те вече са минало (заменено най-вече с React и Vue), проблемите, които тези фронтови рамки адреси не са се променили много. Например:

  • Данни, обвързване на изглед към контролер. Това е най-важното. Поддържането на изгледа на потребителския интерфейс, синхронизиран със състоянието на приложението ви за лице, е основната причина за всички фронтални рамки. Независимо дали рамката е напълно MVC, MVVM или просто изглед слой, всички те имат начин да свържат някакво състояние към изглед и да ги поддържат в синхрон.
  • Компоненти за многократна употреба Това е най-голямото нещо, което AngularJS се оправи. Компонентният състав на вашите изгледи на фронта, като JS компилира шаблоните ви в HTML, е в основата на съвременните рамки като React и Vue, но съществува от AngularJS. Създаването на динамични компоненти за многократна употреба просто не е възможно, без да използвате съществуваща рамка или да създадете своя собствена, тъй като API на уеб компонента е много ограничен и не обработва обвързването на данните.

Те са само да назовем двойка от върха на главата ми. Въпросът е, че ако погледнете зад фантазните гаечни ключове, отвертки и други инструменти, гайките и болтовете са еднакви. Инструментите се променят и технологията се развива, но ако разберете основните точки на болка в уеб развитието (причините, поради които инструментите съществуват на първо място), ще бъдете в много по-добра позиция да разберете и правилно да използвате всяко настояще, бъдеще или наследство рамка.

Препоръчителни ресурси

  • Най-дълбоката причина защо съществуват съвременни JavaScript рамки

4. Научете две подобни рамки едновременно.

Откачам от моята гледна точка как основните проблеми, които рамковите решения решават, не са се променили, сега ще препоръчам да научите две фронтенд рамки наведнъж. Например Vue и React.

Когато използвате една рамка силно, може да е лесно да започнете да се чувствате като синтаксиса и моделите на тази рамка са част от основния език (JavaScript в нашия случай). Както се казва, ако всичко, което имате, е чук, всичко започва да изглежда като пирон. Тази поговорка, преведена на разговор за програмиране, означава, че ако някога използвате само една рамка, по своята същност ще започнете да мислите за вашите решения от гледна точка на тази рамка и тя ще се превърне във вашата патерица, вместо във вашата сила.

Ученето или познаването на две рамки наведнъж може да обърне това мислене и да ви даде повече перспектива за това, което рамката всъщност прави за вас. Точно като това как изучаването на чужд език всъщност може да ви направи по-добри в основния ви език. Виждате сходства и различия между двете и това ви кара да мислите какви езикови конструкции са довели до тези прилики и различия. Познаването на две рамки на JavaScript може да осигури подобна перспектива. Като знаете два пътя към едно и също решение, по-добре разбирате коренните проблеми, които адресират.

5. Демистифицирайте процеса на изграждане.

Не е изгубено от мен, че сега направих 4 препоръки и само една от тях се включи в изучаването на ванилия JS. Независимо дали ви харесва или не, писането на модерен JavaScript включва много инструменти и рамки, а нещото, което ги свързва всички заедно, е процесът на изграждане.

Инструментирането за изграждане е областта, която се промени най-много през цялата ми кариера, тъй като тук могат да се намерят най-големите печалби в ефективността и размера на активите. Компаниите, базирани на уеб, и общността с отворен код непрекъснато се опитват да изтласкат всяко малко подобрение, което могат да излязат от процеса на изграждане, което води до постоянно променящ се набор от инструменти и процеси.

Трябва да призная, отне ми известно време, за да разбера как работят инструменти като Webpack. Настройвате проста конфигурация, изпълнявате команда и изведнъж имате един файл с оптимизиран, сведен до минимум и съвместим с браузъра код. Инструментите за изграждане могат да изглеждат като черна магия, защото всички те се стремят да са с нулева конфигурация или с много малка конфигурация. Това е чудесно за започване на работа с тях, но ги кара да плашат да се приближават, когато всъщност трябва да направите някаква персонализирана конфигурация.

Невероятно е важно да разберете какво правят тези инструменти за вас. Опитайте се да разберете през какви трансформации преминава кодът ви и в какъв ред. Опитайте се да разберете как се пакетират модулите ви, за да можете да ги оптимизирате по-добре. Опитайте се да научите всяка опция за конфигурация, защото това оказва най-голямо влияние върху производителността и размера на файла.

Препоръчителни ресурси

  • Уебпакет от нищо. Силно препоръчително! Страхотно дълбоко гмуркане в проблемите, които решава уебпакетът
  • Grunt и Gulp.js: Инструменти за изпълнение на задачи за оптимизиране на разработката ви отпред

И това е! Надявам се, че от този пост може да се получи прилична стойност. Както казах в моето въведение, екосистемата на JavaScript е поразителна. Работя професионално от 7 години и все още често имам чувството, че едвам надрасках повърхността. Така че не се опитвайте да се заемете всичко наведнъж - съсредоточете се върху тези пет неща и ще сте добре по пътя си.