Architektura moderních webových systémů: frontend, backend a API

Webové technologie a grafika
P. Varga
Architektura moderních webových systémů: Frontend, backend, API

Proč záleží na architektuře moderních webových systémů

Moderní webové systémy jsou distribuované, vysoce škálovatelné a bezpečné platformy, které musí poskytovat funkce miliardám zařízení v heterogenních sítích. Architektonická rozhodnutí ovlivňují nejen výkon a spolehlivost, ale také rychlost vývoje, náklady, compliance a schopnost reagovat na změny trhu. Tento přehled shrnuje klíčové principy, stavební bloky a osvědčené vzory pro návrh a provoz současných webových aplikací.

Architektonické styly: od monolitu k mikroslužbám a zpět

  • Monolit – jednoduché nasazení, nižší provozní složitost; hůře se škáluje po částech a nese vyšší riziko vzniku „big ball of mud“.
  • Modulární monolit – přísné hranice modulů a kontrakty v rámci jednoho procesu; rozumný kompromis pro střední měřítko.
  • Mikroslužby – nezávislé nasazování, škálování a autonomie domén; náklady na síťovou komunikaci, observabilitu a konzistenci.
  • Service-Oriented – rozsáhlejší služby s integrační vrstvou; vhodné pro podnikové integrační scénáře.
  • Serverless – funkce a spravované služby s elastickým škálováním; závislost na platformě, omezení související se studenými starty a dobou běhu.

Doménově řízený návrh a hranice kontextů

Doménově řízený návrh (DDD) definuje bounded contexts s jasně vymezenými modely a ubiquitous language. Minimalizuje kolize modelů, podporuje nezávislé týmy a přirozeně se mapuje na mikroslužby či moduly. Publikování událostí mezi kontexty snižuje provázanost a usnadňuje další vývoj.

Architektury front-endu: MPA, SPA, SSR, SSG a ISR

  • MPA – tradiční vícestránková aplikace, snadnější SEO, nižší komplexita JavaScriptu.
  • SPA – bohaté UX, správa stavu na klientovi; je nutné řešit SEO, výkon a počáteční objem dat.
  • SSR/SSG – vykreslování na serveru nebo statické generování pro rychlé Time-to-First-Byte a SEO.
  • ISR – inkrementální regenerace statických stránek, kompromis mezi dynamikou a výkonem.
  • Edge rendering – vykreslování a personalizace na okraji sítě pro minimální latenci.

Vrstvy API: REST, GraphQL a gRPC

  • REST – jednoduchý, ukládatelný do mezipaměti a široce rozšířený; verzování a hypermédia jsou dlouhodobá témata.
  • GraphQL – flexibilní dotazování, omezení nadměrného či nedostatečného načítání dat; vyžaduje správu schématu a autorizaci pro každý resolver.
  • gRPC – binární protokol nad HTTP/2/3, podporuje streamování a hodí se pro vnitřní služby s nízkou latencí.
  • BFF – Backend-for-Frontend agreguje data a přizpůsobuje je konkrétním klientům.

Datová vrstva: relační databáze, NoSQL, CQRS a Event Sourcing

  • Relační databáze – silná konzistence, transakce ACID, komplexní dotazy; vertikální i horizontální škálování (sharding).
  • NoSQL – databáze typu klíč–hodnota, dokumentové, wide-column nebo grafové; volba podle přístupových vzorů a požadavků na konzistenci.
  • CQRS – oddělení modelů čtení a zápisu pro škálování a optimalizaci dotazů.
  • Event Sourcing – stav jako odvozenina událostí; audit, cestování časem, vyšší nároky na projekce a verzování.

Mezipaměť a akcelerace: od prohlížeče po okraj sítě

  • HTTP cache – hlavičky Cache-Control, ETag, Last-Modified, Vary a invalidace.
  • Mezipaměť v paměti – Redis/Memcached pro relace, limity četnosti požadavků a výsledky dotazů.
  • CDN a edge – distribuce statických i dynamických odpovědí, stale-while-revalidate a funkce na okraji sítě.

Asynchronní zpracování a architektura řízená událostmi

  • Fronty a streamy – RabbitMQ/SQS pro úkoly, Kafka/Pulsar pro proudy událostí a log compaction.
  • Idempotence – klíče pro deduplikaci, outbox pattern a sémantika exactly-once podle potřeby.
  • Vzor Saga – distribuované transakce řízené orchestrace nebo choreografií; kompenzační kroky.

Škálování a výkon: horizontální, vertikální i elastické

  • Horizontální škálování – více instancí za nástrojem pro vyrovnávání zátěže, bezstavové služby, sticky session jen výjimečně.
  • Řízení zpětného tlaku a limity – fronty, token-bucket, reakce na přetížení (odmítání části požadavků, omezení funkcí).
  • Profilování – APM, plamenné grafy, latence p95/p99, optimalizace kritických cest.

Spolehlivost a odolnost

  • Opakování s jitterem – exponenciální prodleva a rozpočet pro opakování.
  • Circuit breaker – prevence kaskádových selhání, záložní řešení a rychlé selhání.
  • Časové limity – konzistentní SLA na straně klienta i serveru, ochrana zdrojů.
  • Chaos engineering – systematické testování odolnosti a postupy pro obnovu.

Bezpečnost: od prohlížeče po databázi

  • Autentizace a autorizace – OAuth 2.1, OIDC, mTLS pro komunikaci mezi službami, RBAC/ABAC, oddělení přístupových údajů.
  • Ochrana webu – CSP, HSTS, cookies SameSite, bezpečnostní hlavičky, ochrana proti XSS/CSRF/SQLi.
  • Správa tajných údajů – trezory, rotace klíčů, KMS/HSM, envelope encryption.
  • Ochrana soukromí a compliance – minimalizace dat, pseudonymizace, doba uchovávání dat, audit a práva subjektů údajů.

