Keď sa chce začiatočník naučiť kódiť, je zvyčajne zmätený z pojmov ako “klient”, “server”, “back-end”, “front-end”, “full-stack”, “layout” atď. A ešte viac je zmätený z toľkých technológií, ktoré sa na webe používajú – JavaScript, Java, PHP, Ruby, Bootstrap, jQuery, Angular, React, Vue.js, Node.js, Meteor.js,… a ani len netuší čo sa má skôr naučiť. Technológií je naozaj veľmi veľa a mnohé majú veľmi podobné využitie. Poďme sa na ne pozrieť.
Čo je front-end?
Na začiatok je dobré vysvetliť si základné pojmy. Front-end, už ako názov napovedá, je časť aplikácie, ktorá je v popredí, teda vizuálna časť v prehliadači. To, čo vidíme v prehliadači, je front-end – rôzne tlačidlá, obrázky, formuláre, text, atď. Front-end časť aplikácie beží na “klientovi”. Klient je vlastne prehliadač (Internet explorer, Chrome, Firefox, Safari…). Webová aplikácia sa bežne skladá z front-end časti a back-end časti, o ktorej si povieme neskôr v tomto článku.
Základnú časť front-end kódu tvorí HTML, CSS a JavaScript. Ak by si mal (front-end) webový vývojár vystačiť len s HTML, CSS a JavaScriptom, musel by napísať veľmi veľa kódu a zabralo by mu to veľmi veľa času. Funkcionalita v rôznych aplikáciach je veľmi podobná a tak vznikli akési nadstavby zvané knižnice a frameworky. Sú to nástroje, ktoré majú uľahčiť a urýchliť vývojárom prácu. Jedna z nevýhod frameworkov a knižníc je, že zvyčajne zaberie dosť času naučiť sa ich. No keď ich už vývojár ovláda, píše aplikácie oveľa rýchlejšie ako keby mal používať len HTML, CSS a JavaScript. To isté platí aj pre back-end. Je to ako keď sa učíte bicyklovať, alebo šoférovať. Zaberie to nejaký čas, ale potom sa môžete presúvať oveľa rýchlejšie ako pešo.
Najpopulárnejšie (najpoužívanejšie) front-end nástroje
Angular, React, Vue.js, Ember, Bootstrap, Semantic UI, Foundation, LESS, SASS, webpack… to sú momentálne (rok 2017) najpopulárnejšie nástroje pre tvorbu front-end časti aplikácií. Poďme sa im pozrieť na zúbok.
JavaScript frameworky
Angular, React (čítaj “reakt”), Vue.js (čítaj “vjúdžejes”), Ember sú JavaScriptové frameworky určené na komplexný vývoj (front-end) aplikácií a vývojárovi poskytujú veľmi podobné možnosti – správa dát v klientovi, spracovanie udalostí (eventov) ako kliknutie na tlačidlo, odoslanie formulára atď. Tieto frameworky sú si veľmi podobné a keď sa vývojár naučí jeden framework, druhý sa už naučí rýchlejšie.
Za spomenutie stojí tiež knižnica jQuery (čítaj “džejquery”), ktorá sa skôr používa na jednoduché weby. Na väčšie aplikácie jQuery nie je vhodné. JQuery patrilo pred pár rokmi medzi najpopulárnejšie JavaScriptové nástroje, ale s vzostupom vyšších štandardov webového vývoja vznikali novšie a vhodnejšie nástroje ako vyššie spomenuté Angular, React, Vue.js a Ember.
UI frameworky
UI (User Interface) frameworky obsahujú už hotové, krásne nadizajnované webové časti ako sú formuláre, tlačidlá, menu, slidery, tabuľky atď.
Napríklad Bootstrap komponenty vyzerajú takto:
Vývojár tak nemusí písať toľko CSS kódu, aby pekne nadizajnoval aplikáciu. V najlepšom prípade nemusí písať žiadne CSS a rovno použiť hotové UI komponenty.
Vznikli tiež projekty ako jQueryUI a jQuery mobile, ktoré ale postupne nahradili UI frameworky ako Bootstrap, Semantic UI, Foundation a pre mobilné aplikácie sa dnes používa hlavne React Native, Ionic a Onsen UI.
CSS preprocesory
CSS preprocesor má za úlohu uľahčiť písanie CSS. Každý CSS kodér sa už stretol s problémom opakovania toho istého kódu CSS. Napríklad rovnakej farby, alebo iných vlastností. A keď chcel tieto vlastnosti zmeniť, musel ich nájsť všade v CSS a prepísať ich. CSS preprocesory riešia tento a mnohé ďalšie problémy, ktoré vznikajú pri písaní CSS.
Kód v CSS:
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
Kód v SASS:
$sectionAnchorColor: #0982C1;
section {
margin: 10px;
nav {
height: 25px;
a {
color: $sectionAnchorColor;
&:hover {
text-decoration: underline;
}
}
}
}
Menšie weby, či aplikácie si vystačia s CSS, ale pre väčšie projekty je vhodné použiť niektorý z CSS preprocesorov. Najpoužívanejšie sú SASS, LESS a Stylus.
Ostatné preprocesory
Existujú aj HTML a JavaScript preprocesory, ktoré napĺňajú potreby programátora. Napríklad niektoré redukujú údery klávesnice na minimum a vývojár tak môže písať kód oveľa rýchlejšie ako keby písal čisté HTML, alebo JavaScript. Iné zase pridávajú chýbajúcu funkcionalitu daného jazyka – napríklad TypeScript pridáva nutnosť typovania premenných pre JavaScript. Pre HTML existujú preprocesory Jade, Haml, Slim. Pre JavaScript je to CoffeeScript, LiveScript, TypeScript a Babel.
Potreba JavaScriptových preprocesorov je každým rokom menšia, pretože nový štandard JavaScriptu ECMAScript napĺňa stále viac potreby programátorov.
Ďalšie nástroje
Vývoj aplikácií nie je len o písaní kódu, ale aj napríklad o optimalizácii kódu, testovaní atď. Existujú ďalšie nástroje ako Grunt, Gulp, Browserify, Webpack, Brunch, Npm, ktoré vývojárom uľahčujú minifikáciu kódu, kompiláciu preprocesorov, sťahovanie rôznych knižníc atď. Väčšina frameworkov využíva tieto nástroje a všetko funguje krásne automaticky. Ak by ste chceli použiť napríklad Grunt, Gulp, alebo Webpack samostatne, potrebovali by ste preštudovať dokumentáciu a riadne sa “pohrať” s konfiguráciou.
Čo je back-end?
Back-end je časť aplikácie, ktorá je “tam vzadu” na serveri. Server je vzdialený počítač, na ktorom beží back-end časť aplikácie. Server posiela klientovi potrebné informácie pre zobrazenie aplikácie – obrázky, HTML, CSS, JavaScript, dáta z databázy atď. Klient potom na základe týchto informácií zobrazuje aplikáciu.
Jednou z hlavných úloh back-endu je spracovanie dát – vytváranie (create), menenie (update) a mazanie (delete) dát. Back-end vývojár veľmi často komunikuje s databázou – MySQL, MongoDB, MariaDB,…
Na serveri sa používajú jazyky ako PHP, Ruby, Java, Python,… a tiež JavaScript (Node.js)!
Od čias Node.js je možné použiť aj JavaScript na serveri, čo je pre JavaScript vývojárov niečo úžasné. Nemusia sa učiť iný jazyk, aby mohli písať back-end časť aplikácie. Obrovská výhoda je to pre full-stack vývojárov, ktorí sa venujú aj front-endu aj back-endu. Celú aplikáciu môžu napísať v jednom jazyku a nelámať si hlavu nad odlišnou syntaxou dvoch, alebo viacerých jazykov.
Back-end frameworky
Pre každý serverový jazyk existuje niekoľko frameworkov. Ak sa chce niekto stať back-end vývojárom, mal by ovládať aspoň jeden serverový jazyk a jeho framework plus niektorú z databáz. Nasleduje stručný prehľad back-end jazykov a ich frameworkov zoradených plus mínus podľa popularity:
Java frameworky: Spring, JSF, Struts, Hibernate, Play, Spark, Vaadin, Grails, Netty,…
PHP frameworky: Laravel, Symfony, CodeIgniter, Yii 2, Phalcon, CakePHP, Nette (Český framework), Zend,…
Ruby frameworky: Ruby on Rails, Sinatra, Pakyow, Padrino, Scorched, NYNY,…
Python frameworky: Django, Flask, Web2py, TurboGears, Pyramid, Cubic web,…
JavaScript frameworky: Node.js, Express.js, Meteor.js, Sails.js,…
Za spomenutie tiež stojí framework (alebo skôr platforma) .NET od Microsoftu.
Editory
Dobrý programátor potrebuje dobrý editor, v ktorom bude písať kód. Je možné vybrať si z nasledujúcich: Atom, Brackets, Webstorm, Sublime Text, Visual Studio, Notepad++,…
Git
Git je nástroj na verzovanie a zdieľanie kódu. Programátori ho využívajú na zdieľanie kódu s ostatnými programátormi, alebo len na verzovanie aplikácie.
Na stránke www.try.github.io je pekný tutoriál, kde sa môžete git krok za krokom naučiť.
Najznámejšie služby s gitom sú Github (www.github.com) a Bitbucket (www.bitbucket.com). Na oboch sú verejné repozitáre zdarma. Bitbucket je možné mať privátny repozitár zadarmo. Ak nevieš čo je repozitár, nezúfaj, naučíš sa.
Zhrnutie
Ako vidíte, technológií je naozaj veľmi veľa a naučiť sa všetky by zabralo veľmi dlhú dobu. A to ešte nie sú ani z ďaleka všetky technológie. Väčšina vývojárov ovláda len zopár z nich, ktoré používajú, ale majú aspoň ako taký prehľad aj o iných technológiách. Java vývojár vie, že existuje JavaScript a JavaScript vývojár vie, že existuje Java, PHP, Python atď. Mimochodom Java nie je JavaScript. Veľa ľudí si ich pletie kvoli podobnému názvu, ale sú to dva úplne odlišné programovacie jazyky.
Ako a kde sa učiť?
-
- Na webe je (takmer) všetko. Stačí zadať kľúčové slová do vyhľadávača a prejsť si stránky, ktoré nájde. Pre začiatok je dobré naučiť sa základy HTML, CSS a trochu aj JavaScript. Potom skúsiť nejaký serverový jazyk, zvyčajne PHP a databázu, zvyčajne MySQL. Tak si žiak oťuká čo je klient, čo je server a čo je databáza. Ďalšia vec, ktorú treba vedieť, je OOP – Objektovo Orientované Programovanie. Toto je učivo na niekoľko týždňov, až mesiacov. Programátor sa síce zaobíde bez OOP, ale keď sa bude chcieť naučiť nejaký framework, ktorý OOP využíva, nebude tomu veľmi rozumieť. Chápanie princípov OOP programátorovi veľmi uľahčí ďalšie vzdelávanie. Keď už vieme HTML, CSS, JavaScript, PHP, MySQL a chápeme OOP, môžeme sa pustiť do učenia nejakého frameworku. Ak nechápeme význam frameworku, môžeme si skúsiť napísať nejakú aplikáciu v čistom PHP, alebo JavaScripte a potom pochopíme… s písaním prvej aplikácie prichádza pravá zábava – kódime prihlasovanie a registráciu užívateľov, pridávame, zobrazujeme a editujeme prvé dáta z databázy,… jednoducho úžasné. Konečne sa niečo deje! Konečne niečo reálne funguje. Ale pozor… narážame na to, že v našej aplikácii sú možno bezpečnostné diery, ktoré treba zaplátať. Bezpečnosť aplikácií je ďalšia kapitola, ktorú si treba prejsť: https://www.zdrojak.cz/clanky/prehled-utoku-na-webove-aplikace/
- Ak už vieme nakódiť menšiu aplikáciu sami, sme na dobrej ceste. Zo začiatku sa venujeme front-endu aj back-endu, ale časom sa ukáže, k čomu inklinujeme viac a tomu sa budeme venovať. A možno ostaneme full-stack vývojármi…
- Je veľa programátorov samoukov, no je dobré mať kamoša, alebo aspoň známeho, ktorý sa vyzná v tom, čo sa chceme naučiť. S jeho pomocou sa to naučíme oveľa rýchlejšie ako by sme sa to učili sami z kníh, alebo iných zdrojov. Ak takého kamoša nemáme, neostáva nám nič iné, len ísť cestou samovzdelávania a učiť sa z rôznych zdrojov, ktoré nájdeme. Je to síce pomalšia a náročnejšia cesta, ale stále lepšia, než sa neučiť vôbec.
- V zahraničí fungujú platformy, kde žiaci môžu požiadať o pomoc mentorov z celého sveta. Napríklad codementor.io
- V posledných rokoch sú veľmi populárne video kurzy a live streamy, vďaka ktorým žiak môže vidieť ako to všetko funguje a môže si to tiež sám vyskúšať (www.liveedu.tv).
- Drvivá väčšina materiálov je v angličtine. Ak náhodou neviete anglicky, naučíte sa popri programovaní, žiadny strach. Dôležitá je túžba naučiť sa programovať. Môžete tiež mrknúť na slovenské kurzy od Learn2code (www.learn2code.sk) a tiež Webrebel (www.webrebel.sk).
- Ak chcete mentora, ktorý vám poradí v začiatkoch, neváhajte ma kontaktovať (kontakt nájdete tu: www.hromnik.com). Ak to bude v mojich silách, rád pomôžem. Ak máte v hlave nezodpovedané otázky, tiež sa mi môžete ozvať.
Prajem veľa šťastia.
Happy coding!