Máte za sebou „pár“ spravených webstránok pomocou HTML a CSS? Využili ste voľne dostupné knižnice komponentov a pokúšali ste sa spraviť vlastný responzívny dizajn, animovať elementy, pracovať s ich obsahom, prípadne ich meniť, pridávať alebo odoberať podľa toho, aké akcie s nimi návštevník robí? Tak vám minimálne technológie ako JavaScript alebo JQuery nie sú cudzie.
Za všetkým hľadaj JavaScript
JavaScript je všade a bez preháňania sa dá povedať, že je tou skutočnou bránou do sveta programovania. Je to celosvetovo najpoužívanejší a najpopulárnejší objektovo orientovaný programovací jazyk, ktorý existuje napríklad vďaka Node.js aj mimo front-endu. Ak sa pustíte do JavaScriptu, budete sa potrebovať naučiť syntax a mať plynulú znalosť základných konštrukcií – cyklov, podmienok, funkcií, objektov, polí, callbackov a samozrejme vedieť, ako z webky v JavaScripte vytiahnuť a pracovať s HTML elementom. Áno, je to náročnejšie ako HTML a CSS. Všetci ale vieme, že nič na svete nie je zadarmo. Hard work definitely pays off!
Moderný JavaScript a.k.a. JSX
Ide o každoročnú aktualizáciu JavaScriptu, ktorej cieľom je zaviesť nové prvky, zjednodušiť syntax a písanie kódu. Tvorí taktiež základ pre technológie na vytváranie Single-page application, čo sú webové aplikácie, ktoré dynamicky prepisujú svoj obsah dátami zo servera bez toho, aby sa celá stránka musela znova načítať. Vďaka tomu sú takto vytvorené webstránky rýchlejšie a responzívnejšie. Webové aplikácie majú veľa ďalších výhod, no objektívne treba povedať, že každá minca má dve strany. Najpoužívanejšími JavaScript front-end frameworkom a knižnicami na vytváranie SPA sú v súčasnosti React.js, Angular.js a Vue.js
- JAVASCRIPT.INFO – Kompletne free tutorial, ktorý vás prevedie moderným JavaScriptom od úplných základov.
- JavaScript Cheatsheat
- Learn2Code – Platený, ale komplexný kurz moderného JavaScriptu.
- IT Academy – Platené kurzy, v rámci ktorých sa naučíte všetko, čo s JavaScriptom a jeho využitím súvisí.
Vue, React alebo Angular… Kto z koho?
Pýtať sa na to, ktorý z týchto reaktívnych frameworkov je lepší, je to isté, ako hľadať odpoveď na otázku „Čo bolo skôr, sliepka alebo vajce?“ Po prečítaní rôznych blogov a fór venujúcich sa tejto téme sa skoro vždy dopracujete ku trom rovnakým záverom. Váš výber ako jednotlivca bude záležať na vašich preferenciách, skúsenostiach a na tom, či pri výbere zohľadníte dopyt na pracovnom trhu. React je veľmi populárny a čo si budeme klamať, aj dobre platený. Hneď po ňom je Vue.js, ktoré má raketový vzostup. Je jednoduchšie na začiatky, ale postupne pritvrdzuje. Angular sa používa často v korporáciách a je tiež dobre platený.
Takéto tvrdenia je dobré mať podložené faktami. Preto sme poprosili spoločnosť Profesia, spol. s r.o. o pár zaujímavých čísel, ktoré sa viažu na čisto slovenský pracovný trh.
V roku 2019 obsahovalo zo všetkých zverejnených pracovných ponúk (253 614) na tomto portáli 2770 ponúk aspoň jedno z kľúčových slov (Angular, Vue, React). Čo tvorilo 1,1 %.
Ak sa pozrieme len na IT pracovné ponuky zverejnené na Profesii, tak je to už 9 %.
Priemerný počet reakcií na jednu pracovnú ponuku v roku 2019 bol 17. Priemerné reakcie na ponuky, ktoré obsahovali aspoň jeden z výrazov boli oveľa nižšie. Vyhovujúci kandidáti tak „čelili“ na pohovoroch oveľa menšej konkurencii.
Tak ako vo svete, aj na Slovensku majú IT ponuky každoročne rastúci charakter. Oplatí sa investovať do vzdelania. Platí to od nepamäti a ani v tomto prípade to nie je inak. Navyše sa viete dostať k obrovskému množstvu dát, informácií, kurzov a ukážok o týchto JS frameworkoch úplne zadarmo.
Aby sme ich predsa len trochu porovnali: Angular je masívny JS framework, respektíve set nástrojov na tvorbu stránok. React a Vue sú knižnice, ktoré stačí pridať do vášho HTML kódu pomocou script tagu. Ďalší rozdiel je v tom, že Angular je napísaný čisto v TypeScripte, čo pre vás znamená písanie kódu v TypeScripte a to znamená sa ho naučiť. V Reacte a vo Vue si môžete vybrať medzi JSX, JavaScriptom alebo TypeScriptom s tým, že v React je aj kód tváriaci sa ako HTML napísaný v JSX, prípadne v JavaScript. Vue kombinuje HTML, CSS a JavaScript.
Pre všetky tri technológie sú typické 3 veci – reaktívnosť, synchronizácia UI s aktuálnym stavom a programovanie pomocou komponentov, resp. samostatne stojacich komponentov, ktoré majú vlastný HTML, CSS a JS a pri zmene jedného sa nemusíte báť, že vám to rozhádže všetko ostatné.
Plusy a mínusy React
+ najzásadnejšia výhoda je asi to, že zmenšuje komplexitu používateľského rozhrania
+ opätovné využitie komponentov v iných častiach aplikácie
+ dobrá reaktívnosť vďaka virtual DOM konceptu
+ dá sa jednoducho integrovať do existujúcich systémov
+ veľmi široká komunita ochotná pomôcť
– kvôli neustálym updatom je problematické udržať krok so zmenami
– vyžaduje znalosť JS a JSX, čo môže byť prekážkou najmä pre začiatočníkov
- React – oficiálna stránka, ktorá vás prevedie inštaláciou. Súčasťou je aj free tutorial
- React VS Code rozšírenia
- React.js cheatsheet
- React kurz – ďalší bezplatný kurz od Yablka na jeho Youtube kanáli ROB WEB
Plusy a mínusy Vue
+ model založený na komponentoch
+ efektívne riešenia pre animácie pomocou využitia knižníc tretích strán
+ podobne ako React a Angular umožňuje rendering na strane servera. Vďaka tomu sú SPA pri indexovaní lepšie vyhodnotené a môžu sa dostať na najvyššie priečky zobrazených výsledkov vo vyhľadávačoch
+ kód z pôvodnej webovej aplikácie je možné vďaka natívnemu vykreslovaniu využiť aj pre tvorbu mobilných aplikácií
+ podobne ako React, využíva virtuálny DOM, čiže načítavajú sa len komponenty, v ktorých nastala zmena, nie celá stránka
– zatiaľ relatívne malá komunita
– veľké množstvo dokumentácií k existujúcim pluginom je stále napísaná primárne v čínštine
- Vue – základná inštalácia a tutoriál pre Vue.js
- Vue VS Code rozšírenia – „must have“ Vue rozšírenia pre VS Code
- Vue Cheatsheet
V Chrome je dobré si nainštalovať rozšírenie Vue.js devtools.
Plusy a mínusy Angular
+ tak ako React a Vue, je založený na komponentoch. V Angulari ide vlastne o triedy napísané v TypeScripte.
+ obrovská komunita používateľov a kilometre dostupnej dokumentácie, v ktorej je ale niekedy problém sa vyznať
+ zdieľanie dát medzi komponentami je založené na “two-way-binding”. Toto skvelo funguje ak sú komponenty v priamom vzťahu parent – child. Synchronizácia dát medzi stavom aplikácie a vykreslením na obrazovke je obojsmerná. V Reacte je jednosmerná. To robí Angular zaujímavým.
– v porovnaní s Reactom je Angular oveľa náročnejší na učenie
– jemne problémové SEO. Treba používať knižnicu Angular Universal
- Angular – oficiálny web, ktorý vás prevedie inštaláciou Angular CLI (Command Line Interface), čo je vývojársky nástroj na vytvorenie pracovného prostredia a počiatočnej web aplikácie, ktorú môžete modifikovať.
- Angular VS Code rozšírenia
- Angular kurz – úplne zadarmo kurz od Yablka. Zoznámi vás s touto technológiou a naučí vás ju používať.
Tento vývojársky nástroj je dostupný aj pre Vue (Vue CLI). Ak ale fičíte na operačnom systéme Windows, je možné, že budete musieť zmeniť bezpečnostné nastavenia v Powershell, aby ste tento nástroj vôbec mohli používať. Powershell je už ale pevnou súčasťou Windows 10.
TypeScript
TypeScript je nadstavbou JavaScriptu, ktorá ho dopĺňa napríklad o statické typovanie, interface a triedy. JavaScript je dynamicky napísaný jazyk, ktorý neumožňuje používať kompilátor. Jednoducho musíte spustiť napísaný kód, aby ste zistili, či funguje. Naproti tomu výhodou písania kódu v TypeScripte je, že včasným upozornením pomáha eliminovať chyby vývoja oveľa skôr, ako sa vykoná kód. V podstate núti vývojárov všetko jasne špecifikovať. Je to v princípe prísnejší spôsob písania kódu.
- TypeScript – oficiálna webstránka ponúkajúca množstvo informácií o TypeScripte
- TypeScript cheatsheet
- IT Academy – TypeScript kurz
Nech sa rozhodnete pre akúkoľvek z týchto technológií, faktom je, že im patrí súčasnosť a minimálne blízka budúcnosť v tvorbe webstránok a webových aplikácií. Sú celosvetovo využívané veľkými firmami, majú za sebou silnú komunitu používateľov a kontribútorov a sú veľmi žiadané na pracovnom trhu. S týmito znalosťami sa určite nestratíte.
