JavaScript: de unde învăț cel mai bine? Tutoriale, cursuri, cărți și resurse

Azi continuăm seria de articole în care îți prezint baza, esența Front End Development-ului: limbajul JavaScript. Trecem prin cele mai bune tutoriale, cursuri și resurse COMPLET GRATUITE (în mare parte) de unde poți învăța JavaScript la un nivel care să te facă angajabil/ă. Ți-am stârnit interesul?

Salut! Dacă ești prima dată pe site-ul meu, eu sunt Viorel și lucrez în IT de peste 18 ani. Vreau să ajut oameni ca tine să pornească o carieră în IT, sau dacă au deja una, să și-o îmbunătățească. Eu prin „IT” înțeleg: Front End Development, Back End Development, User Interface și User eXperience Design, Marketing Digital, Project Management, Testing și așa mai departe. JavaScript-ul a fost printre primele limbaje pe care le-am învățat, prin 2000, și chiar dacă la-nceput îl foloseam greșit și timid, cu timpul a ajuns să-mi placă și să fiu comod în felul cum îl folosesc. Am trecut prin jQuery, React, Vue.js, Angular și alte câteva framework-uri de-a lungul timpului, însă toate au la bază JavaScript, pe care și tu trebuie să-l înțelegi în varianta „de bază” înainte să începi să înveți vreun framework anume.

Acum ceva vreme am scris un articol și apoi am făcut și un video în care am prezentat cu lux de amănunte ce resurse (în mare parte gratuite) poți folosi ca să pornești de la ZERO în călătoria învățării front end development-ului. Materialele acoperite atunci s-au axat exclusiv pe limbajele HTML și CSS. Azi i-a venit rândul JavaScript-ului.

Cum ar trebui să te gândești la JavaScript în raport cu HTML-ul și CSS-ul?

Dacă facem o paralelă între construcția unei interfețe de site și construcția unei case, putem considera că structura de rezistență a casei (fundație, coloane, grinzi) este structura HTML a paginilor voastre, finisajele, tencuiala, parchetul și mobila sunt CSS-ul menit să facă toată construcția să arate bine, iar instalațiile electrice, termice, de gaz și apă sunt JavaScript-ul menit să facă lucrurile funcționale unde e cazul. Asta-nseamnă că partea de JavaScript poate fi destul de importantă în cazul în care ai nevoie de anumite funcționalități într-un website, odată ce i-ai construit deja baza (și nu înainte).

Vom începe azi o călătorie prin toate resursele care mie personal mi se par esențiale ca să poți învăța JavaScript eficient. Important e să te apuci de treabă și să înveți lucruri, așa că folosește orice metodă și ordine preferi.

Voi menționa și că am redus destul de mult din lista de resurse și am lăsat doar pe cele despre care știu sigur că sunt valoroase, ca să îți optimizezi timpul de învățare. Te asigur însă că și așa, îți va lua niște luni de zile să le parcurgi pe toate în mod temeinic, deci setează-ți așteptările în consecință!

Primii pași în JavaScript

A învăța JavaScript e o provocare dublă. Trebuie să înveți atât programare cât și limbajul JavaScript în mod explicit. Asta-nseamnă că inițial ar fi bine să stăpânești bazele programării de pe LearnProgramming, apoi să faci tutorialul pas cu pas de JavaScript de la FreeCodeCamp, să treci prin 30 tutoriale în 30 zile cu JavaScript 30, prin tutorialul de JavaScript modern de la JavaScript.info, prin cursul de JavaScript de la The Odin Project (de unde ați învățat și HTML și CSS dacă v-ați uitat la video-ul meu precedent), prin ghidul JavaScript the right way, prin lista de mini-tutoriale de pe DigitalOcean și poți spune că ai făcut primii pași în a cunoaște JavaScript.

Dacă mai ai nevoie de informații legate de programare, nu uita să consulți și articolul meu legat de cărți care te ajută să înveți programare sau să te uiți la video-ul pe aceeași temă.

Site-uri unde poți exersa algoritmica

Poți aprofunda partea de algoritmică pe niște site-uri de profil care fac munca de studiere a algoritmilor mai facilă și sunt foarte bine structurate. Înainte de toate poți vedea exemple de implementări de algoritmi pe GitHub-ul JavaScript algoritms. Apoi, pentru a explora algoritmica în Română ai InfoArena, apoi continuă cu LeetCode, CodeWars și HackerRank.

Cursuri și tutoriale de JavaScript

E timpul pentru cursuri și tutoriale. Pentru că sunt una din cele mai bune surse de informații din domeniul front end development-ului, te sfătuiesc să începi cu introducerea în JavaScript de la Mozilla Developer Network, apoi să explorezi algoritmii și structurile de date în JavaScript de pe FreeCodeCamp, cursul JavaScript Foundations de la Gymnasium și JavaScript introduction de la edX.

Tutoriale de nivel mediu

