Ako začať s Frontend vývojom: tipy a sprievodca pre vývojárov

Čo robí frontend developer

Frontend developer vytvára vizuálnu časť webovej aplikácie s ktorou používateľ interaguje. Okrem programovania s tým súvisia napríklad aj tieto činnosti:

• Optimalizuje webové aplikácie z pohľadu rýchlosti, SEO, používateľského zážitku UX atď.
• Testuje webové aplikácie.
• Zabezpečuje prístupnosť pre všetkých používateľov napr. so zdravotným postihnutím.
• Komunikuje s dizajnérom, backend developerom prípadne aj so zákazníkom, preto je dôležité pracovať aj na svojich soft skilloch.
• Neustále sa učí sa a sleduje nové technológie.

Rozdiel medzi frontend a backend developerom

Frontend developer vyvíja webovú aplikáciu, ktorá beží v prehliadači na strane používateľa. Jednoducho povedané to, čo sa zobrazí používateľovi v prehliadači, keď si otvorí web. Okrem toho rieši interakciu používateľa s webom napr. cez formuláre, tlačidlá a podobne. Na druhú stranu backend developer vyvíja časť aplikácie, ktorá beží na serveri a teda bežný používateľ nevidí, čo je na pozadí. Úloha backend developera je napríklad spracovanie dát a ich uloženie do databázy, overenie prístupových práv používateľa atď.

Fullstack developer vie pracovať aj s backendovými aj frontendovými technológiami. Nevýhodou je, že fullstack developer sa musí naučiť omnoho viac a pravdepodobne sa mu nepodarí ísť toľko do hĺbky, ako keby sa zameral len na jednu oblasť. Na druhú stranu, ako fullstack developer si vieš upraviť alebo dorobiť funkcionalitu na backende bez toho, aby si čakal na iného developera.

Tip: Dobrý frontend developer by mal poznať, ako to funguje aj na backende. Určite ti odporúčam naučiť sa pracovať s databázou, pochopiť REST API atď. Najlepší spôsob, ako sa to naučiť, je spraviť si kompletnú webovú aplikáciu, kde si vyskúšaš aj backend. Nemusíš ísť veľmi do hĺbky. Úplne stačí spraviť jednoduchú webovú aplikáciu, kde len získaš prehľad, ako to funguje. Vďaka tomu sa ti bude lepšie komunikovať s backend developermi a prípadne si budeš vedieť sám fixnúť nejaký bug.

Frontend musí samozrejme komunikovať s backendovou časťou aplikácie. Zvyčajne sa používa REST API. Do popredia sa tlačia aj iné technológie ako napr. GraphQL. Vďaka tomu si môže frontend vypýtať dáta z backendu, napríklad vo formáte JSON, pričom tieto dáta potom zobrazí do prehľadnej formy pre používateľa.

Ako sa stať frontend developerom

Na začiatok ti stačí akýkoľvek počítač s internetom. Ja som začínal písať HTML kód v obyčajnom textovom editore, ktorý som potom otvoril v prehliadači.

Ako frontend developer budeš programovať v jazykoch HTML, CSS a JavaScript. Okrem toho sa stretneš s veľkým množstvom nástrojov, knižníc a frameworkov, ako napríklad React, Git, TypeScript, Bootstrap, ESLint, webpack, npm atď. Zorientovať sa vo všetkých týchto nástrojoch nie je ľahké. Okrem toho v ekosystéme webových technológií a hlavne JavaScriptu vznikajú nové nástroje a frameworky skoro každý deň. Aj pre skúseného developera je často ťažké vybrať si správny framework, ktorý sa chce naučiť alebo použiť pre budúci projekt. Ak sa chceš lepšie zorientovať, pozri si túto road mapu pre frontend developerov. Je to osnova, podľa ktorej môžeš postupovať pri učení.

Tip: Ak ešte len začínaš s HTML, CSS a JavaScriptom, tak neodporúčam skočiť rovno na pokročilejšie frameworky ako je React, Angular alebo Vue.js. Až keď sa budeš cítiť komfortne a nakódiš si zopár webových stránok v obyčajnom HTML, CSS a JavaScripte, tak môžeš prejsť aj na framework ako je React.

Aké vývojové prostredie si vybrať

