Frontendová architektura - Ekonomická encyklopédia

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 + JS, který po načtení přebírá řízení. Výhody: bohatá interaktivita; nevýhody: delší time-to-interactive a SEO výzvy.
SSR (Server-Side Rendering): HTML generované na serveru pro rychlý first paint, následná hydratace v prohlížeči. Vhodné pro obsah a SEO.
SSG (Static Site Generation): předvýroba HTML v čase buildu. Extrémní výkon a nízké náklady, ale potřeba re-buildu při změně obsahu.
ISR/DSG: inkrementální statická regenerace – stránka se periodicky revaliduje na pozadí a servíruje se statická verze.
Islands architecture: server vygeneruje HTML a ostrovy interaktivity (komponenty) se hydratují selektivně, což minimalizuje JS.

Směrování a navigace

Router dělí aplikaci na stránky a stavy. File-based routing zjednodušuje strukturu, nested routing optimalizuje sdílené layouty. Důležité jsou preload linků, prefetch dat pro další kroky a řízení scroll restoration.

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

Lokální stav (UI): formuláře, modály; spravován v rámci komponent (např. React state).
Globální stav: cross-cutting informace (uživatel, téma, jazyk); využití knihoven (Redux, Zustand, XState) s jasnými hranicemi.
Serverový stav: data z API s cache a revalidací (SWR, React Query, TanStack Query). Odlišný od globálního – řídí se stale-while-revalidate, invalidacemi a synchronizací se serverem.

Datová vrstva a API kontrakty

Frontend komunikuje s backendem přes REST, GraphQL nebo tRPC. Standardy zahrnují typovou bezpečnost (TypeScript, OpenAPI/GraphQL schema), error boundary, retry/backoff, circuit breaker a observabilitu (trace ID v hlavičkách). U GraphQL je klíčový cache policy a normalizace dat.

Autentizace a autorizace

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

Design systém a UI knihovny

Design systém definuje tokeny (barvy, typografie, spacing), komponenty a patterny. Komponenty by měly být a11y-first, s klávesnicovou navigací a ARIA rolemi. Distribuce formou monorepa balíčku (npm, pnpm) s verzováním (SemVer), dokumentací (Storybook) a vizuální regresí (Chromatic/Regresssion suite).

Výkon a rozpočty (performance budgets)

Code splitting a lazy loading – načítejte jen to, co je nutné pro aktuální obrazovku.
Hydration minimization – ostrovy, partial/streaming hydration, serverové akce.
Asset pipeline – optimalizace obrázků (AVIF/WebP), responsive images, font subsetting, preconnect/prefetch.
Critical CSS a HTTP/2 push (resp. 103 Early Hints); důraz na First Contentful Paint, Largest Contentful Paint, CLS a INP.

Build nástroje a bundlery

Moderní stacky staví na Vite (dev server + rollup bundling), esbuild a SWC pro transpile/Minify. Konfigurace zahrnuje aliasy, module hashing, tree-shaking, dead code elimination a externals pro CDN knihovny. Sledujte bundle viz a omezte vendor lock-in.

Modulární frontendy a microfrontends

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

Edge a CDN vrstva

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

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

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

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

Volte podle citlivosti a velikosti: Session/Local Storage (nekritická data), IndexedDB (větší strukturovaná data), Cookies (pouze nezbytné, ideálně httpOnly na serveru). Implementujte expirace, migrace schémat a šifrování na aplikační vrstvě tam, kde je to nutné.

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

a11y: semantické HTML, ARIA jen tam, kde je to nezbytné, kontrasty, focus ring, čitelné stavy chyb, skip links, testy se čtečkami.
i18n: ICU formát, l10n pro lokalní formáty, lazy loading překladů, RTL podpora a lingvistické QA.

Bezpečnost frontendu

CSP (default-src, script-src s nonce nebo hash), Trusted Types proti DOM XSS.
Sandboxing třetích skriptů, Subresource Integrity a omezení postMessage kanálů.
Bezpečná manipulace s URL, sanitace vstupů, omezení eval/Function, přísné typy pro API odpovědi.

