Učení, jak se naučit JavaScript

5 doporučení, jak byste měli strávit čas při učení JavaScriptu

Foto Alfons Morales na Unsplash

Procházení obrovského ekosystému moderního JavaScriptu je skličující úkol. Existuje celá řada front-end frameworků, hrstka modulátorů modulů a 1000s obslužných knihoven - nemluvě o všech modulech Node.js, které mohou běžet na vašem počítači nebo serveru. Jak víte, kde začít? Na která témata byste měli trávit čas?

Existuje nespočet věcí, o kterých jsem se dozvěděl, že jsem je nikdy nepoužil, a další věci, které bych si přál, abych strávil více času. Vzhledem k lekcím získaným v průběhu mé sedmileté kariéry, to jsou moje doporučení, jak byste se měli učit JavaScript.

1. Získejte pohodlí s asynchronním JavaScriptem.

Když se podíváte na historii JavaScriptu (nebo vývoj webových aplikací obecně), zjistíte, že asynchronní JavaScript úplně změnil hru. Umožnilo webům přejít ze statických stránek pouze s akcemi na straně klienta k plně rozvinutým aplikacím v prohlížeči. Schopnost vytvořit požadavek HTTP a čekat na odpověď bez opětovného načtení stránky, doslova změnila celosvětový web.

Lze s jistotou říci, že asynchronní programování je základním principem vývoje webu. To je místo, kde byste měli hodně času investovat do učení JavaScriptu, protože zahrnuje další základní principy, jako jsou zpětná volání, přísliby, asynchronizace / čekání a načtení.

Vezměte si čas na přečtení níže uvedených zdrojů, v pořádku. Měli by vám poskytnout dobrou představu o tom, kde začít s asynchronním programováním.

Doporučené zdroje:

  • Historie (a budoucnost) asynchronního JavaScriptu z blogu pro vývojáře Okta
  • Kapitola 2: Zpětná volání z knihy Async a výkonu Kyle Simpsona
  • Kapitola 3: Sliby z knihy Kynea Simpsona Async & Performance Book
  • Použití načtení z Mozilla Development Network (MDN)
  • Async / Await Tutorial od scotch.io

2. Naučte se základy TypeScript.

Diskutoval jsem se sebou asi hodinu, zda to zahrnui, protože se jedná o příspěvek o učení JavaScriptu a TypeScript není JavaScript; je to jeho super sada a vyžaduje použití kroku sestavení. Věřím však v TypeScript tak silně, že jsem ho musel zahrnout.

Toto doporučení má méně společného s JavaScriptem než s doporučenými postupy kódování. JavaScript je volně dynamický programovací jazyk. Je příliš snadné psát kód zranitelný vůči vedlejším účinkům, když procházíte kolem proměnných a datových objektů, které nemají žádné typové smlouvy a neměnitelnost. TypeScript tyto problémy zmírňuje přidáním výrazného psaní a schopností vytvářet čitelné vlastnosti (kromě mnoha dalších úžasných věcí).

Proto doporučujeme, abyste se co nejdříve seznámili se základy TypeScript. Pod „základy“ mám na mysli: jak přidat anotace typu k vašim proměnným, vlastnostem třídy, argumentům funkce a návratovým hodnotám funkce. TypeScript je neuvěřitelně výkonný a je třeba se naučit mnohem víc než jednoduché anotace typu, ale tento první krok vám zabrání pravidelně se střílet do nohy. Stále mě udivuje, jak často kompilátor TypeScript zachytí chybu, kterou jsem zpočátku neviděl.

Ano, kompilátor na vás bude křičet ... hodně. To je v pořádku! Je to váš přítel a chce, abyste byli lepším programátorem. Udělejte si čas, abyste zvážili chybové zprávy, které vám TypeScript dá, a garantuji, že se váš kód výrazně zlepší.

Doporučené zdroje

  • TypeScript do 5 minut od oficiální TypeScript dokumentace
  • Hrajte se v online REKLAMU TypeScript
  • [Paywalled] TypeScript 4 hodinový workshop od Mike Northa

3. Pochopte, proč existují rámce JavaScript.

Rámce JavaScriptu existují již od doby, kdy jsem se na konci roku 2012 poprvé začal věnovat vývoji webových stránek. Tehdy vládl AngularJS nejvyšší, Backbone.js měl slušný podíl na trhu a Ember byl žhavý a příchozí (zamýšlel slovní hříčka). Je zajímavé, že i když jsou nyní věcí minulosti (nahrazují ji většinou React a Vue), problémy, které tyto frontendové rámce řeší, se příliš nezměnily. Například:

  • Vazba dat na řídicí jednotku. To je nejdůležitější. Zachování synchronizace pohledu uživatelského rozhraní se stavem vaší aplikace frontend je primárním důvodem všech front-end frameworků. Ať už je rámec plně MVC, MVVM nebo pouze vrstva pohledu, všichni mají způsob, jak svázat nějaký stav k pohledu a udržet je v synchronizaci.
  • Opakovaně použitelné komponenty. To je největší věc, kterou AngularJS dostal správně. Složení vašich frontendových pohledů založené na komponentách, s JS kompilací vašich šablon do HTML, je jádrem moderních rámců, jako je React a Vue, ale existuje již od AngularJS. Vytváření dynamických, opakovaně použitelných součástí není jednoduše možné bez použití existujícího rámce nebo vytvoření vlastního, protože API webové komponenty je velmi omezené a nezabývá se vázáním dat.

