Vzdelávanie
26.03.2021
Skillmea
Študijný plán pre budúceho JavaScript programátora
Ľudia sa nás často pýtajú, ako sa stať frontend developerom, aké technológie by mali ovládať, čo všetko vedieť, kde začať a aká je správna postupnosť jednotlivých online kurzov. Na základe našich skúseností, rád od lektorov ako Yablko a ďalších, sme v tomto článku dali dokopy študijnú cestu budúceho frontened developera.
Frontend developer vs backend developer vs fullstack developerFrontend developer, frontenďák je človek, ktorý je zodpovedný za časti webovej aplikácie alebo webstránky, ktoré používatelia vidia a interagujú s nimi. Backend developer je človek, ktorá má na starosti všetko to, čo človek nevidí - infraštruktúra, dátový model, databáza. No a potom je tu full-stack developer, ktorý je zmesou frontendu aj backendu a zvládne celý proces návrhu webovej aplikácie od začiatku do konca. Pomôžme si týmto meme pre lepšiu vizualizáciu:[Programátorské meme]V dnešnej dobe sa dosť stiera hranica medzi frontendom a backendom. Je to kvôli tomu, že čoraz viac úloh, ktoré spadajú do oblasti backendu, majú na starosti frontend vývojári.
Frontend developer robí najmä tieto úlohy:
• rozhoduje o dizajne a štruktúre webstránok,
• vyvíja funkcie na dosiahnutie dobrej používateľskej skúsenosti (user experience),
• dbá na responzivitu webstránky,
• optimalizuje webstránku pre rýchle načítanie a škálovateľnosť v budúcnosti,
• volí správnu kombináciu webových technológií pre dosiahnutie najlepšieho výsledku.
Zručnosti front-end developeraDobrý frontenďák je na nezaplatenie. Doslova. Pri vývoji webstránok či aplikácií je nesmierne dôležitý a musí preto mať komplexné znalosti nielen z oblasti vývoja webu:
• ovládať technológie ako HTML, CSS, JavaScript a ďalšie (čítaj ďalej v článku),
• ak vie pracovať s nejakým grafickým softwarom ako napr. Photoshop, Sketch alebo Illustrator, je to veľké plus,
• základné znalosti SEO,
• dobré komunikačné znalosti, lebo veľa komunikuje s kolegami (grafik, backend developer, projektový manažér, klient),
• nezľakne sa problémov a vie ich riešiť.
Mzda frontend developeraPodľa portálu platy.sk na Slovensku zarába JavaScript developer (prečo sme vybrali práve pozíciu JavaScript developer sa dozvieš nižšie v článku) od 1.300 Eur až po 2.900 Eur. Záleží od počtu rokov praxe, skúseností, projektoch na akých si už pracoval a tak ďalej. Dobrých JavaScript developerov firmy stále hľadajú, takže keď naskočíš na vlak frontend developmentu, o prácu budeš mať postarané.[Image]
JavaScript je aj extrémne populárny, podľa RedMonk rebríčka je JavaScript číslo 1 čo sa týka popularity na GitHube a Stack Overflow. Keď pohľadáš aj otvorené pozície napr. na Profesii, vyhodí ti to stovky pozícií JavaScript či frontend programátora. A keď si do svojho LinkedIn profilu doplníš, že ovládaš JavaScript a k tomu nejaký JavaScript framework, inbox ti vybuchne od ponúk rôznych IT recruiterov. Poď na to a pozri si návod, ako sa stať frontend programátorom.
Ako sa stať frontend developerom?Nenechaj sa odradiť a choď za svojim cieľom. V texte nižšie sme vypichli podľa nás tie najdôležitejšie technológie, ktoré by si ako dobrý frontenďák mal ovládať. Poďme na to.
“TL;DR: HTML, CSS a JavaScript sú chrbtovou kosťou frontend developmentu. Frontend development kombinuje práve tieto tri technológie a k tomu JavaScriptové frameworky (alebo knižnice).”
Krok číslo 1: HTML a CSSToto je úplne prvá téma, ktorej by si sa mal venovať, pokiaľ máš v pláne byť frontend developerom. Je to alfa a omega celého frontend developmentu. HTML a CSS používajú všetky weby, všetky webové aplikácie. HTML a CSS ťa zadarmo naučí kurz Webrebel 1: HTML, CSS a JavaScript. Všetky videá o HTML a CSS sú k dispozícii zadarmo, stačí sa prihlásiť do kurzu. V tomto kurze sa naučíš aj dôležité veci o tom, ako vôbec internet funguje, ako fungujú prehliadače, čo je HTTP a HTTPS, DNS, JSON, XML a kopec ďalších skratiek, ktorým teraz možno nerozumieš, ale v procese tvorby webstránok sú to dôležité znalosti.
A keď budeš pri CSS, venuj mu poriadne veľa času. Môže sa zdať, že je ľahké pracovať s CSS, ale na jeho zvládnutie je potrebného veľa času. Skús sa opýtať backend developera, prečo nie je frontendistom? Šanca, že ti odpovie, "Lebo neznášam CSS" je dosť vysoká.
Sledovať videá nestačí a preto si určite počas ich sledovania rob domáce úlohy, ktoré v kurze sú. Urob si svoje vlastné portfólio, ponúkni sa svojim známym, že im spravíš webstránku, rob maličké projektíky len tak pre svoje potešenie a takto sa budeš zdokonaľovať a chytíš písanie kódu za pačesy.[Ukážka HTML, CSS, JavaScript |Zdroj: https://moz.com/blog/javascript-seo]
Krok číslo 2: píš lepšie CSSLepšie CSS sa naučíš písať napríklad vďaka preprocesorom. Známymi preprocesormi sú Sass, Less alebo Stylus. Preprocesor je program, ktorý spracuje kód v jednom formáte (napr. Sass) a zmení ho na kód v druhom formáte (CSS). Vďaka Sass vieš písať menej kódu a bude prehľadnejší.
Keď budeš robiť na webových projektoch, je dobré ovládať aj nejaký ten CSS framework. Najväčšími frajermi na tomto poli sú pravdepodobne Bootstrap a Foundation. Bootstrap je iniciatíva Twitteru a zaslúži si veľkú pochvalu za zavedenie responzívneho dizajnu vo veľkom meradle. Bol to prvý framework, ktorý podporoval filozofiu 'mobile-first'. Pomocou Bootstrapu vieš relatívne rýchlo vytvárať responzívne weby.
Ak je pre teba Bootstrap zbytočne obmedzujúci v tom, ako tvoj dizajn bude vyzerať, vyskúšaj CSS framework Tailwind 2. Je pre ľudí, ktorí chcú mať flexibilitu a tvoriť vlastný dizajn. Tailwind je intuitívny a moderný CSS framework, ktorý sa dá rýchlo naučiť.
Krok číslo 3: trošku prikúrime - JavaScriptJavaScript bude pre teba ako frontend developera bezpochyby najdôležitejšou zručnosťou. Ako sa naučiť JavaScript? Logická odpoveď: začni základmi. Nebuď povrchný, ale ani v úvode nechoď do úplných detailov. Learning by doing je naše odporúčanie, keď sa učíš JavaScript:
1. Nauč sa základy JavaScriptu,
2. Nauč sa React, Vue alebo Angular,
3. Pochopíš, že nemáš dobré základy JavaScriptu,
4. Vráť sa k bodu 1. a nauč sa poriadne JavaScript.
JavaScript je už niekoľko rokov po sebe najpopulárnejším programovacím jazykom, pozície vyžadujúce JavaScript pribúdajú ako huby po daždi. Keď budeš vedieť JavaScript, o robotu máš postarané. Yablko pripravil parádny kurz o modernom JavaScipte. Tento kurz ťa naučí písať moderný JavaScript, budeš vedieť jeho syntax (ES6 a ES7), aby si nepísal spaghetti code a pravidlá jazyka. Okrem toho, zvládneš nástroje ako package managers (správa závislostí) npm a yarn, skrotíš DOM, budeš vedieť používať nástroje ako Webpack a tak ďalej. V kurze je takmer 23 hodín materiálu o modernom JavaScripte, bude to fuška, ale výsledok bude stáť za to.
Krok číslo 4: vyber si svoj osud - Vue, React, AngularKeď si zvládol predchádzajúce tri kroky, si pripravný naučiť sa pracovať s mocnými nástrojmi v podobe JavaScript frameworkov alebo knižníc. Aktuálne v roku 2021 sú najviac v kurze Angular, React a Vue. Nemusíš vedieť všetky, radšej jeden a poriadne. Každá z týchto technológií má svoje pre a proti a sú určené na komplexný vývoj frontendových webových aplikácií. Tieto frameworky sú si podobné a pokiaľ sa naučíš jeden, prejsť na iný framework nie je až také náročné. Poďme si teraz veľmi stručne predstaviť spomínané tri frameworky.
Angular je vývíjaný spoločnosťou Google, prvýkrát bol vydaný v roku 2010 a je postavený na TypeScripte. Otcom Angularu je Slovák Miško Hevery. V roku 2016 bol predstavený výrazný update tohto frameworku - Angular 2, v rámci ktorého došlo aj k vypusteniu "JS" z názvu. Okrem Googlu samotného používajú Angular weby ako PayPal, Upwork, Microsoft a ďalšie.
React je vyvíjaný ďalším gigatnom - Facebookom, ktorý ho okrem iného používa v aplikáciách Instagram či WhatsApp, na Reacte fičia aj weby Netflixu či Uber. Prvý release bol v roku 2013 a ide o JS knižnicu pre vytváranie používateľských rozhraní (UI).
Vue je najmladším JS frameworkom v tomto výbere. Vue za sebou síce nemá žiadnu veľkú firmu, ale tiež je používaný veľkými firmami, napr. Alibaba, Behance alebo GitLab. S príchodom Vue 3 v septembri 2020 prešlo Vue na TypeScript.[JavaScript frameworks Angular, React, Vue]
BONUSGitGit sa používa vo väčšine vývojárskych firiem, čím skôr sa naučíš s Gitom pracovať, tým lepšie pre teba. Git je verziovací systém, vďaka ktorému sa môžeš kedykoľvek vrátiť k pôvodnej verzii svojho kódu, zdieľaš kód s kolegami spolupracovníkmi, pracuješ v tíme. Git ovládaš cez príkazový riadok alebo si nainštaluješ nejaké GUI pre Git. Git ti vlastne ukladá celú históriu tvojho projektu do repozitára. Svoje repozitáre ukladáš na akomsi hostingu - čo môže byť GitHub, GitLab či Bitbucket.
TestovanieAk chceš byť úplný kráľ, svoj kód určite aj testuj. Vyhneš sa tak mnohým problémom pri vývoji. Pri JavaScripte sú najpoužívanejšie knižnice pre testovanie Jest, Mocha, Chai.
ZáverNezabúdaj, nemusíš dokonale ovládať všetko z vyššie uvedeného. V tomto článku sme sa snažili priniesť ti prierez technológií, ktoré by si mal ovládať, pokiaľ sa chceš stať frontend programátorom. Mohlo by sa zdať, že ich je priveľa a bojíš sa, že to nezvládneš. Pre dodanie sebadôvery si prečítaj tieto príbehy absolventov našich kurzov, ktorí sa rozhodli zmeniť kariéru. Alebo si pozri zopár rozhovorov s absolventami na našom YouTube. Nikdy nie je neskoro začať s programovaním. Keď sa rozhodneš pre vzdelávanie formou online kurzov, najdôležitejšie je vydržať. Držíme ti palce. Kódovaniu zdar!
