Frontendová architektura webu: komponenty a správa stavu

Frontend a HTML/CSS
P. Varga
Frontendová architektura webu: Komponenty a state management

Co je frontendová architektura

Frontendová architektura definuje způsob, jakým je webová aplikace strukturována, sestavována, nasazována a provozována v prohlížeči a v okrajové (edge) či serverové vrstvě. Cílem je udržitelnost kódu, výkon, bezpečnost, přístupnost a rychlý vývoj. Architektura stanovuje moduly, hranice odpovědností, datové toky, kontrakty mezi vrstvami a provozní standardy (monitoring, nasazování, testy).

Rendrovací strategie: CSR, SSR, SSG, ISR a ostrovy

  • CSR (Client-Side Rendering): HTML kostra a JS, který po načtení přebírá řízení. Výhody: bohatá interaktivita; nevýhody: delší time-to-interactive a výzvy v oblasti SEO.
  • SSR (Server-Side Rendering): HTML generované na serveru pro rychlé první vykreslení (first paint), po kterém následuje hydratace v prohlížeči. Vhodné pro obsah a SEO.
  • SSG (Static Site Generation): předgenerování HTML v době sestavení. Extrémní výkon a nízké náklady, ale při změně obsahu je potřeba nové sestavení.
  • ISR/DSG: inkrementální statické generování – stránka se pravidelně revaliduje na pozadí a servíruje se její statická verze.
  • Islands architecture: server vygeneruje HTML a ostrovy interaktivity (komponenty) se hydratují selektivně, což minimalizuje množství JS.

Směrování a navigace

Router rozděluje aplikaci na stránky a stavy. Směrování založené na souborech zjednodušuje strukturu, vnořené směrování optimalizuje sdílená rozvržení. Důležité jsou preload odkazů, prefetch dat pro další kroky a řízení obnovení pozice posunu (scroll restoration).

Správa stavu: lokální, globální a serverový

  • Lokální stav (UI): formuláře, modální okna; spravuje se v rámci komponent (např. React state).
  • Globální stav: informace sdílené napříč aplikací (uživatel, motiv, jazyk); využití knihoven (Redux, Zustand, XState) s jasně vymezenými hranicemi.
  • Serverový stav: data z API s cache a revalidací (SWR, React Query, TanStack Query). Liší se od globálního stavu – řídí se principem stale-while-revalidate, invalidací a synchronizací se serverem.

Datová vrstva a kontrakty API

Frontend komunikuje s backendem přes REST, GraphQL nebo tRPC. Mezi standardy patří typová bezpečnost (TypeScript, OpenAPI/GraphQL schema), hranice pro zachytávání chyb (error boundary), opakování požadavků s prodlevou (retry/backoff), circuit breaker a observabilita (trace ID v hlavičkách). U GraphQL jsou klíčové pravidla cachování a normalizace dat.

Autentizace a autorizace

  • OAuth 2.1 / OIDC s PKCE pro veřejné klienty; refresh tokeny bezpečně uložené v httpOnly cookie.
  • RBAC/ABAC ve vrstvě UI i API; vykreslování komponent podle oprávnění.
  • Ochrana proti CSRF (same-site cookies, tokeny) a XSS (CSP, escapování, Trusted Types).

Design systém a knihovny UI

Design systém definuje tokeny (barvy, typografii, rozestupy), komponenty a návrhové vzory. Komponenty by měly být navrhovány s ohledem na přístupnost od samého začátku (a11y-first), s navigací pomocí klávesnice a rolemi ARIA. Distribuce probíhá formou balíčku v monorepu (npm, pnpm) s verzováním (SemVer), dokumentací (Storybook) a vizuální regresí (Chromatic/regresní sada).

Výkon a rozpočty výkonu (performance budgets)

  • Code splitting a lazy loading – načítejte jen to, co je potřeba pro aktuální obrazovku.
  • Minimalizace hydratace – ostrovy, částečná nebo streamovaná hydratace, serverové akce.
  • Pipeline pro zpracování zdrojů (asset pipeline) – optimalizace obrázků (AVIF/WebP), responzivní obrázky, podmnožiny fontů, preconnect/prefetch.
  • Kritické CSS a HTTP/2 push (případně 103 Early Hints); důraz na First Contentful Paint, Largest Contentful Paint, CLS a INP.