Jedná se o to, abychom jmenovali pár z hlavy. Jde o to, že pokud se podíváte za ozdobné klíče, šroubováky a další nástroje, matice a šrouby jsou stejné. Nástroje se mění a vyvíjí se technologie, ale pokud rozumíte základním bodům bolesti vývoje webu (důvody, proč tyto nástroje na prvním místě existují), budete v mnohem lepší pozici, abyste porozuměli a správně používali jakýkoli současný, budoucí nebo starší odkaz. rámec.

Doporučené zdroje

  • Nejhlubší důvod, proč existují moderní rámce JavaScript

4. Naučte se dva podobné rámce současně.

Piggybacking můj názor na to, jak se základní problémy, které řeší rámce se nezměnily, nyní doporučím, abyste se naučili dva frontendové rámce najednou. Například Vue and React.

Při silném používání jednoho rámce může být snadné začít cítit, že syntaxe a vzorce tohoto rámce jsou součástí základního jazyka (v našem případě JavaScript). Jak se říká, je-li vše, co máte, kladivo, všechno začíná vypadat jako hřebík. Toto rčení, přeloženo do programovací řeči, znamená, že pokud budete používat pouze jeden rámec, začnete ve své podstatě přemýšlet o svých řešeních v tomto rámci a stane se vaší berlou místo vaší síly.

Naučit se nebo znát dva rámce najednou může toto myšlení obrátit a poskytnout vám více pohledu na to, co rámec pro vás ve skutečnosti dělá. Je to přesně jako to, jak vám učení cizího jazyka může ve vašem primárním jazyce skutečně zlepšit. Vidíte podobnosti a rozdíly mezi nimi a přemýšlíte o tom, jaké jazykové konstrukce vedly k podobnostem a rozdílům. Znalost dvou rámců JavaScriptu může poskytnout podobnou perspektivu. Znáte-li dvě cesty ke stejnému řešení, lépe pochopíte kořenové problémy, které řeší.

5. Demystifikujte proces sestavení.

Není mi ztraceno, že jsem nyní vydal 4 doporučení a pouze jedno z nich zahrnovalo učení vanilky JS. Ať se vám to líbí nebo ne, psaní moderního JavaScriptu zahrnuje spoustu nástrojů a rámců a to, co je všechny spojuje dohromady, je proces sestavení.

Build tooling je oblast, která se během mé kariéry nejvíce změnila, protože právě zde lze nalézt největší zisky ve výkonu a velikosti aktiv. Webové společnosti a komunita s otevřeným zdrojovým kódem se neustále snaží zmáčknout každé malé vylepšení, které mohou z procesu sestavování vést, což vede k neustále se měnící sadě nástrojů a procesů.

Musím přiznat, že mi trvalo chvilku, než jsem pochopil, jak fungují nástroje, jako je Webpack. Nastavíte jednoduchou konfiguraci, spustíte příkaz a najednou máte jeden soubor s optimalizovaným, minimalizovaným a kompatibilním kódem prohlížeče. Nástroje pro sestavení se mohou jevit jako černá magie, protože všechny se snaží být nulové nebo velmi malé. To je skvělé pro to, abyste s nimi mohli začít, ale nutí je přistupovat, když skutečně musíte provést nějakou vlastní konfiguraci.

Je nesmírně důležité, abyste pochopili, co tyto nástroje pro vás dělají. Pokuste se pochopit, jaké transformace váš kód prochází a v jakém pořadí. Pokuste se pochopit, jak jsou vaše moduly sdružovány, abyste je mohli lépe optimalizovat. Zkuste se naučit každou možnost konfigurace, protože to má největší dopad na výkon a velikost souboru.

Doporučené zdroje

  • Webpack od Nic. Vysoce doporučeno! Velký hluboký ponor do problémů, které webpack řeší
  • Grunt and Gulp.js: Nástroje pro spouštění úloh, které zefektivňují váš front-end rozvoj

A to je vše! Doufám, že z tohoto příspěvku lze odvodit slušné množství hodnoty. Jak jsem řekl v úvodu, JavaScriptový ekosystém je skličující. Pracuji profesionálně 7 let a pořád se cítím, jako bych se sotva poškrábal na povrchu. Nezkoušejte to vzít najednou - zaměřte se na těchto pět věcí a budete na dobré cestě.