Přemýšleli jste někdy, že byste si chtěli vytvořit vlastní webovou stránku nebo se věnovat vývoji webových aplikací? Pak jste ovšem na správném místě a následující řádky jsou určeny přímo vám!
Autor: Marek Fojtl
Webová stránka nebo webová aplikace?
V dnešní době se stále více setkáváme s pojmem webová aplikace, ačkoliv se ve skutečnosti jedná 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 vám 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áte žádnou zkušenost, zkuste si pro začátek vytvořit svoji osobní prezentaci, kterou pak budete postupně vylepšovat podle toho, jak se budete učit nové věci.
Pokud nechcete mít svoje stránky jen statické, ale chcete je i “oživit”, bude nutné osvojit si základy JavaScriptu. Ten má poměrně široké využití a setkáte se s ním téměř na každém kroku. Drtivá většina webových aplikací se dnes 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á řádka. 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íme. Podle toho se pak vykreslí příslušný obsah stránky. Pokud se nacházíme např. na stránce https://www.oblibena-nemocnice.cz/oddeleni, pak náš 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 myší 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 množství úsilí. A to zde nebylo zmíněno zdaleka vše, s čím se frontenďák musí vypořádat. Naštěstí tu 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 naproti tomu poskytuje kompletní řešení pro vývoj aplikace, takže je vývojář schopen 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…), čímž mohou 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á firmou Facebook, 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íjen a těší se poměrně velké popularitě. Je vhodný spíše pro větší (korporátní) aplikace a administrační systémy. Ale pohodlně v něm vytvoříte i osobní 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 nebo Svelte, které lze označit spíše jako konkurenta Reactu.
Řešení je opravdu spousta. Ať už se rozhodnete 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í již nikdo neudržuje a oprava chyb nebo přidávání nových vlastností je tak v nedohlednu.
Určitě neuděláte chybu, když se svěříte do rukou jednoho 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.
Tak ať se vám vaše první SPA vydaří. ;-)
