Co je webová aplikace a jak funguje? Kompletní průvodce

Jak fungují nástroje, bez kterých si internet neumíme představit.
Monitor s grafy

Každý den používáme desítky nástrojů, které nám usnadňují práci, zábavu nebo komunikaci. Posíláme e-maily, upravujeme dokumenty online, nakupujeme na e-shopech a sledujeme sociální sítě. Většina těchto nástrojů jsou webové aplikace – mocné programy, které běží na internetu a přistupujeme k nim přes obyčejný webový prohlížeč.

Pojďme se podrobně podívat, co to vlastně je, jak to celé funguje a jaké jsou klíčové pojmy spojené s tímto světem.

Co je obecně webová aplikace?

Webová aplikace je interaktivní program, který je uložen na vzdáleném serveru a uživatelé k němu přistupují prostřednictvím webového prohlížeče (jako je Chrome, Firefox nebo Safari).

Webové stránky vs webová aplikace vs informační systém vs intranet

Hlavní rozdíl oproti obyčejné webové stránce je v interaktivitě. Zatímco statická webová stránka primárně zobrazuje informace (např. blogový článek nebo kontaktní údaje firmy), webová aplikace nebo informační systém umožňuje uživateli aktivně pracovat s daty: vytvářet obsah, manipulovat s ním, provádět složité úkoly a komunikovat s ostatními. V podstatě se chová jako software, který nemusíte instalovat do počítače. Rozlišení na webovou aplikace nemusí být tak striktní, ale my je rozlišujeme podle požadavků na design a otevřenost systému. Webová aplikace říkáme, když je na na prvním místě design a aplikace bude nabízet svým zákazníkům či spotřebitelům. Informační systém, má základní požadavky na rychlost při využívání zaškolenou obsluhou je pro něj charakteristické, že je pro interní potřebu firmy. U nás informačnímu systému někdy říkáme intranet, ačkoliv někteří naši kolegové i v tomto mohou vidět nějaký rozdíl. Důvod proč rozlišujeme statické stránky, webovou aplikaci a informační systém je v použitých technologiích. Na každou věc se hodí něco jiného.


Webovou aplikaci, statické webové stránky a informační systém můžete kombinovat. A také se to dělá. Představte si, že nabízíte Vašim zákazníkům nějakou webovou sloužbu a máte k ní nějaký blog, návody a administraci.

Jak webové aplikace fungují?

Každá webová aplikace se skládá ze dvou hlavních částí, které spolu neustále komunikují.

Backend a Frontend

Databáze

Aby si aplikace mohla pamatovat vaše údaje (uživatelský účet, obsah košíku, rozepsaný dokument), potřebuje data někam ukládat. K tomu slouží databáze, která je napojena na backend. Je to organizované úložiště dat, odkud backend informace čte a kam je zapisuje.

Cyklus Požadavek-Odpověď (Request-Response)

  1. Požadavek (Request): Uděláte akci ve frontendu (kliknete na tlačítko, vyplníte formulář). Váš prohlížeč odešle na server požadavek (HTTP request) s informací o tom, co chcete udělat.
  2. Zpracování: Backend na serveru požadavek přijme, zpracuje jeho logiku a případně si řekne databázi o potřebná data.
  3. Odpověď (Response): Backend pošle zpět frontendu odpověď (HTTP response), která obsahuje data nebo rovnou kód (HTML, CSS, JavaScript) pro zobrazení výsledku.
  4. Zobrazení: Prohlížeč odpověď přijme a zobrazí vám výsledek – například načte novou stránku nebo aktualizuje část té stávající.

SPA vs. Klasické řešení (MPA)

Existují dva hlavní architektonické přístupy, jak webové aplikace stavět.

Klasické řešení: Multi-Page Application (MPA)

Ano, klasické řešení má zkratku – MPA. U tohoto přístupu každá významnější akce (např. kliknutí na odkaz v menu) způsobí odeslání požadavku na server a ten jako odpověď pošle kompletně novou HTML stránku. Celá stránka se v prohlížeči znovu načte. Tento přístup je starší, jednodušší na vývoj a často lepší pro SEO (optimalizaci pro vyhledávače).

Moderní řešení: Single-Page Application (SPA)

Jednostránková aplikace (SPA) načte při první návštěvě pouze jeden hlavní HTML soubor a kostru aplikace. Každá další interakce už probíhá dynamicky. Frontend si přes API (rozhraní pro programování aplikací) žádá od backendu pouze čistá data (většinou ve formátu JSON) a novou podobu stránky sám vykresluje pomocí JavaScriptu, aniž by se musela celá stránka znovu načítat. Aplikace je tak výrazně rychlejší a pocitově se více blíží klasickému desktopovému softwaru.

Příklady webových aplikací, které znáte

Související pojmy

SaaS (Software as a Service)

SaaS neboli „software jako služba“ je obchodní model, nikoliv technologie. Většina moderních webových aplikací je poskytována právě touto formou. Místo toho, abyste si koupili jednorázovou licenci na software, platíte si pravidelné předplatné za jeho používání. Poskytovatel se stará o veškerý provoz, údržbu a aktualizace. Typickými příklady jsou Microsoft 365, Adobe Creative Cloud nebo Salesforce.

Intranet

Intranet je v podstatě soukromá webová aplikace (nebo soubor aplikací a stránek) určená pouze pro zaměstnance a členy jedné konkrétní organizace. Běží na interních serverech a slouží ke sdílení interních informací, dokumentů, firemních systémů a ke komunikaci. Přístup do intranetu je obvykle omezen na firemní síť. Pokud se chtějí zaměstnanci připojit z domova, musí použít zabezpečený kanál zvaný VPN (Virtual Private Network).

Výhody a nevýhody webových aplikací

✅ Výhody

❌ Nevýhody

Zdeněk Skulínek i jeho spolupracovníci jsou zkušení profesionálové.
Ve Zdeněk Skulínek Vám nenabídneme zhotovení projektu bez projektového řízení.
Ve Zdeněk Skulínek máme zkušenosti s malými i velkými projekty.
U Zdeňka Skulínka děláme projekty správně.