Chceš se stát frontenďákem? Tohle musíš znát
Napadlo tě někdy vytvořit si vlastní webovou stránku nebo se věnovat vývoji webových aplikací? Jsi tu správně!
Napadlo tě někdy, že by bylo super vytvořit si vlastní webovou stránku nebo se věnovat vývoji webových aplikací? Pak jsi na správném místě! V následujících řádcích se dozvíš, co k tomu potřebuješ.
Webová stránka nebo webová aplikace?
V dnešní době se stále více setkáváme s pojmem webová aplikace, i když se jde ve skutečnosti o webové stránky. Pojďme si popsat, jaké jsou mezi nimi rozdíly a jak spolu naopak souvisí.
- Webovou stránkou se myslí dokument, který se ti zobrazí v internetovém prohlížeči po zadání příslušné URL adresy. Tento dokument je nejčastěji vytvořený v jazyce HTML (nebo XHTML) za pomocí kaskádových stylů (CSS) a oživený programovacím jazykem JavaScript.
- Za webovou aplikaci se obecně považuje webová stránka nebo soubor webových stránek s komplexní funkčností. Aplikace se načítá ze serveru a spouští se v prohlížeči bez nutnosti instalace. Příkladem jsou internetové obchody nebo internetové bankovnictví. Server, na kterém jsou uložená data a který také zajišťuje všechny operace (např. přidání zboží do košíku), se označuje jako backend. Uživatelskému rozhraní webové aplikace pak říkáme frontend. Odtud také dostala pracovní pozice název frontendový vývojář nebo lidově frontenďák.
Začínáme s frontendem webových aplikací
Každý správný frontenďák se neobejde bez znalosti HTML a CSS. Pokud s nimi zatím nemáš žádnou zkušenost, zkus si pro začátek vytvořit svoji osobní prezentaci –web, který budeš postupně vylepšovat podle toho, jak se budeš učit nové věci.
Pokud nechceš mít svoje stránky jen statické, ale budeš je chtít rozhýbat, bude pro tebe nutností osvojit si základy JavaScriptu. Ten má poměrně široké využití a setkáš se s ním téměř na každém kroku. Drtivá většina webových aplikací se bez něj ani nespustí a navíc ho lze programovat i na serveru.
Nedílnou součástí práce frontenďáka je také terminál nebo příkazový řádek. Vývojář pomocí nich spouští různé utility, které mu pomáhají při vývoji.
Hodně firem dnes přechází na tzv. Single Page aplikace (dále jen SPA), které vyžadují hlubší znalosti principů webových aplikací, a proto se jim budeme věnovat podrobněji.
Jak se tvoří SPA
Klasická webová aplikace funguje tak, že uživatel zadá URL do prohlížeče, pošle se požadavek na server, odkud se vrátí HTML kód a prohlížeč ho začne vykonávat. Začnou se stahovat připojené kaskádové styly a javascriptové soubory, které se následně spustí a stránku oživí. Uživatel pak vidí působivé fotogalerie, formulářové prvky reagující na chybné vstupy apod.
SPA ale funguje jinak. Změna nastává ve chvíli, kdy prohlížeč začne vykonávat javascriptové soubory. Ty v této chvíli neslouží pouze pro oživení stránky, ale obsahují kompletní kód aplikace (nebo alespoň spustitelnou část).
Aplikace zpravidla nejčastěji startuje kódem, který se nejprve podívá, na jaké URL adrese se právě nacházíš. Podle toho se pak vykreslí příslušný obsah stránky. Pokud jsi např. na stránce https://www.oblibena-nemocnice.cz/oddeleni, pak kód musí umět vykreslit výpis všech oddělení nemocnice.
O práci s URL adresou se stará mechanismus, který se obecně nazývá router. Ten má za úkol sledovat změny v URL adrese a předávat řízení kódu, který se postará o správné načtení dat a jejich vykreslení. Router využívá History API, pomocí kterého může změnit URL adresu v adresním řádku prohlížeče bez nutnosti znovunačtení stránky.
O vykreslování a údržbu obsahu stránky se stará tzv. DOM (Document Object Model), což je objektově orientovaná reprezentace HTML stránky. Prohlížeč si tedy přijatý HTML kód interně uloží do této objektové stromové struktury a programátor pak může s touto strukturou libovolně manipulovat. Může třeba přidávat další HTML elementy, upravovat v nich texty a nebo naopak elementy mazat.
O komunikaci se serverem se stará Web API. Vývojář tak neprogramuje přímo samotný síťový přenos, ale využívá k tomu rozhraní, které poskytuje prohlížeč. Data se tedy mohou stáhnout bez nutnosti znovunačtení stránky. Tato technika se nazývá AJAX.
Ještě je dobré zmínit, že komunikace probíhá pomocí protokolu HTTP, jehož znalost určitě také neuškodí. O interakci s uživatelským rozhraním se starají události:
- Například když uživatel klikne na tlačítko, vznikne na něm událost „click“. Vývojář pak může na tuto událost zaregistrovat posluchač a dokáže tím řídit běh aplikace.
- Když uživatel klikne na odkaz, je potřeba na tuto událost reagovat a zastavit výchozí chování prohlížeče, což je vyslání nového požadavku na server, který způsobí překreslení celé stránky. U SPA totiž uživatel zůstává stále na jedné a té samé stránce. Vývojář se tedy musí o celou mašinérii postarat sám. A to znamená uklidit po sobě, změnit URL, načíst nová data ze serveru, vykreslit je a navěsit nové posluchače události.
Jak je vidět, k vytvoření takové SPA je zapotřebí velkého úsilí. A to zde nebylo zmíněno zdaleka vše, s čím se frontenďák musí vypořádat. Naštěstí ale existuje hromada pomocníků, které mohou práci zjednodušit a odstínit vývojáře od rutinních věcí.
Knihovna vs. Framework
Ještě předtím, než se podíváme na jednotlivé pomocníky, vysvětlíme si rozdíl mezi knihovnou a frameworkem.
- Knihovna je ucelený kód, který se zaměřuje na řešení konkrétního problému. Takovým problémem může být například vykreslování uživatelského rozhraní nebo výše zmíněný router. Pokud se tedy vývojář rozhodne používat jen knihovny, pak musí počítat s tím, že na řešení každého problému je potřeba najít vhodnou knihovnu nebo si musí řešení naprogramovat sám. Na druhou stranu to dává vývojáři větší volnost a kontrolu nad kódem aplikace.
- Framework poskytuje kompletní řešení pro vývoj aplikace, takže je vývojář schopný ji vytvořit, aniž by bylo potřeba dohledávat další knihovny. Frameworky často nabízí kompletní zázemí pro vývoj (kompilaci, sledování změn v kódu, testování, atd…), což může usnadnit práci nejen začátečníkům. Nevýhodou je, že pokud se vývojáři nelíbí chování některé části frameworku, většinou ji nemá možnost upravit a musí se tomu přizpůsobit.
React
Asi nejvíce skloňovaná knihovna dnešní doby. Vytvořená společností Facebook (Meta), primárně se stará o vykreslování uživatelského rozhraní, tedy o práci s DOMem a událostmi.
Komunita kolem Reactu je dostatečně velká a za dobu jeho existence vzniklo mnoho podpůrných knihoven, které se postarají o načítání dat nebo práci s URL.
Angular
Angular je asi nejznámějším zástupce skupiny frameworků. Jeho existence sahá až do roku 2010, kdy začala vznikat první verze, tehdy známá jako AngularJS.
Angular nabízí vývojáři vše potřebné k tomu, aby s minimálním úsilí mohl vytvořit skvělou aplikaci. Je stále aktivně vyvíjný a těší se poměrně velké popularitě. Je vhodný spíš pro větší (korporátní) aplikace a administrační systémy. Ale pohodlně v něm případně vytvoříš i svoje osobní webové stránky.
Vue.js, Svelte a další
Z dalších hráčů na poli knihoven a frameworků stojí za zmínku určitě Vue.js, který konkuruje Angularu.Další je pak Svelte, které zase můžeme označit za konkurenta Reactu.
Řešení je opravdu spousta. Ať už se rozhodneš pro jakékoliv, je dobré sledovat, jestli u něj probíhá aktivní vývoj a jak velkou komunitu čítá. Opuštěná řešení nikdo neudržuje a oprava chyb nebo přidávání nových vlastností je tak v nedohlednu.
Určitě neuděláš chybu, když půjdeš do některého z velkých hráčů. Například u nás v LOGEXu jsme si vybrali framework Angular a máme na něm postavené veškeré naše aplikace. Tímto se více můžeme soustředit na vývoj produktu a uživatelský zážitek a rutinní věci
přenecháváme frameworku.
Závěrem
Teď už alespoň trochu víš, jaké základní věci je potřeba umět, pokud se chceš věnovat vývoji frontendu webových aplikací.
Pokud tě tohle téma zaujalo, baví a hledáš další možnosti rozvoje, můžeš se ozvat nám do LOGEXu. Stále hledáme nové talenty, které rádi zaučíme, ale i zkušené vývojáře, kteří na oplátku zase něco naučí nás. 🙂
Tento článek pro tebe napsali profíci z firmy
LOGEX je evropským leaderem ve zpracování zdravotnických dat a jejich softwarové řešení nyní využívá více než 90 % holandských nemocnic. Mrkni na jejich web.
