Frontend vs backend: v čem je rozdíl?
Frontend je ta část aplikace, která běží v prohlížeči uživatele — stránky, tlačítka, formuláře a animace, které vidí a na které klikají. Backend je část, která běží na serveru, jenž uživatel nikdy nevidí: ukládá a načítá data, uplatňuje obchodní pravidla, kontroluje, kdo smí co dělat, a komunikuje s dalšími službami, jako jsou platby a e-mail. Obě části spolu komunikují přes API a spolu s databází tvoří aplikaci typu „full stack“.
Proč na tom záleží, když stavíte s AI
Když popisujete aplikaci AI nástroji na tvorbu, popisujete obě poloviny najednou, ať si to uvědomujete, nebo ne. Věta „zákazníci si mohou rezervovat termín“ znamená rezervační formulář (frontend), pravidla o tom, které termíny jsou volné (backend), a místo, kam se rezervace ukládají (databáze).
Znalost tohoto rozdělení pomáhá v praxi třemi způsoby:
- Bezpečnost. Cokoli ve frontendu může uživatel vidět a změnit. Pravidla a tajné klíče musí být na backendu.
- Ladění. „Tlačítko nereaguje“ a „tlačítko reaguje, ale nic se neuloží“ ukazují na různé poloviny aplikace. Když řeknete, co přesně vidíte, AI najde příčinu rychleji.
- Hosting a náklady. Web jen s frontendem je levný a jednoduchý na provoz. Backend musí někde běžet, což ovlivňuje, co platíte a jak se aplikace chová, když je nečinná.
Každodenní přirovnání
Představte si restauraci.
Frontend je jídelna: jídelní lístek, stoly, výzdoba a číšník, který přijímá objednávku. Je navržena pro hosty a ti vidí a mohou se dotknout všeho.
Backend je kuchyně a kancelář: kuchaři vaří, sklad, pokladna a pravidla vedoucího o slevách. Hosté tam nechodí a nemají tam co dělat.
API je předávací okénko mezi nimi — místo, kudy objednávky odcházejí a jídla se vracejí, v dohodnutém formátu. Databáze je sklad a kniha objednávek.
Zákazník si může přepsat svůj lístek (frontend je pod jeho kontrolou), ale kuchyně stále rozhoduje, co uvaří a kolik to bude stát. Proto se důležité kontroly dělají vzadu.
Co dělá která strana
| Frontend | Backend | |
|---|---|---|
| Běží na | Zařízení uživatele, v prohlížeči | Serveru, který ovládáte vy nebo váš hosting |
| Hlavní úkol | Zobrazovat věci, sbírat vstupy, reagovat na kliknutí | Ukládat data, uplatňovat pravidla, kontrolovat oprávnění, volat další služby |
| Mohou uživatelé vidět a měnit kód? | Ano — stahuje se do jejich prohlížeče | Ne |
| Mohou obsahovat tajné klíče API? | Ne | Ano, v proměnných prostředí |
| Běžné technologie | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Co se pokazí | Rozložení se rozbije na mobilu, tlačítko nic nedělá, pomalá stránka | Data se neuloží, zobrazí se špatná data, chyby, bezpečnostní díry |
Některé frameworky hranici stírají. Next.js například umožňuje, aby jeden projekt obsahoval jak kód pro prohlížeč, tak kód pro server. Princip zůstává stejný: vždy jde o otázku, kde tato část běží?
Příklad: rezervace lekce jógy
Takhle vypadá krok za krokem rezervace lekce jógy.
| Krok | Kde | Co se stane |
|---|---|---|
| 1 | Frontend | Stránka s rozvrhem se načte a požádá backend o lekce tohoto týdne. |
| 2 | Backend | Načte lekce a rezervace z databáze, spočítá volná místa a vrátí seznam jako JSON. |
| 3 | Frontend | Zobrazí každou lekci s časem, lektorem a počtem volných míst. |
| 4 | Frontend | Uživatel vybere lekci a vyplní jméno a e-mail. Formulář ověří, že e-mail vypadá správně (jako pozornost, ne jako záruka). |
| 5 | Frontend → Backend | Odešle požadavek POST /api/bookings přes API. |
| 6 | Backend | Vstup znovu ověří, zkontroluje, že lekce není plná, rezervaci uloží a pomocí tajného klíče požádá e-mailovou službu o potvrzení. |
| 7 | Backend → Frontend | Vrátí „rezervováno“ nebo „je mi líto, je obsazeno“. |
| 8 | Frontend | Zobrazí potvrzovací obrazovku. |
Všimněte si kroků 4 a 6: vstup se kontroluje dvakrát. Kontrola ve frontendu dává okamžitou zpětnou vazbu; kontrola na backendu je ta, která skutečně platí, protože odhodlaný uživatel může frontend obejít úplně.
Běžné pojmy vysvětlené
| Pojem | Význam |
|---|---|
| Klient / server | Klient je prohlížeč (nebo aplikace), který posílá požadavky; server na ně odpovídá. |
| UI | Uživatelské rozhraní — obrazovky a ovládací prvky. |
| API | Dohodnutý způsob, jakým frontend žádá backend o data nebo akce. |
| Endpoint | Jedna konkrétní adresa v API, například /api/bookings. |
| Full stack | Frontend + backend + databáze dohromady. Viz co je full-stack aplikace. |
| Statický web | Frontend bez vlastního backendu; pro všechny jsou stejné soubory. |
| SPA | Single-page application: frontend, který aktualizuje stránku v prohlížeči místo načítání nových stránek. |
| Server-side rendering (SSR) | Server sestaví HTML stránky dřív, než ji odešle, což může pomoci rychlosti i SEO. |
| Proměnné prostředí | Nastavení a tajné údaje předané backendu za běhu, uchovávané mimo kód. |
Potřebuje vaše aplikace backend?
| Pokud vaše aplikace… | Je potřeba backend? |
|---|---|
| Zobrazuje informace, které jsou pro všechny stejné | Ne |
| Má kontaktní formulář, který vám jen posílá e-mail | Obvykle malý, nebo formulářová služba |
| Ukládá data, která budou vidět další lidé | Ano |
| Má přihlašování a soukromá data | Ano |
| Přijímá platby | Ano — alespoň kvůli vytváření plateb a příjmu webhooků o platbách |
| Používá placené AI nebo jiné API s tajným klíčem | Ano, aby klíč nebyl v prohlížeči |
Časté chyby a mylné představy
- Tajné klíče ve frontendu. Uvidí je kdokoli, kdo otevře vývojářské nástroje prohlížeče. Je to nejčastější vážná chyba v aplikacích postavených pomocí AI.
- Pravidla vynucovaná jen ve frontendu. Skrytí tlačítka „smazat“ pro uživatele, kteří nejsou admini, není ochrana; backend musí požadavek odmítnout.
- Předpoklad, že backend je „jen databáze“. Databáze data ukládá. Backend rozhoduje, kdo je smí číst a měnit a jak.
- Myšlenka, že JavaScript znamená frontend. JavaScript a TypeScript běží i na serverech s Node.js.
- Hledání viníka na špatné straně. Pokud stránka vypadá správně, ale data jsou špatná, problém bývá na backendu nebo v databázi, ne v designu.
- Přestavování. Portfolio nepotřebuje vlastní backend. Přidání jednoho přidává náklady a další pohyblivé části.
Co žádat od svého AI nástroje
- „Které části této aplikace běží v prohlížeči a které na serveru?“
- „Přesuň všechny klíče API na backend a čti je z proměnných prostředí.“
- „Ověřuj každý formulář na serveru i v prohlížeči.“
- „Vynuť na backendu, aby rezervace mohli mazat jen administrátoři.“
- „Stránka vypadá v pořádku, ale data se neukládají — zkontroluj logy backendu pro tento požadavek.“
- „Je to jednoduchý marketingový web; nech ho jen na frontendu, dokud nebudeme potřebovat backend.“
Frontend a backend v Mythexu
Nový projekt v Mythexu začíná frontendem postaveným na Vite, Reactu, TypeScriptu a Tailwindu a agent přidá backend, když ho vaše aplikace potřebuje. Nebo si můžete vyžádat samostatné API v Node, Pythonu (FastAPI), C# nebo Javě, které běží vedle frontendu ve stejném projektu. V náhledu můžete přepínat mezi webem a API serverem a publikování nasadí obě části, přičemž databáze a úložiště souborů se přidají podle potřeby. Dokumentace popisuje aplikace s více službami, návod webový hosting vysvětluje, kde každá část běží po spuštění, a šablony aplikací jsou rychlý způsob, jak vidět příklady full-stack aplikací.
Otázky
Jaký je rozdíl mezi frontendem a backendem?
Frontend je ta část aplikace, která běží v prohlížeči uživatele — stránky, tlačítka a formuláře, které vidí a klikají. Backend běží na serveru, který uživatel nikdy nevidí; ukládá data, uplatňuje obchodní pravidla, kontroluje oprávnění a komunikuje s dalšími službami.
Potřebuje každá aplikace backend?
Ne. Marketingový web, portfolio nebo jednoduchá vstupní stránka může být jen frontend. Jakmile aplikace potřebuje ukládat sdílená data, přihlašovat uživatele, přijímat platby nebo používat tajné klíče API, backend nějakého typu potřebuje.
Je HTML frontend, nebo backend?
HTML, CSS a JavaScript běžící v prohlížeči jsou frontend. JavaScript může běžet i na serveru pomocí Node.js, a pak je to backendový kód. O tom, co je frontend a co backend, nerozhoduje jazyk, ale místo, kde kód běží.
Co znamená full stack?
Full stack znamená pokrytí frontendu i backendu (a obvykle také databáze). Full-stack aplikace má všechny tři části; full-stack vývojář pracuje na všech z nich.