Co jsou webové technologie: rámec, role a ekosystém
Webové technologie představují soubor standardů, protokolů, jazyků, nástrojů a runtime prostředí, která umožňují vznik, provoz a škálování webových aplikací a služeb. Zahrnují prohlížečové technologie (front-end), serverová prostředí (back-end), síťovou vrstvu, úložiště dat i nadstavby pro integrace a automatizaci. Cílem je doručit uživatelům bezpečný, dostupný a rychlý obsah napříč zařízeními a sítěmi.
Historie a standardizace: od dokumentů k aplikacím
- Počátky: HTML jako značkovací jazyk dokumentů, HTTP/0.9–1.1, tabulkové layouty a jednoduché skripty.
- Web 2.0: AJAX, JSON, single-page applications (SPA), dynamické uživatelské rozhraní, rozvoj REST API.
- Moderní web: moduly ES, HTTP/2 a HTTP/3 (QUIC), Progressive Web Apps (PWA), WebAssembly, Web Components, edge computing.
- Standardizace: W3C a WHATWG (HTML Living Standard), IETF (HTTP, TLS), ECMA (JavaScript/ECMAScript).
Architektura webu: vrstvy a zodpovědnosti
- Prezentační vrstva (klient): HTML pro strukturu, CSS pro vzhled, JavaScript pro logiku a interakce.
- Aplikační vrstva (server): směrování, doménová logika, autentizace/autorizace, API, šablony či SSR/SSG.
- Datová vrstva: relační/NoSQL databáze, cache (Redis), vyhledávání (Elasticsearch), souborová úložiště.
- Síť a doručení: DNS, TLS, HTTP, CDN, edge funkce, load balancery.
- Observabilita a provoz: logování, metriky, tracing, alerting, CI/CD, IaC.
HTML, CSS a moderní JavaScript
- HTML: sémantické elementy (
<header>,<main>,<article>), ARIA role, formuláře, média (video/audio), custom elements v rámci Web Components. - CSS: Flexbox, Grid, container queries, proměnné (
var()), prefers-reduced-motion, cascade layers, typografie (fluidní škálování), subgrid, color spaces (LCH/OKLCH v nových enginech). - JavaScript (ESM): moduly ES, asynchronní programování (Promises/async-await), Intl API, Web Crypto, Fetch, Streams, Web Workers, Service Workers.
Prohlížečový runtime a renderovací pipeline
- Parsování a DOM/CSSOM: HTML → DOM, CSS → CSSOM, spojení do render tree.
- Layout a malování: výpočet rozměrů, pozic, vrstev; kompozice na GPU.
- Event loop: task, microtask, animation frame, vliv na latenci a interaktivitu.
- Optimalizace: minimalizace reflow/paint, requestIdleCallback, virtualizace seznamů, content-visibility.
Komunikační protokoly: HTTP, TLS a real-time
- HTTP/1.1 → HTTP/2 → HTTP/3 (QUIC): multiplexing, prioritizace, server push (omezené využití), snížené latence.
- TLS: šifrování na transportní vrstvě, HSTS, OCSP stapling, moderní šifry, správa certifikátů (ACME/Let’s Encrypt).
- Real-time: WebSocket, Server-Sent Events, WebRTC (P2P média/data) – chaty, spolupráce, živé streamy.
- Cache a doručení: cache-control, ETag, stale-while-revalidate, CDN, prefetch/preload.
API styly a integrace
- REST: sémantika metod, HATEOAS (volitelně), idempotence, statusové kódy, verze, content negotiation.
- GraphQL: flexibilní dotazy, schema stitching/federace, subscriptions; potřeba kontroly složitosti a cachování.
- gRPC: Protobuf, nízká latence, typicky server-to-server; web varianty přes gRPC-Web.
- Webhooks a event-driven: outbox pattern, idempotentní zpracování, zabezpečené podpisy událostí.
Front-end architektury: SPA, MPA, SSR, SSG a hybridy
- MPA: tradiční multi-page aplikace, serverem generované stránky, jednoduchá cachovatelnost.
- SPA: bohatá klientská logika; riziko Time-to-Interactive bez pečlivé optimalizace.
- SSR/SSG/ISR: rychlá první renderace, lepší SEO a sdílení; revalidace na pozadí, edge rendering.
- Ostrovy & partial hydration: render pouze aktivních komponent, méně JS pro lepší výkon.
Rámce a knihovny UI
- Komponentové přístupy: React, Vue, Svelte, Web Components (Shadow DOM), Solid; stavové knihovny (Zustand, Pinia), řízení dat (SWR/RTK Query).
- Styling: CSS Modules, Tailwind, CSS-in-JS (omezovaně), designové systémy a tokeny.
- Formuláře a validace: HTML5, aria-atributy, knihovny pro schémata (Zod/Yup), přístupnost jako základ.
Back-end platformy a architektonické styly
- Rámce: Node.js (Express/Fastify/Nest), Python (Django/FastAPI), PHP (Laravel/Symfony), Java (Spring), .NET, Go (Gin/Fiber), Ruby (Rails).
- Mikroslužby vs. monolit: doménová modularizace, API kontrakty, saga a outbox pattern.
- Asynchronní zpracování: fronty a streamy (RabbitMQ, Kafka), plánovače, event sourcing.
- Správa stavu: cache vrstvy (Redis), read models, materiálizované pohledy, CQRS.
Databáze a vyhledávání
- Relační: PostgreSQL, MySQL; ACID, indexy, plánovač dotazů, replikace, partitioning.
- NoSQL: dokumentové (MongoDB), key-value (DynamoDB), sloupcové (Cassandra), časové řady (TimescaleDB).
- Vyhledávání: Elasticsearch/OpenSearch, full-text, analyzátory, relevance, vektorové vyhledávání.
- ORM/ODM: výhody (produktivita) vs. rizika (N+1 dotazy); migrace schémat, validace a integritní pravidla.
Výkon a optimalizace na klientovi
- Kritická cesta renderu: minimalizace blokujících zdrojů, defer/async skripty, preload fontů a klíčových CSS.
- Bundling a kód: code-splitting, tree-shaking, modulární ESM, inlining malých kritických stylů.
- Média: moderní formáty (AVIF/WebP), srcset/sizes, lazy-loading, adaptivní video (HLS/DASH).
- Web Vitals: LCP, CLS, INP, TTFB – měření, prahové hodnoty a rozpočet výkonu.
Bezpečnost webu: hrozby a mitigace
- OWASP Top 10: injekce (SQL/NoSQL), XSS, CSRF, špatná autentizace, chybné řízení přístupů, expozice citlivých dat.
- Prohlížečové politiky: CSP (whitelist zdrojů), SRI, SameSite cookies, CORS, Referrer-Policy, Permissions-Policy.
- Autentizace a identity: OAuth 2.1, OIDC, mTLS, JWT (omezení expirace a velikosti), rotační klíče.
- Supply chain security: podpisy balíčků, lockfile, audit zranitelností, izolace buildů.
Přístupnost (a11y), mezinárodní prostředí a SEO
- a11y: kontrast, fokusovatelnost, klávesová navigace, sémantika, aria- atributy, testování s čtečkami obrazovky.
- I18n/L10n: formátování dat, času a měn, plurály, RTL rozhraní, jazykové atributy, rozdělení textu pro překlad.
- SEO: sémantický HTML, metatagy, strukturovaná data (Schema.org), sitemap, canonical, lazy-loading bez blokace indexace.
PWA: offline, instalovatelnost a spolehlivost
- Service Worker: strategie cache (cache-first, network-first, stale-while-revalidate), background sync, notifikace.
- Web App Manifest: ikonografie, barvy, display modes, instalovatelnost na plochu.
- Omezení: oprávnění k notifikacím, omezené přístupy k hardware ve srovnání s nativními aplikacemi.
WebAssembly a výkonnostní moduly
WebAssembly (Wasm) umožňuje běh kompilovaných jazyků (C/C++/Rust) v prohlížeči s výkonem blízkým nativnímu. Je vhodné pro grafiku, zpracování médií, CAD, kryptografii i datově náročné výpočty. Vzniká model hybridního UI – JavaScript pro orchestrace, Wasm pro náročné výpočty.
Build, test a orchestrující nástroje
- Balíčkování a dev server: Vite, esbuild, Rollup, Webpack – rychlé HMR a modulární buildy.
- Testování: jednotkové (Jest/Vitest), komponentové (Testing Library), end-to-end (Playwright/Cypress), vizuální regrese.
- Analýza kvality: ESLint, TypeScript, Prettier, stylelint, Lighthouse, WebPageTest.
Provoz, CI/CD a infrastruktura
- CI/CD: pipeline pro lint/test/build, artefakty, schvalování, blue-green/canary releasy, rollbacky.
- Hosting a doručení: cloud (IaaS/PaaS), serverless (Functions/Workers), kontejnerizace (Docker), orchestrace (Kubernetes).
- Observabilita: logy, metriky, distributed tracing, syntetické a RUM měření, error tracking.
- IaC: Terraform/Pulumi, deklarativní šablony, policy as code.
Datové formáty a výměna dat
- JSON a JSON Schema: validační schémata, generování typů, zpětná kompatibilita.
- XML a HTML: tradiční integrace, sitemap, RSS/Atom, podpisy a šifrování v specifických doménách.
- Binární a vektorové formáty: Protobuf, Avro, Arrow pro analytické toky; vektorové formáty pro AI doporučovací systémy.
Design systémy a správa komponent
- Tokeny designu: barvy, typografie, odsazení, efekty – jako jediný zdroj pravdy napříč platformami.
- Dokumentace: Storybook, katalogy komponent, automatizované vizuální testy.
- Přístupnost a konzistence: variace stavů, módy (tmavý/světlý), lokální a globální témata.
Edge computing a moderní doručování
- Edge funkce: personalizace, AB testy, přesměrování a geologika blízko uživatele.
- CDN jako aplikační platforma: cachování HTML, bezpečnostní zábrany (WAF, bot management), rate limiting.
- Data locality: multi-region storage, konzistence vs. latence, conflict-free replicated data types (CRDT) pro kolaborační aplikace.
Tabulkové srovnání vybraných přístupů
| Oblast | Možnost | Výhody | Nevýhody | Vhodné pro |
|---|---|---|---|---|
| Render | SPA | Bohaté interakce, klientská navigace | Více JS, horší TTI bez optimalizací | Webové aplikace s intenzivním UI |
| Render | SSR/SSG | Rychlá první malba, SEO | Složitější build a invalidace | Obsah, e-commerce, marketing |
| API | REST | Jednoduché, široce podporované | Nadměrné/ nedostatečné payloady | Obecná rozhraní a integrace |
| API | GraphQL | Flexibilita dotazů, typová schémata | Komplexita a cache | Kompozice dat z více služeb |
| Real-time | WebSocket | Obousměrnost, nízká latence | Složitější škálování a
 Veronika BenkováRelated Story |