Nástroje pro sestavení a bundlery

Moderní stacky staví na Vite (vývojový server + bundlování pomocí Rollup), esbuild a SWC pro transpiling a minifikaci. Konfigurace zahrnuje aliasy, hashování modulů, tree-shaking, odstraňování nepoužívaného kódu (dead code elimination) a externí závislosti pro knihovny z CDN. Sledujte vizualizaci balíčků a omezujte vendor lock-in.

Modulární frontend a microfrontends

Microfrontends umožňují nezávisle vyvíjet a nasazovat části UI. Varianty: Module Federation (sdílení modulů za běhu), integrace na úrovni tras (konzistentní shell) nebo iframes (silnější izolace). Klíčové je sdílení design systému, správa verzí a stabilní kontrakty událostí.

Vrstva edge a CDN

CDN poskytuje globální cache, optimalizaci obrázků na okraji sítě a edge middleware (A/B testy, personalizace, geografické směrování). HTTP cache (Cache-Control, ETag, stale-while-revalidate) snižuje latenci a náklady. U SSR/ISR je nutné nastavit revalidaci a surrogate keys pro invalidaci.

Stav mimo hlavní vlákno: Web Workers a Service Worker

  • Web Workers: výpočty mimo vlákno UI (parsery, transformace dat, inference ML).
  • Service Worker: offline cache, PWA, push notifikace, synchronizace na pozadí (background sync). Strategie cachování: cache-first, network-first, stale-while-revalidate.

Ukládání dat v prohlížeči

Vybírejte podle citlivosti a velikosti dat: Session/Local Storage (nekritická data), IndexedDB (větší strukturovaná data), Cookies (pouze nezbytné, ideálně httpOnly na serveru). V případě potřeby implementujte expiraci, migraci schémat a šifrování na aplikační vrstvě.

Přístupnost (a11y) a internacionalizace (i18n)

  • a11y: sémantické HTML, ARIA pouze tam, kde je nezbytné, kontrast, focus ring, srozumitelně zobrazené chybové stavy, odkazy pro přeskočení obsahu a testování pomocí čteček obrazovky.
  • i18n: formát ICU, l10n pro lokální formáty, lazy loading překladů, podpora RTL a lingvistické QA.

Bezpečnost frontendu

  • CSP (default-src, script-src s nonce nebo hashem), Trusted Types jako ochrana proti DOM XSS.
  • Sandboxing skriptů třetích stran, Subresource Integrity a omezení kanálů postMessage.
  • Bezpečná manipulace s URL, sanitizace vstupů, omezení použití eval/Function, přísné typování odpovědí API.

Testování a kvalita

  • Jednotkové a komponentové testy (Vitest/Jest, Testing Library) – ověřování kontraktů a chování komponent.
  • Integrační a e2e testy (Playwright/Cypress) – uživatelské scénáře, chování sítě, testy přístupnosti (axe).
  • Vizuální regresní testy – snímky UI prostřednictvím Storybooku a běhů v CI.

Observabilita: telemetrie, logy a uživatelské metriky

Implementujte RUM (Real User Monitoring), sběr Web Vitals (LCP, CLS, INP), trasování (W3C Trace Context), aplikační logy (s ohledem na ochranu soukromí) a chybová hlášení s mapami zdrojových kódů (source maps). Propojujte je s backendem pomocí trace ID.

CI/CD a správa vydávání verzí

  • CI: lintování (ESLint), kontrola typů (tsc), testy a sestavování artefaktů.
  • CD: strategie blue-green a canary, feature flagy, strategie návratu k předchozí verzi; artefakty publikované do CDN s neměnnými cestami obsahujícími hash.
  • Správa prostředí: šablony .env, bezpečné secrets, runtime konfigurace vložená na okraji sítě (bez nutnosti nového sestavení pro každé prostředí).

Monorepo, verze a správa závislostí