Acum că stăpânești bazele, începe să parcurgi lista de materiale de pe GitHub-ul Învăț eu, înveți și tu (în limba Română). Apoi explorează și Cursul Learn JS puct org, JavaScript Tutorial punct net, JavaScript: Understanding the Weird Parts, programarea funcțională în JavaScript și construiește 15 proiecte de JavaScript învățând JS vanilla.

Tutoriale avansate

Ca să trecem la lucruri mai avansate, te sfătuiesc să parcurgi Learning Advanced JavaScript de John Resig, Advanced JavaScript de pe Udemy și Learn JavaScript by building 7 games. Unul din cele mai bune site-uri unde poți găsi tutoriale de JavaScript în detaliu, pe probleme punctuale foarte nișate, este EggHead punct IO și-ți recomand să treci prin cât mai multe tutoriale, în funcție de lucrurile pe care simți nevoia să le aprofundezi. Și dacă nu te-ai lămurit încă legat de ce ai de învățat, poți plăti niște cursuri de-ale lui Kyle Simpson de pe Front End Masters sau niște cursuri de-ale lui Andrei Neagoe de pe Udemy.

Resurse de JavaScript

Ține minte și că principala ta referință de funcții native de JavaScript este Mozilla Developer Network! În plus, ai la dispoziție și niște exemple de manipulare de DOM pentru care n-ai nevoie de niciun framework pe HTML DOM punct net. Ai o unealtă de vizualizare a felului cum funcționează JavaScript-ul pe JavaScript Visualizer 9000. Explorează neapărat Style Guide-ul de JavaScript al celor de la AirBNB și nu în ultimul rând, vezi cum arată exploratorul de evenimente de DOM ca să înțelegi cum funcționează transmiterea evenimentelor de JS în front end. Ia contact și cu bunele practici prezentate în Clean Code JavaScript pe GitHub.

Nu în ultimul rând, ar trebui să iei în calcul parcurgerea „tomului” de documentație oficială a limbajului JavaScript (sau ECMA Script cum se mai alintă în cercuri restrânse) pe care o găsești aici în ultima specificație sau iterație: 📜 ECMAScript® 2022 📜

Articole și video-uri informative legate de felul în care ar trebui să înveți

Încearcă să citești articolele How to learn JavaScript properly, The right way to learn JavaScript in 2020 și să urmărești The only way to truly learn JavaScript pe YouTube.

Mai poți explora următoarele video-uri informaționale legate de JavaScript: Kyle Simpson despre fundamentele JavaScript-ului avansat (de care am pomenit și mai sus), Philip Roberts despre event loop sau canalul TheNetNinja.

Cărți de JavaScript

Pentru a percepe exact rolul JavaScript-ului în ecuația asta digitală, te sfătuiesc să ai acasă niște cărți foarte bune: una despre algoritmi de Cormen, una de bune practici de Douglas Crockford, Secrets of the JavaScript Ninja, You Don’t Know JavaScript, JavaScript Allongé, Effective JavaScript, Eloquent JavaScript, Learning JavaScript Design Patterns, JavaScript și jQuery. Mai ai aici o listă de cărți dacă vrei să mai explorezi. Cărțile, așa cum v-am mai povestit, nu substituie nicidecum exercițiul practic, dar îți dau o bază teoretică, retorică și practică excelentă pentru a stăpâni programarea și limbajul JavaScript. Ia-le pentru a crește de la un programator mediocru la unul excelent și pentru a înțelege fenomenul la un nivel pe care nu-l poți atinge niciodată dacă faci doar tutoriale și cursuri practice și nu explorezi meta-informațiile despre limbaj.

Framework-uri, librării și flavours de JavaScript

Acum că ai finalizat explorarea JavaScript-ului – deci ABIA ACUM – cred eu c-ar trebui să te apuci de vreun framework sau librărie oarecare. Librăriile sau framework-urile astea sunt foarte populare astăzi, și îți vor crește exponențial șansele să găsești un job bine plătit în domeniu, însă eu cred că sunt un impediment în învățare dacă începi să le parcurgi fără să știi temeinic JavaScript înainte de toate.

Așa că hai să te pregătim de job! Explorează librăriile de Front End de la FreeCodeCamp (Bootstrap, jQuery, SASS, React, Redux, etc), apoi uită-te și în codebase-ul React-ului de pe GitHub, parcurge tutorialul Modern React with Redux, ghidul Vue.JS (întreabă-mă și de tutorialele strânse de mine de pe VueMastery într-un mail sau mesaj!), parcurge Getting started with Angular sau cursul de NodeJS de la The Odin Project. Voi face în viitor un articol special dedicat Vue.JS-ului, care a început să-mi placă mult în ultima vreme (l-am învățat recent, ca parte a unui redesign de site pentru Pentest-Tools.com). Dacă ai vreo altă preferință legată de unul din framework-urile, librăriile și limbajele menționate, lasă-mi o sugestie în comentarii și voi face o listă de resurse completă pentru sugestiile tale, dacă sunt pe gustul mai multor urmăritori ai canalului de YouTube.

Spor la învățat și succes în carieră!