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 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 problémy.
- 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ředvygenerování HTML v době buildu. Extrémní výkon a nízké náklady, avšak potřeba rebuildů při změně obsahu.
- ISR/DSG: inkrementální statická regenerace – stránka je periodicky revalidována na pozadí a zároveň servírována statická verze.
- Islands architecture: server vygeneruje HTML a ostrovy interaktivity (komponenty) se hydratují selektivně, což minimalizuje množství JavaScriptu.
Směrování a navigace
Router rozděluje aplikaci na stránky a stavy. File-based routing zjednodušuje strukturu, nested routing optimalizuje sdílené layouty. Klíčové jsou preload odkazů, prefetch dat pro následující kroky a řízení scroll restoration.
Správa stavu: lokální, globální a serverový
- Lokální stav (UI): formuláře, modály; spravován uvnitř komponent (např. React state).
- Globální stav: průřezové informace (uživatel, téma, jazyk); využívá knihovny (Redux, Zustand, XState) s jasně definovanými hranicemi.
- Serverový stav: data z API s cache a revalidací (SWR, React Query, TanStack Query). Liší se od globálního – řídí se principem 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 schéma), 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ě uložené 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, mezery), komponenty a patterny. Komponenty by měly být a11y-first, s podporou klávesnicové navigace a ARIA rolemi. Distribuce probíhá formou monorepo balíčku (npm, pnpm) s verzováním (SemVer), dokumentací (Storybook) a vizuální regresní kontrolou (Chromatic/Regression suite).
Výkon a rozpočty (performance budgets)
- Code splitting a lazy loading – načítejte pouze to, co je nezbytné pro aktuální zobrazení.
- 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 a minifikaci. 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ávislý vývoj a nasazování částí uživatelského rozhraní. 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 lokální 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) – uživatelské scénáře, síťové chování, a11y testy (axe).
- Vizuální regresní testování – 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: lintování (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.
- Správa prostředí: .env šablony, bezpečné secrets, runtime konfigurace injektovaná v edge (bez nutnosti 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 zachování konzistentních standardů. Dodržujte SemVer, changesety, automatizované releasy a bezpečnostní kontroly (Dependabot). Modulární architektura zamezuje cyklickým závislostem.
SEO a obsahové standardy
- Meta a strukturovaná data (JSON-LD), správné nastavení hlavičky lang, kanonické odkazy.
- Open Graph a Twitter Cards pro sociální sdílení.
- Rychlost načítání, stabilita layoutu a přístupnost jako kvalitativní signály.
Architektonické patterny komponent
- Container/Presenter: oddělení logiky (data fetching, stav) od UI.
- Render props a hooks pro sdílené chování.
- Domain-driven UI: mapování doménových entit na komponenty s jasným API.
Chybové stavy, načítání a skeletony
Každý datový dotaz má tři stavy: loading, error, success. Používejte skeleton UI, optimistic updates a toasty pro zpětnou vazbu. Error boundaries zabraňují pádu celé aplikace, retry s exponenciálním backoffem zvyšuje robustnost.
Správa konfigurace a feature flagy
Funkce aktivujte pomocí feature flags (uživatelské segmenty, A/B testy). Konfigurace musí být runtime (JSON endpoint, edge config), aby nebyly nutné rebuildy. Změny logujte 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í chyby mezi frontendem a backendem.
Doménové oddělení a hranice modulů
Aplikaci rozdělujte na doménové balíčky (např. catalog, checkout, account) a sdílené vrstvy (ui, design-tokens, utils, api). Tím zabráníte 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 podepsanými URL pro kontrolu přístupu.
Bezstavové UI a synchronizace
Preferujte idempotentní akce a deterministické stavy. Při práci s více záložkami udržujte cross-tab broadcast (BroadcastChannel), řešte konflikty (CRDT pro offline spolupráci) a používejte časové značky pro konzistenci.
Dokumentace a governance
Architekturu udržujte v živé dokumentaci: ADR (Architecture Decision Records), diagramy datových toků, API kontrakty 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ýkonových optimalizací, bezpečnosti a provozních procesů. Díky jasným hranicím mezi vrstvami, typové bezpečnosti, sdílenému