Nástroje pro monorepo (pnpm workspaces, Nx, Turborepo) usnadňují sdílení kódu a uplatňování konzistentních standardů. Dodržujte SemVer, changesety, automatizovaná vydání a bezpečnostní skenování (Dependabot). Modulární architektura brání vzniku cyklických závislostí.

SEO a standardy pro obsah

  • Meta tagy a strukturovaná data (JSON-LD), správný atribut lang, kanonické odkazy.
  • Open Graph a Twitter Cards pro sdílení.
  • Rychlost načítání, stabilita rozvržení a přístupnost jako signály kvality.

Architektonické vzory komponent

  • Container/Presenter: oddělení logiky (načítání dat, stav) od UI.
  • Render props a hooks pro opakovaně použitelné chování.
  • Doménově orientované UI: mapování doménových entit na komponenty a pohledy s jasně definovaným API.

Chybové stavy, načítání a kostry

Každý datový dotaz má tři stavy: loading, error, success. Používejte kostry UI (skeleton UI), optimistické aktualizace (optimistic updates) a toast oznámení pro zpětnou vazbu. Error boundaries zabraňují pádu celé aplikace, opakování požadavků s exponenciálním prodlužováním prodlevy zvyšuje odolnost.

Správa konfigurace a feature flagy

Funkce zapínejte prostřednictvím feature flags (uživatelské segmenty, A/B testy). Konfigurace musí být dostupná za běhu (runtime) (JSON endpoint, edge config), aby nebylo nutné nové sestavení. Změny zaznamenávejte pro účely auditu a reprodukovatelnosti incidentů.

Typová bezpečnost a kontrakty

TypeScript je základem: přísný režim, generika pro klienty API, Zod nebo podobné nástroje pro validaci za běhu. Generujte typy ze schémat OpenAPI/GraphQL, aby se minimalizovaly chyby na rozhraní mezi frontendem a backendem.

Doménové oddělení a hranice modulů

Rozdělte aplikaci na doménové balíčky (např. catalog, checkout, account) a sdílené vrstvy (ui, design-tokens, utils, api). Předejdete tak křehkým importům a umožníte nezávislý vývoj.

Doručování médií a optimalizace obrázků

Využívejte responzivní obrázky (srcset, sizes), lazy loading, priority hints a moderní formáty (AVIF/WebP). Zvažte CDN pro obrázky s transformacemi za běhu a podepsanými URL pro řízení přístupu.

Bezstavové UI a synchronizace

Upřednostňujte idempotentní akce a deterministické stavy. Při práci s více kartami udržujte vysílání zpráv mezi kartami (BroadcastChannel), řešte konflikty (CRDT pro offline spolupráci) a používejte časové značky pro zajištění konzistence.

Dokumentace a governance

Udržujte architekturu v živé dokumentaci: ADR (Architecture Decision Records), diagramy datových toků, kontrakty API a katalog komponent. Zavádějte pravidla lintování, codeowners, kontrolní seznamy pro revize kódu a pravidelné architektonické revize.

Kontrolní seznam pro návrh frontendové architektury

  • Volba rendrovací strategie (SSR/SSG/Islands) a cílové edge/serverové platformy.
  • Doménové členění, router, lazy loading a hranice modulů.
  • Datová vrstva: typové kontrakty, cache, invalidace, chybové stavy.
  • Design systém, a11y, i18n a strategie testování (jednotkové, e2e, vizuální).
  • Pipeline pro sestavení a nasazení, cache CDN, observabilita a Web Vitals.
  • Bezpečnost: CSP, Trusted Types, SRI, sandboxing třetích stran.
  • Runtime konfigurace, feature flagy a strategie návratu k předchozí verzi.

Závěr

Dobře navržená frontendová architektura spojuje správnou rendrovací strategii, modularitu, optimalizaci výkonu, bezpečnost a provozní procesy. Díky jasným hranicím mezi vrstvami, typové bezpečnosti, sdílenému design systému a robustnímu CI/CD lze dodávat škálovatelná a udržitelná UI, která jsou rychlá, přístupná a snadno rozvíjitelná v měnících se podmínkách webového ekosystému.