Testování a kvalita

Unit a komponentové testy (Vitest/Jest, Testing Library) – kontrakty a chování komponent.
Integrační a e2e (Playwright/Cypress) – proudy uživatele, síťové chování, a11y testy (axe).
Vizual regresní – snímky UI přes Storybook a CI běhy.

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 (privacy-aware) a chybové reporty s mapami zdrojů (source maps). Korelujte s backendem pomocí trace ID.

CI/CD a release management

CI: linting (ESLint), typová kontrola (tsc), testy a build artefaktů.
CD: blue-green, canary, feature flagy, rollback strategie; artefakty publikované do CDN s immutable hashovanými cestami.
Env management: .env šablony, bezpečné secrets, runtime konfigurace injektovaná na okraji (ne rebuild pro každé prostředí).

Monorepo, verze a správa závislostí

Monorepo nástroje (pnpm workspaces, Nx, Turborepo) usnadňují sdílení kódu a konsistentní standardy. Dodržujte SemVer, changesety, automatizované releasy a bezpečnostní skeny (Dependabot). Modulární architektura brání cyklickým závislostem.

SEO a obsahové standardy

Meta a strukturovaná data (JSON-LD), správná hlavička lang, kanonické odkazy.
Open Graph a Twitter Cards pro sdílení.
Rychlost načítání, stabilita layoutu a accesibilita jako signály kvality.

Architektonické patterny komponent

Container/Presenter: oddělení logiky (data fetching, state) od UI.
Render props a hooks pro sdílitelné chování.
Domain-driven UI: mapování doménových entit na komponenty a pohledy s jasným API.

Chybové stavy, loading a skeletony

Každý datový dotaz má tři stavy: loading, error, success. Používejte skeleton UI, optimistic updates a toasts pro zpětnou vazbu. Error boundaries brání pádu celé aplikace, retry s exponenciálním backoffem zlepšuje robustnost.

Správa konfigurace a feature flagy

Funkce zapínejte přes feature flags (uživatelské segmenty, A/B testy). Konfigurace musí být runtime (JSON endpoint, edge config), aby nebyly nutné rebuildy. Logujte změny pro audit a reprodukovatelnost incidentů.

Typová bezpečnost a kontrakty

TypeScript je základ: strict režim, generika pro API klienty, z-k nebo podobné validace pro runtime. Generujte typy z OpenAPI/GraphQL schémat, aby se minimalizovaly třídní chybovosti mezi FE a BE.

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

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

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

Využívejte responsive images (srcset, sizes), lazy loading, priority hints a moderní formáty (AVIF/WebP). Zvažte image CDN s on-the-fly transformacemi a podpisovanými URL pro kontrolu přístupu.

Bezstavové UI a synchronizace

Preferujte idempotentní akce a deterministické stavy. Při více tabech udržujte cross-tab broadcast (BroadcastChannel), řešte konflikty (CRDT pro offline spolupráci) a časové značky pro konsistenci.

Dokumentace a governance

Architekturu udržujte v živé dokumentaci: ADR (Architecture Decision Records), diagramy datových toků, kontrakty API a katalog komponent. Zavádějte lint pravidla, codeowners, review checklisty a pravidelné arch review.

Checklist pro návrh frontendové architektury

Volba rendrovací strategie (SSR/SSG/Islands) a cílové edge/server platformy.
Doménové dělení, router, lazy loading a hranice modulů.
Datová vrstva: typové kontrakty, cache, invalidace, chybové stavy.
Design systém, a11y, i18n a testovací strategie (unit, e2e, vizuální).
Build a deploy pipeline, CDN cache, observabilita a Web Vitals.
Bezpečnost: CSP, Trusted Types, SRI, sandbox třetích stran.
Runtime konfigurace, feature flags a strategie rollbacku.

Závěr

Dobře navržená frontendová architektura je kombinací správné rendrovací strategie, modularity, výkonnostních optimalizací, bezpečnosti a provozních procesů. Díky jasným hranicím mezi vrstvami, typové bezpečnosti, sdílenému design systému a robustnímu CI/CD lze doručovat š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.