Slovník pojmů

Webová aplikace

Webová aplikace propojuje uživatelské rozhraní, aplikační pravidla a data přes webové standardy. Může být server-renderovaná, klientská nad API nebo obojí v jednom produktu.

Stručná definice

Interaktivní produkt dostupný prostřednictvím webu.

Webová aplikace nabízí funkce, ne jen statický obsah: uživatel se může přihlásit, vyhledávat, odeslat objednávku, spravovat účet nebo pracovat v interní administraci. Frontend vytváří rozhraní, backend zpracovává pravidla a data se ukládají v databázi nebo využívají další služby.

Ne každá webová aplikace je jednostránková aplikace a ne každá interaktivní stránka potřebuje rozsáhlý JavaScript. Server-side rendering, klasické formuláře, API i samostatný frontend jsou technické volby podle potřeb produktu a uživatelů.

Jaký problém řeší

Zpřístupňuje produkt více uživatelům přes prohlížeč

Webové standardy umožňují používat aplikaci bez instalace tradičního desktopového klienta, ale nezbavují produkt nutnosti správně navrhnout data a bezpečnost.

e-shop s katalogem, objednávkami, platbami a zákaznickým účtem
interní systém pro sklad, finance, zákaznickou podporu nebo administraci
SaaS s uživateli, organizacemi, rolemi a oddělením tenantů
zákaznický portál nad API a integračními službami
rezervační systém nebo pracovní nástroj přístupný z více zařízení

Praktický příklad

E-shop jako jeden produkt s více částmi

Veřejný katalog umožňuje hledání produktů. Zákazník se přihlásí, vloží položky do košíku a vytvoří objednávku. Administrátor spravuje ceny a sklad. Backend pracuje s databází, platební bránou, dopravcem a případně vyhledávacím indexem.

Cache nebo Elasticsearch mohou zrychlit čtení, ale objednávky, platby a skladové změny zůstávají v transakčním zdroji pravdy. Uživatel má vidět stav, který systém skutečně potvrdil, ne pouze optimisticky změněnou hodnotu v prohlížeči.

Jak funguje

Od otevření URL ke změně dat

Zjednodušený diagram ukazuje funkční části, které mohou běžet společně nebo odděleně.

Uživatel otevře URL Prohlížeč přes DNS a HTTPS získá HTML, CSS, JavaScript nebo první data aplikace.
Frontend vytvoří rozhraní Serverově nebo klientsky zobrazí obsah, navigaci a ovládání podle aktuálního stavu.
Akce uživatele Formulář či JavaScript odešle HTTP request s konkrétním záměrem.
Backend zpracuje operaci Ověří identitu, oprávnění, data a business pravidla, potom pracuje s databází nebo službami.
Výsledek se projeví Response aktualizuje rozhraní; vedlejší úlohy jako e-mail nebo synchronizace mohou pokračovat mimo request.

Důležité části

Rozhraní, pravidla, data a provoz tvoří jeden produkt.

Rozdělení mezi technologie se liší, odpovědnosti však zůstávají podobné.

Frontend a backend

Uživatelské rozhraní a serverová logika mohou být v jednom monolitu nebo samostatně nasazené aplikace.

HTTP a URL

Web používá URL pro adresování a HTTP pro požadavky a odpovědi; HTTPS chrání komunikaci na cestě.

Data a cache

Databáze je zdroj pravdy pro business data, cache je optimalizační vrstva s vlastními pravidly expirace a invalidace.

Identita a oprávnění

Přihlášení určuje identitu; autorizace na serveru rozhoduje o konkrétní operaci a záznamu.

Rendering a dostupnost

Server-side rendering, client-side rendering i PWA jsou různé přístupy. Důležitá je dostupnost a chování při chybě.

Vztah k podobným pojmům

Webová aplikace není jen frontend ani synonymum pro SaaS.

Pojem popisuje celek poskytovaný na webové platformě.

Statická webová stránka: Může zobrazit obsah bez uživatelského stavu. Hranice je plynulá, ale aplikace obvykle obsahuje více interakcí a dat.
Frontend: Je uživatelská část. Celá webová aplikace zahrnuje také backend, data, infrastrukturu a provozní procesy.
Nativní mobilní aplikace: Není automaticky webovou aplikací, může však sdílet stejný backend a API.
SaaS: Je obchodní a provozní model poskytování softwaru; může, ale nemusí být webovou aplikací.

Výhody a omezení

Dostupnost z prohlížeče neodstraňuje složitost produktu.

Přínosy

přístup přes běžný prohlížeč z více zařízení
sdílená data a pravidla pro uživatele, administraci a integrace
využití standardů HTTP, URL, HTTPS a webové infrastruktury
možnost volit samostatný frontend nebo přímočarý server-renderovaný produkt

Časté chyby

předpokládat, že webová aplikace musí být SPA
nechat autorizaci pouze ve frontendu
považovat cache nebo vyhledávací index za zdroj pravdy objednávek
přidat služby, fronty a API pouze proto, že působí moderně

Kdy dává smysl

Pro produkty, které potřebují sdílené funkce a data na webu.

Webová aplikace je přirozená pro e-commerce, portál, rezervace, administraci nebo SaaS, kde více uživatelů pracuje se společnými daty a procesy. Není nutné, aby každá část byla samostatná služba; podstatné je, aby se produkt dal bezpečně rozvíjet a provozovat.

Jednoduchý veřejný obsah může být statický web. Pokud jsou hlavním cílem zařízení, práce offline nebo hluboké systémové integrace, může být vhodnější nativní aplikace nebo kombinace více klientů nad společným backendem.

Na co myslet

Kvalita vzniká napříč vrstvami aplikace.

Uživatelský problém se často projeví až na hranici mezi rozhraním, sítí, backendem a daty.

navrhnout srozumitelné chybové a načítací stavy pro uživatele
chránit session, identitu a oprávnění na serveru
držet data a transakce jako zdroj pravdy, cache vědomě invalidovat
měřit dostupnost HTTP vstupu, backendu i klíčových integračních toků
volit architekturu podle složitosti produktu a schopností týmu

Časté otázky

Časté hranice webové aplikace

Je webová aplikace totéž co webová stránka?

Ne zcela. Stránka může být jen statický obsah, kdežto aplikace obvykle pracuje se stavem, daty a uživatelskými akcemi. Hranice však v praxi není ostrá.

Musí webová aplikace mít samostatné API?

Nemusí. Server-renderovaná aplikace může používat formuláře a stejné backendové moduly. API je vhodné, když jej skutečně potřebují další klienti nebo architektura produktu.

Je mobilní aplikace webová aplikace?

Ne nutně. Může ale používat stejný backend a API; PWA je specifický typ aplikace postavené na webové platformě.

Je databáze součástí webové aplikace?

Často ano na úrovni systému. Aplikace ale může používat i API, cache, vyhledávací index a další samostatné služby.

Jak pracuji s aplikacemi v praxi

E-commerce aplikace rozvíjím od datového modelu po integrace.

Zkušenosti z e-shopů využívám při návrhu objednávkových toků, administrace, backendu, API i dlouhodobého provozu.

Jak pracuji s e-commerce aplikacemi Nezávazně probrat projekt