Frontend vs backend: u čemu je razlika?
Frontend je dio aplikacije koji radi u korisnikovu pregledniku — stranice, gumbi, obrasci i animacije koje korisnik vidi i klikne. Backend je dio koji radi na serveru koji korisnik nikada ne vidi: pohranjuje i dohvaća podatke, primjenjuje poslovna pravila, provjerava tko smije što raditi i komunicira s drugim servisima, poput plaćanja i e-pošte. Njih dvoje međusobno komuniciraju putem API-ja, a zajedno s bazom podataka čine „full-stack“ aplikaciju.
Zašto je to važno kad gradite s AI-jem
Kad AI alatu opišete aplikaciju, opisujete obje strane odjednom, bez obzira na to jeste li to svjesni. Rečenica „Kupci mogu rezervirati termin“ znači obrazac za rezervaciju (frontend), pravila o tome koji su termini slobodni (backend) i mjesto na kojem se rezervacije spremaju (baza podataka).
Poznavanje te podjele pomaže na tri praktična načina:
- Sigurnost. Sve što je u frontendu korisnik može vidjeti i promijeniti. Pravila i tajne moraju živjeti u backendu.
- Otklanjanje grešaka. „Gumb ne reagira“ i „gumb reagira, ali ništa se ne spremi“ upućuju na različite dijelove aplikacije, a ako kažete koju situaciju vidite, AI će brže pronaći uzrok.
- Hosting i trošak. Stranica samo s frontendom jeftina je i jednostavna za hosting. Backend se mora negdje izvoditi, što utječe na to koliko plaćate i kako se aplikacija ponaša kad miruje.
Svakodnevna usporedba
Zamislite restoran.
Frontend je blagovaonica: jelovnik, stolovi, dekor i konobar koji prima narudžbu. Dizajniran je za goste, a oni mogu vidjeti i dotaknuti sve.
Backend je kuhinja i ured: kuhari koji kuhaju, skladište, blagajna i pravila menadžera o tome tko dobiva popust. Gosti nikada ne ulaze unutra i ne bi smjeli moći.
API je prolaz između njih — pult na kojem se narudžbe predaju i na kojem izlaze tanjuri, u dogovorenom formatu. Baza podataka je skladište i knjiga narudžbi.
Gost može prepisati svoj listić za narudžbu (frontend je pod njegovom kontrolom), ali kuhinja i dalje odlučuje što će skuhati i koliko će naplatiti. Zato se važne provjere nalaze u pozadini.
Što radi koja strana
| Frontend | Backend | |
|---|---|---|
| Gdje radi | Na uređaju korisnika, u pregledniku | Na serveru koji vi (ili vaš hosting) kontrolirate |
| Glavni posao | Prikazuje sadržaj, prikuplja unos, reagira na klikove | Pohranjuje podatke, primjenjuje pravila, provjerava prava, poziva druge servise |
| Mogu li korisnici vidjeti i mijenjati kod? | Da — preuzima se u njihov preglednik | Ne |
| Mogu li sadržavati tajne API ključeve? | Ne | Da, u varijablama okruženja |
| Uobičajene tehnologije | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Što obično pođe po zlu | Raspored se lomi na mobitelu, gumb ne radi, spora stranica | Podaci se ne spremaju, prikazuju se krivi podaci, greške, sigurnosne rupe |
Neki okviri brišu tu granicu. Next.js, na primjer, omogućuje da jedan projekt sadrži i kod za preglednik i kod za server. Ideja ostaje ista: uvijek je pitanje gdje se ovaj dio izvodi?
Primjer iz prakse: rezervacija sata joge
Evo što se događa kad netko rezervira sat joge, korak po korak.
| Korak | Gdje | Što se događa |
|---|---|---|
| 1 | Frontend | Stranica s rasporedom se učitava i od backenda traži termine za ovaj tjedan. |
| 2 | Backend | Čita termine i rezervacije iz baze, računa slobodna mjesta i vraća popis kao JSON. |
| 3 | Frontend | Prikazuje svaki termin s vremenom, predavačem i brojem slobodnih mjesta. |
| 4 | Frontend | Korisnik odabire termin i upisuje ime i e-poštu. Obrazac provjerava izgleda li e-pošta ispravno (kao uslugu, a ne kao jamstvo). |
| 5 | Frontend → Backend | Šalje se zahtjev POST /api/bookings putem API-ja. |
| 6 | Backend | Ponovno provjerava unos, provjerava nije li termin pun, sprema rezervaciju i pomoću tajnog ključa traži od servisa e-pošte da pošalje potvrdu. |
| 7 | Backend → Frontend | Vraća odgovor „rezervirano“ ili „nažalost, pun je“. |
| 8 | Frontend | Prikazuje ekran s potvrdom. |
Primijetite korake 4 i 6: unos se provjerava dvaput. Provjera u frontendu daje trenutnu povratnu informaciju; provjera u backendu je ona koja zaista vrijedi, jer odlučan korisnik može zaobići frontend u potpunosti.
Uobičajeni pojmovi objašnjeni
| Pojam | Značenje |
|---|---|
| Klijent / server | Klijent je preglednik (ili aplikacija) koji šalje zahtjeve; server na njih odgovara. |
| UI | Korisničko sučelje — ekrani i kontrole. |
| API | Dogovoreni način na koji frontend traži od backenda podatke ili radnje. |
| Endpoint | Jedna određena adresa na API-ju, poput /api/bookings. |
| Full stack | Frontend + backend + baza zajedno. Pogledajte što je full-stack aplikacija. |
| Statička stranica | Frontend bez vlastitog backenda; isti datoteke za sve. |
| SPA | Single-page aplikacija: frontend koji mijenja sadržaj stranice u pregledniku umjesto da učitava nove stranice. |
| Server-side rendering (SSR) | Server izrađuje HTML stranice prije slanja, što može pomoći brzini i SEO-u. |
| Varijable okruženja | Postavke i tajne koje se backendu daju tijekom rada, a drže se izvan koda. |
Treba li vaša aplikacija backend?
| Ako vaša aplikacija… | Treba li backend? |
|---|---|
| Prikazuje informacije koje su iste za sve | Ne |
| Ima obrazac za kontakt koji vam samo šalje e-poštu | Obično mali, ili usluga za obrasce |
| Sprema podatke koje drugi ljudi vide | Da |
| Ima prijave i privatne podatke | Da |
| Prima uplate | Da — barem za izradu naplate i primanje webhook obavijesti o plaćanju |
| Koristi plaćeni AI ili drugi API s tajnim ključem | Da, kako bi ključ ostao izvan preglednika |
Uobičajene greške i zablude
- Stavljanje tajnih ključeva u frontend. Vidljivi su svakome tko otvori alate za programere u pregledniku. To je najčešća ozbiljna greška u aplikacijama izrađenima s AI-jem.
- Provođenje pravila samo u frontendu. Skrivanje gumba „obriši“ za korisnike koji nisu administratori nije zaštita; backend mora odbiti zahtjev.
- Pretpostavka da je backend „samo baza“. Baza podataka sprema podatke. Backend odlučuje tko ih smije čitati i mijenjati i na koji način.
- Misliti da JavaScript znači frontend. JavaScript i TypeScript rade i na serverima, uz Node.js.
- Okrivljavanje krive strane. Ako stranica izgleda ispravno, ali podaci nisu točni, problem je obično u backendu ili bazi, a ne u dizajnu.
- Previše graditi. Portfolio ne treba vlastiti backend. Dodavanje jednog donosi trošak i dodatne pokretne dijelove.
Što tražiti od AI alata za izradu
- „Koji dijelovi ove aplikacije rade u pregledniku, a koji na serveru?“
- „Premjesti sve API ključeve u backend i čitaj ih iz varijabli okruženja.“
- „Provjeri svaki obrazac na serveru, a ne samo u pregledniku.“
- „Na backendu osiguraj da samo administratori mogu brisati rezervacije.“
- „Stranica izgleda dobro, ali podaci se ne spremaju — provjeri zapisnik backenda za taj zahtjev.“
- „Ovo je jednostavna marketinška stranica; neka ostane samo frontend dok ne trebamo backend.“
Frontend i backend u Mythexu
Novi Mythex projekt počinje s frontendom na Vite, React, TypeScript i Tailwind tehnologijama, a agent dodaje backend kad ga vaša aplikacija zatraži — ili možete zatražiti zaseban API u Node.js, Pythonu (FastAPI), C# ili Javi, koji radi uz frontend u istom projektu. U pregledu možete prebacivati između web stranice i API servera, a objava postavlja oba, uz bazu podataka i pohranu datoteka kad su potrebni. Dokumentacija objašnjava aplikacije s više servisa, vodič o web hostingu pokazuje gdje se svaki dio izvodi kad je aplikacija uživo, a predlošci aplikacija brz su način da vidite primjere full-stack aplikacija.
Pitanja
Koja je razlika između frontenda i backenda?
Frontend je dio aplikacije koji radi u korisnikovu pregledniku — stranice, gumbi i obrasci koje korisnik vidi i s kojima komunicira. Backend radi na serveru koji korisnik nikada ne vidi; on pohranjuje podatke, primjenjuje poslovna pravila, provjerava prava pristupa i komunicira s drugim servisima.
Treba li svaka aplikacija backend?
Ne. Marketinška stranica, portfolio ili jednostavna početna stranica može biti samo frontend. Čim aplikacija treba spremati zajedničke podatke, prijavljivati korisnike, naplaćivati plaćanja ili koristiti tajne API ključeve, treba neku vrstu backenda.
Je li HTML frontend ili backend?
HTML, CSS i JavaScript koji rade u pregledniku pripadaju frontendu. JavaScript može raditi i na serveru uz Node.js, i tada je to backend kod. O tome ne odlučuje jezik, nego mjesto na kojem se kod izvršava.
Što znači full stack?
Full stack znači pokrivanje i frontenda i backenda (i obično baze podataka). Full-stack aplikacija ima sva tri dijela, a full-stack programer radi na svima njima.