Observabilita: metriky, logy a trasování

  • Metriky – RED/USE, SLO a rozpočty chyb, upozorňování s burn rate.
  • Strukturované logy – korelace pomocí ID trasování, úrovně závažnosti logů a vzorkování.
  • Distribuované trasování – spany, baggage, analýza latence mezi službami.
  • Uživatelská zkušenost – RUM a Core Web Vitals (LCP, INP, CLS) propojené s backendovými SLO.

DevOps, CI/CD a automatizace změn

  • CI/CD pipeline – sestavení, testování, skenování, nasazení; bezpečnostní opatření uplatňovaná už v raných fázích vývoje (shift-left; SAST/DAST/SBOM).
  • Strategie nasazení – blue/green, canary, postupné nasazování s příznaky funkcí.
  • Návrat k předchozí verzi a postup vpřed – migrace schémat bez blokování, kompatibilní kontrakty API.

Infrastruktura jako kód a orchestrátor

  • IaC – Terraform/Pulumi pro deklarativní správu prostředí, standardizaci modulů a policy-as-code.
  • Kontejnery – Docker/OCI, neměnné obrazy, vícefázová sestavení, minimalizace plochy útoku.
  • Kubernetes – operátory, HPA/VPA, rozpočet narušení podů, síťové politiky a service mesh.

Edge, CDN a globální distribuce

  • CDN – ukončení TLS blízko uživatele, mezipaměť a pravidla přepisování, ochrana před DDoS.
  • Geografická replikace – nasazení ve více regionech, kompromis mezi latencí a konzistencí, strategie read-local/write-global.

Vyhledávání, analytika a reporting

  • Vyhledávání – fulltextové indexy, skóre relevance, slovníky synonym, denormalizace pro vyšší rychlost.
  • Analytika – event pipelines, stream processing, datové jezero/datový sklad, správa metadat.

Komunikace v reálném čase a modely push

  • WebSocket – obousměrná komunikace pro chaty, obchodní data a spolupráci.
  • SSE – události odesílané serverem pro jednosměrná oznámení.
  • Web Push – oznámení prostřednictvím prohlížeče s modelem opt-in.

Správa stavu a konzistence

  • Stav na straně klienta – ukládání odpovědí GET do mezipaměti, normalizace, invalidace, optimistic UI.
  • Konzistence – silná versus eventual; volba modelu podle domény a očekávání ohledně UX.
  • Transakce – lokální ACID, distribuované transakce s SAGA a idempotentními operacemi.

Verzování API a zpětná kompatibilita

  • Kontrakty SemVer – změny bez narušení kompatibility, zásady ukončování podpory (deprecation policy), migrační období.
  • Kontrola schématu – validace datových částí požadavků, contract testing a generování klientů.

Testování: od jednotkových testů po chaos

  • Jednotkové a integrační testy – rychlé, deterministické a s minimem závislostí.
  • Kontraktní a E2E testy – validace rozhraní, testovací prostředí podobná produkčnímu.
  • Výkonnostní a zátěžové testy – profilování kritických cest, limity škálování a plánování kapacity.
  • Chaos/DR – pravidelná cvičení obnovy a vkládání chyb.

SEO, přístupnost a mezinárodní prostředí

  • SEO – mapy webu, strukturovaná data, kanonické URL, líné načítání bez blokování indexace.
  • Přístupnost – principy WCAG, navigace pomocí klávesnice, kontrast a atributy aria-*.
  • I18n/L10n – lokalizace textů, formáty dat, měny, RTL, záložní varianty.

Bezpečná integrace služeb třetích stran

  • Webhooky – podepisování požadavků, opakování s idempotencí, audit.
  • SDK a widgety – izolace v iframe, Content Security Policy, minimální oprávnění.

Správa souborů a médií a optimalizace obrázků

  • Objektová úložiště – verzování, životní cykly, replikace mezi regiony.
  • Optimalizace – formáty WebP/AVIF, responzivní obrázky, srcset, adaptivní přenosová rychlost videa.

Multi-tenancy a izolace

  • Modely tenantů – sdílené schéma, schéma pro každého tenanta, databáze pro každého tenanta podle SLA.
  • Izolace – limity zdrojů, oddělené klíče, audit a šifrování pro každého tenanta.

FinOps a optimalizace nákladů

  • Měření – náklady na službu/funkci, alokace a showback/chargeback.
  • Optimalizace – správná velikost instancí, automatické škálování, rezervované/spot instance, minimalizace odchozího přenosu dat.

Provozní excelence a správa

  • Runbooky a playbooky – postupy pro incidenty a změny, kultura poučení z incidentů bez hledání viníka.
  • Politiky – pojmenovávání, tagování, verzování artefaktů, doporučené postupy (golden paths) pro vývojáře.

Referenční architektury a rozhodovací matice

  • Malé týmy – modulární monolit, REST, SSG/SSR, 1 databáze + mezipaměť, CI/CD s canary nasazováním.
  • Střední měřítko – modulární monolit + několik služeb, BFF, čtecí repliky, sběrnice událostí, CDN, IaC.
  • Velké měřítko – mikroslužby, více domén, více regionů, streamy, CQRS, service mesh, pokročilé SLO.

Závěr: principy, které přetrvají

Úspěšné moderní webové systémy stojí na jasných hranicích domén, nízké provázanosti a vysoké soudržnosti, observabilitě, bezpečnosti by design a automatizaci celého životního cyklu. Konkrétní technologie se mohou měnit, ale principy jako jednoduchost, postupná evoluce, měřitelnost a odolnost vůči chybám zůstávají stabilními pilíři, které odlišují udržitelné systémy od křehkých a nákladných řešení.