Frontend vs backend: Aký je rozdiel?
Frontend je tá časť aplikácie, ktorá beží v prehliadači používateľa — stránky, tlačidlá, formuláre a animácie, ktoré vidia a klikajú. Backend je časť, ktorá beží na serveri, ktorý používateľ nikdy nevidí: ukladá a načítava dáta, uplatňuje obchodné pravidlá, kontroluje, kto čo smie, a komunikuje s ďalšími službami, ako sú platby a e-mail. Oba diely medzi sebou komunikujú cez API a spolu s databázou tvoria aplikáciu typu „full-stack“.
Prečo to má význam pri tvorbe s AI
Keď opisujete aplikáciu AI nástroju, opisujete naraz obe polovice, aj keď si to možno neuvedomujete. Veta „zákazníci si môžu rezervovať termín“ znamená rezervačný formulár (frontend), pravidlá o tom, ktoré termíny sú voľné (backend), a miesto, kam sa rezervácie ukladajú (databáza).
Poznanie tohto rozdelenia pomáha v troch praktických ohľadoch:
- Bezpečnosť. Čokoľvek vo frontende môže používateľ vidieť a zmeniť. Pravidlá a tajomstvá musia žiť v backende.
- Ladenie. „Tlačidlo nereaguje“ a „tlačidlo reaguje, ale nič sa neuloží“ ukazujú na rôzne polovice. Ak poviete, čo presne vidíte, AI nájde príčinu rýchlejšie.
- Hosting a náklady. Stránka len s frontendom je lacná a jednoduchá na hosting. Backend musí bežať niekde, čo ovplyvňuje, koľko zaplatíte a ako sa aplikácia správa, keď je nečinná.
Každodenná analógia
Predstavte si reštauráciu.
Frontend je jedáleň: jedálny lístok, stoly, zariadenie a čašník, ktorý prijíma objednávku. Je navrhnutá pre zákazníkov a oni môžu vidieť a dotknúť sa všetkého.
Backend je kuchyňa a kancelária: kuchári, ktorí varia, sklad, pokladnica a pravidlá šéfa o tom, kto dostane zľavu. Zákazníci tam nevchádzajú a nemali by.
API je odovzdávacie okienko medzi nimi — pult, kde objednávky vchádzajú a jedlá vychádzajú v dohodnutom formáte. Databáza je sklad a kniha objednávok.
Zákazník môže prepísať svoj objednávkový lístok (frontend je pod jeho kontrolou), no kuchyňa stále rozhoduje, čo uvarí a koľko si to účtuje. Preto dôležité kontroly patria dozadu.
Čo robí každá strana
| Frontend | Backend | |
|---|---|---|
| Beží na | Zariadení používateľa, v prehliadači | Serveri, ktorý riadite vy (alebo váš hostingový poskytovateľ) |
| Hlavná úloha | Zobrazovať veci, zbierať vstupy, reagovať na kliknutia | Ukladať dáta, uplatňovať pravidlá, vynucovať oprávnenia, volať ďalšie služby |
| Môžu používatelia vidieť a meniť kód? | Áno — je stiahnutý do ich prehliadača | Nie |
| Môže obsahovať tajné API kľúče? | Nie | Áno, v premenných prostredia |
| Bežné technológie | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Čo sa pokazí | Rozloženie sa rozbije na mobile, tlačidlo nič nerobí, pomalá stránka | Dáta sa neuložia, zobrazia sa zlé dáta, chyby, bezpečnostné diery |
Niektoré frameworky hranicu rozmazávajú. Next.js napríklad umožňuje, aby jeden projekt obsahoval aj kód pre prehliadač, aj kód pre server. Myšlienka zostáva rovnaká: otázka je vždy kde táto časť beží?
Praktický príklad: rezervácia hodiny jogy
Tu je, čo sa stane, keď si niekto rezervuje hodinu jogy, krok za krokom.
| Krok | Kde | Čo sa stane |
|---|---|---|
| 1 | Frontend | Stránka s rozvrhom sa načíta a pýta sa backendu na hodiny tohto týždňa. |
| 2 | Backend | Načíta hodiny a rezervácie z databázy, vypočíta voľné miesta a vráti zoznam ako JSON. |
| 3 | Frontend | Zobrazí každú hodinu s časom, lektorom a počtom voľných miest. |
| 4 | Frontend | Používateľ vyberie hodinu a vyplní meno a e-mail. Formulár overí, že e-mail vyzerá správne (ako zdvorilosť, nie záruka). |
| 5 | Frontend → Backend | Odošle požiadavku POST /api/bookings cez API. |
| 6 | Backend | Znovu overí vstup, skontroluje, či hodina nie je plná, uloží rezerváciu a pomocou tajného kľúča požiada e-mailovú službu o potvrdenie. |
| 7 | Backend → Frontend | Vráti „rezervované“ alebo „prepáčte, je plné“. |
| 8 | Frontend | Zobrazí potvrdzovaciu obrazovku. |
Všimnite si kroky 4 a 6: vstup sa kontroluje dvakrát. Kontrola vo frontende dáva okamžitú spätnú väzbu; kontrola v backende je tá, ktorá sa naozaj počíta, pretože odhodlaný používateľ môže frontend úplne obísť.
Bežné pojmy vysvetlené
| Pojem | Význam |
|---|---|
| Klient / server | Klient je prehliadač (alebo aplikácia), ktorý posiela požiadavky; server na ne odpovedá. |
| UI | Používateľské rozhranie — obrazovky a ovládacie prvky. |
| API | Dohodnutý spôsob, akým sa frontend pýta backendu na dáta alebo akcie. |
| Endpoint | Jedna konkrétna adresa v API, napríklad /api/bookings. |
| Full stack | Frontend, backend a databáza spolu. Pozrite si čo je full-stack aplikácia. |
| Statická stránka | Frontend bez vlastného backendu; pre všetkých rovnaké súbory. |
| SPA | Single-page aplikácia: frontend, ktorý mení obsah v prehliadači namiesto načítavania nových stránok. |
| Renderovanie na strane servera (SSR) | Server zostaví HTML stránky skôr, než ju pošle, čo môže pomôcť rýchlosti aj SEO. |
| Premenné prostredia | Nastavenia a tajomstvá, ktoré dostáva backend za behu a ktoré sú mimo kódu. |
Potrebuje vaša aplikácia backend?
| Ak vaša aplikácia… | Potrebuje backend? |
|---|---|
| Zobrazuje informácie, ktoré sú pre všetkých rovnaké | Nie |
| Má kontaktný formulár, ktorý vám len posiela e-mail | Zvyčajne malý, alebo formulárová služba |
| Ukladá dáta, ktoré uvidia ostatní ľudia | Áno |
| Má prihlasovanie a súkromné dáta | Áno |
| Prijíma platby | Áno — aspoň na vytváranie platieb a prijímanie webhookov o platbách |
| Používa platené AI alebo iné API s tajným kľúčom | Áno, aby kľúč zostal mimo prehliadača |
Bežné chyby a mylné predstavy
- Tajné kľúče vo frontende. Uvidí ich ktokoľvek, kto otvorí vývojárske nástroje prehliadača. Toto je najčastejšia vážna chyba v aplikáciách vytvorených s AI.
- Vynucovanie pravidiel len vo frontende. Skrytie tlačidla „vymazať“ pre neadministrátorov nie je ochrana; backend musí požiadavku odmietnuť.
- Predpoklad, že backend je „len databáza“. Databáza ukladá dáta. Backend rozhoduje, kto ich smie čítať a meniť a ako.
- Myslieť si, že JavaScript znamená frontend. JavaScript a TypeScript bežia aj na serveroch, s Node.js.
- Obviňovať nesprávnu polovicu. Ak stránka vyzerá správne, ale dáta sú zlé, problém je zvyčajne v backende alebo databáze, nie v dizajne.
- Predimenzovanie. Portfólio nepotrebuje vlastný backend. Pridanie znamená vyššie náklady a viac pohyblivých častí.
Čo požiadať od svojho AI nástroja
- „Ktoré časti tejto aplikácie bežia v prehliadači a ktoré na serveri?“
- „Presuň všetky API kľúče do backendu a čítaj ich z premenných prostredia.“
- „Over každý formulár na serveri aj v prehliadači.“
- „Vynuť v backende, aby mohli rezervácie mazať iba administrátori.“
- „Stránka vyzerá v poriadku, ale dáta sa neukladajú — skontroluj logy backendu pre túto požiadavku.“
- „Toto je jednoduchá marketingová stránka; nechaj ju len s frontendom, pokiaľ nebudeme potrebovať backend.“
Frontend a backend v Mythexe
Nový projekt v Mythexe začína frontendom z Vite, Reactu, TypeScriptu a Tailwindu a agent pridá backend, keď ho vaša aplikácia potrebuje. Alebo si môžete vyžiadať samostatné API v Node, Pythone (FastAPI), C# alebo Jave, bežiace vedľa frontendu v tom istom projekte. V náhľade môžete prepínať medzi webovou stránkou a API serverom a publikovanie nasadí oboje; databáza a úložisko súborov sa pridajú podľa potreby. Dokumentácia vysvetľuje viacservisové aplikácie, sprievodca webovým hostingom popisuje, kde každá polovica beží po zverejnení, a šablóny aplikácií sú rýchly spôsob, ako vidieť príklady full-stack aplikácií.
Otázky
Aký je rozdiel medzi frontendom a backendom?
Frontend je tá časť aplikácie, ktorá beží v prehliadači používateľa — stránky, tlačidlá a formuláre, ktoré vidia a klikajú. Backend beží na serveri, ktorý používateľ nikdy nevidí; ukladá dáta, uplatňuje obchodné pravidlá, kontroluje oprávnenia a komunikuje s ďalšími službami.
Potrebuje každá aplikácia backend?
Nie. Marketingová stránka, portfólio alebo jednoduchá vstupná stránka môže byť len s frontendom. Akonáhle aplikácia potrebuje ukladať zdieľané dáta, prihlasovať používateľov, prijímať platby alebo používať tajné API kľúče, potrebuje nejaký backend.
Je HTML frontend alebo backend?
HTML, CSS a JavaScript bežiace v prehliadači sú frontend. JavaScript však môže bežať aj na serveri pomocou Node.js, kde je to backendový kód. Nerozhoduje jazyk, ale to, kde kód beží.
Čo znamená full stack?
Full stack znamená pokrytie frontendu aj backendu (a zvyčajne aj databázy). Full-stack aplikácia má všetky tri časti; full-stack vývojár pracuje na všetkých.