Na výber máš viacero vývojových prostredí (IDE). Rozhodnutie je čisto na tebe, ale najdôležitejšie je, aby sa ti v ňom dobre pracovalo. Je však vhodné, ak používaš rovnaké IDE ako tvoji kolegovia. Predídeš tak viacerým problémom pri nastavení prostredia. U nás najčastejšie používame Visual Studio Code, ktorý je zadarmo a patrí medzi najpoužívanejšie IDE pre JavaScript developerov. Veľa kolegov používa aj WebStorm, avšak ten je platený. Dôležité je, aby IDE podporovalo doplnky, ktoré ti zjednodušia prácu napr. lintre, syntax highlighting pre rôzne frameworky alebo majú integráciu s gitom.

Aký JavaScriptový framework je najlepší

Aktuálne najpoužívanejšie JS frameworky sú React, Angular a Vue.js. V prvom rade treba povedať, že žiadny z nich nie je najlepší ani najhorší. Všetky tri sú používané a obľúbené medzi developermi a každý z nich ma svoje výhody, ale aj nevýhody. Na internete nájdeš veľa porvnaní, ako napríklad tento článok od Academind alebo video, ktoré ti pomôžu vybrať. Porovnať ich v tomto článku by bolo na dlhé písanie.

Z mojej skúsenosti viem, že veľa developerov prešlo z jedného na druhý. Ja som napríklad začal s Vue.js a teraz pracujem v React-e. Keď sa naučíš jeden, tak prechod na iný už je oveľa rýchlejší, pretože zdieľajú rovnaké koncepty. Niekedy je jediný rozdiel v názve a spôsobe zápisu.

Ako sa naučiť HTML, CSS a JavaScript

Na internete nájdeš nekonečné množstvo materiálu. Ja som vybral niekoľko zdrojov, ktoré sú vhodné ako pre začínajúcich, tak aj pre pokročilých developerov:

Internetové zdroje zdarma

MDN Web Docs bude tvoja Biblia, kde nájdeš veľmi veľa materiálu o webových technológiách. Naučiť sa všetko čo je na MDN je nereálne, ale keď budeš potrebovať niečo konkrétne spraviť, tak vieš, že tu to nájdeš. Väčšinou, keď si googlim čokoľvek o HTML, CSS alebo JavaScripte, tak rovno klikám na výsledky z MDN-ka.

Tip: Nie je dôležité sa naučiť všetko, ale vedieť si to rýchlo vyhľadať. Veci ktoré nebudeš pravidelne používať, tak pravdepodobne zabudneš. Preto je skôr dôležitejšie, keď vieš kde hľadať.

JavaScript som sa naučil úplne zadarmo z portálu javascript.info.  Nájdeš tu informácie od základov až po pokročilé témy s jednoduchým, ale podrobným vysvetlením. Je to vhodná alternatíva k MDN Web Docs.

Platené kurzy

Ak preferuješ video kurzy, tak na Udemy vieš nájsť veľa kurzov do 15€. Osobne mám dobré skúsenosti s kurzami od Maximiliana, ale vďaka recenziám vieš nájsť veľa iných kvalitných kurzov.

Na CSS odporúčam kurz CSS for JavaScript Developers. Nepatrí k najlacnejším, ale je veľmi dobrý a investícia sa určite vráti. Tento kurz je vhodný aj pre skúsenejších developerov.

Ja osobne, ale aj niekoľko mojich kolegov začalo svoju cestu web developera kurzom Webrebel. Aj keď je tento kurz už niekoľko rokov starý a môže sa zdať zastaraný, stále ho odporúčam na učenie HTML a CSS-ka. Autor Yablko ho momentálne prerába a aktualizuje o novinky. Okrem toho, že sa veľa naučíš, tak sa aj zabavíš pri jeho pozeraní :)

Tip: Najlepší spôsob, ako sa naučiť webové technológie je vytvoriť si vlastný projekt. Preto vždy keď budeš pozerať akýkoľvek video kurz alebo si niečo prečítaš, tak si to hneď vyskúšaj. Inak to jednoducho zabudneš. V tomto videu to dobre zhrnul yablko.

Blogy & Články

Vybral som aj niekoľko webov, kde nájdeš užitočné články:

• Smashing magazine
• css-tricks
• web.dev
• Nielsen Norman Group

Tip: Do komunity sa snažíme prispievať aj my našimi článkami. Odporúčam ti sledovať sériu Frontend Briefly, kde každý mesiac zhrnieme najdôležitejšie novinky zo sveta frontendu. Pre pokročilejších sme pripravili články o optimalizácii React SPA aplikácií v benchmark nástrojoch.

Zhrnutie

Verím, že ti tento článok pomohol zorientovať sa vo frontendovom ekosystéme. Všetko, čo potrebuješ je len snaha učiť sa a skúšať si všetko aj prakticky. To je to najdôležitejšie na ceste stať úspešným developerom.