Slovník pojmů

Frontend

Frontend převádí data a akce systému do srozumitelného rozhraní. Uživatel však ovládá své zařízení, proto frontend nemůže být bezpečnostní hranicí aplikace.

Stručná definice

Rozhraní, se kterým člověk přímo pracuje.

Frontend zobrazuje data, přijímá vstupy a komunikuje s backendem. Může být klasicky vykreslený na serveru jako HTML, doplněný několika interakcemi v JavaScriptu nebo vytvořený jako samostatná klientská aplikace nad API.

Frontend není synonymum pro design ani pro konkrétní framework. Vedle vizuální podoby řeší přístupnost, responzivitu, stav rozhraní, načítání, validaci pro pohodlí uživatele a srozumitelné zobrazení chyb.

Jaký problém řeší

Zpřístupňuje funkce aplikace člověku

Frontend překládá technický stav systému do ovládání, které funguje na různých zařízeních a i při méně ideálním připojení.

zobrazení katalogu, objednávek, skladových stavů a detailů v administraci
formuláře, filtrování, navigace, hledání a potvrzení uživatelských akcí
přístupnost pro klávesnici, čtečky a různé velikosti obrazovek
komunikace s API nebo odeslání klasického HTML formuláře
zobrazení probíhající operace, validačních chyb a dočasné nedostupnosti služby

Praktický příklad

Administrace načte a změní stav objednávky

Frontend si načte seznam objednávek, umožní filtrování a po kliknutí na akci odešle požadavek do API. Během čekání zabrání dvojitému kliknutí a zobrazuje, že se změna zpracovává.

Pokud backend vrátí 403, frontend nevymýšlí náhradní cestu, ale oznámí nedostatečné oprávnění. Při 409 může nabídnout obnovu dat, protože objednávku mezitím změnil jiný uživatel. Server přitom stále provádí finální validaci i autorizaci.

Jak funguje

Od akce uživatele k výsledku v rozhraní

Každý krok má svoji roli: rychlá zpětná vazba na klientu nenahrazuje serverové rozhodnutí.

Uživatel provede akci Vyplní formulář, otevře detail, změní filtr nebo potvrdí změnu objednávky.
Frontend ověří základní vstup Může ukázat chybějící hodnotu či formát dříve, než uživatel čeká na síťový request.
Klient odešle request Formulář nebo JavaScript použije HTTP a přenese jen data potřebná pro danou operaci.
Backend rozhodne Server znovu ověří vstup, identitu a oprávnění, potom provede business pravidla.
Frontend zobrazí výsledek Aktualizuje stav, vysvětlí chybu nebo nabídne další krok bez předstírání, že změna uspěla.

Důležité části

Vykreslování, stav a přístupnost.

Technické řešení se může lišit, základní odpovědnosti frontendu zůstávají.

HTML, CSS a JavaScript

HTML nese strukturu a význam, CSS vzhled a JavaScript interakce. Každá vrstva může pomáhat přístupnosti i odolnosti.

Server-side a client-side rendering

HTML může sestavit server nebo prohlížeč z dat API. Ani jeden přístup není automaticky lepší; záleží na produktu a provozu.

Stav rozhraní

Otevřený filtr, rozpracovaný formulář či načítání jsou lokální stav UI. Nejsou samy o sobě zdrojem pravdy pro objednávku.

Přístupnost a responzivita

Sémantické prvky, focus, ovládání klávesnicí a čitelné chyby patří do běžného návrhu, ne až do dodatečné opravy.

Bezpečné vykreslení

Uživatelský obsah se escapuje podle kontextu. Raw HTML, URL či JavaScriptové řetězce vyžadují jiný bezpečný postup.

Vztah k podobným pojmům

Frontend není design ani bezpečnostní brána.

Uživatelské rozhraní spolupracuje s dalšími částmi, ale jejich odpovědnosti nepřebírá.

Backend: Rozhoduje o autentizaci, autorizaci a platnosti business operace; frontend pouze zobrazuje jeho výsledek.
API: API je kontrakt pro programovou komunikaci. Frontend může být jeho klientem, ale API slouží i mobilním a integračním klientům.
Webová aplikace: Zahrnuje frontend, backend, data a infrastrukturu. Rozhraní v prohlížeči není celý systém.
Design: Vizuální a UX návrh ovlivňuje frontend, ale implementace navíc řeší technickou funkčnost, chování a dostupnost.

Výhody a omezení

Pohodlí uživatele není náhradou kontroly serveru.

Přínosy

rychlá a srozumitelná zpětná vazba uživateli
rozhraní přizpůsobené různým zařízením a rolím
oddělení prezentace od aplikačních pravidel
možnost využít stejný backend pro web, mobilní aplikaci i integrace

Časté chyby

považovat skryté tlačítko za autorizaci
spoléhat na klientskou validaci jako na ochranu dat
neescapovat obsah podle kontextu a otevřít XSS
vytvořit složitou SPA pro rozhraní, které by bylo srozumitelnější jako server-renderovaná stránka

Kdy dává smysl

Každá aplikace potřebuje rozhraní, míra klientské složitosti je volba.

Jednoduchý portál může využít hlavně serverově vykreslené HTML a několik formulářů. Administrace s častým filtrováním, dlouhými operacemi nebo více zdroji dat může potřebovat bohatší klientský stav a API komunikaci.

Volba Reactu, Next.js nebo jiné technologie není definicí frontendu. Důležitější je srozumitelné rozhraní, přístupnost, správné chování při chybě a jasná hranice k backendu.

Na co myslet

Frontend musí počítat s uživatelem i nespolehlivou sítí.

Kvalitní rozhraní neskrývá chybu, ale vysvětluje stav a nepředstírá serverový úspěch.

používat sémantické HTML, focus stavy a klávesovou navigaci
zobrazit načítání, chyby a konflikt změny srozumitelně
nikdy neukládat secrets ani rozhodnutí o oprávnění pouze do klienta
escapovat a podle potřeby sanitizovat nedůvěryhodný obsah
testovat rozhraní na mobilu, s pomalou sítí a bez závislosti na náhodném stavu

Časté otázky

Co se o frontendu často plete

Je frontend vždy spuštěný v prohlížeči?

U webové aplikace typicky ano. Obecně ale frontend znamená uživatelskou část systému, takže existuje i v mobilní nebo desktopové aplikaci.

Je serverem vyrenderované HTML backend?

Vzniká na serveru, ale slouží jako uživatelské rozhraní, a proto patří k frontendu. Implementační hranice nemusí být fyzicky oddělená.

Je React frontend?

React je knihovna pro tvorbu uživatelských rozhraní. Frontend může být vytvořen i bez něj nebo bez samostatné klientské aplikace.

Může frontend chránit data?

Může zlepšit použitelnost a omezit nechtěné akce, ale bezpečnostní a businessová pravidla musí kontrolovat backend.

Jak se na aplikace dívám v praxi

Backendové systémy navrhuji s ohledem na rozhraní, které je používá.

U e-commerce a interních aplikací propojuji backend, API a datové toky tak, aby frontend mohl dávat uživateli přesný a srozumitelný výsledek.

Jak pracuji s e-commerce aplikacemi Nezávazně probrat projekt