Termíny
,

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

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:

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.

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.

Související články

Přidej se k 12 000+ odběratelům

Tvůj e-mail za zprávu o termínech, pracovních nabídkách nebo novinkách v ENGETU. Pojď do toho!