Kategórie
Technológie Vzdelávanie

Svet potrebuje tvorcov webov. Týmto technológiam patrí blízka budúcnosť

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 %. 

Zdroj: Profesia, spol. s r.o.

Ak sa pozrieme len na IT pracovné ponuky zverejnené na Profesii, tak je to už 9 %.

Zdroj: Profesia, spol. s r.o.

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.

Zdroj: Profesia, spol. s r.o.

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

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

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. 

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.

Autor: Vlado Zaic

Kontenťák, ktorý až po rokoch zistil, že má celkom blízko k marketingu. Päť rokov zodpovedný za obsahovú časť najväčšieho kariérneho podujatia na Slovensku a v Čechách. Citát Wayna Gretzkeho "You miss 100% of the shots you don't take" bol preňho life-changing...

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená.