Frontend vs backend: u čemu je razlika?
Frontend je dio aplikacije koji se izvršava u korisnikovom pregledniku — stranice, dugmad, obrasci i animacije koje korisnik vidi i klikne. Backend je dio koji radi na serveru koji korisnik nikad ne vidi: on čuva i vraća podatke, primjenjuje poslovna pravila, provjerava ko smije šta da radi i komunicira s drugim servisima, poput plaćanja i e-pošte. Njih dvoje komuniciraju putem API-ja, i zajedno s bazom podataka čine aplikaciju „full stack“.
Zašto je to važno kad pravite s AI-jem
Kada AI alatu opišete aplikaciju, opisujete obje polovine odjednom, bilo da to primjećujete ili ne. „Korisnici mogu rezervisati termin“ znači obrazac za rezervaciju (frontend), pravila o tome koji su termini slobodni (backend) i mjesto gdje se rezervacije čuvaju (baza podataka).
Poznavanje 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 biti na backendu.
- Otklanjanje grešaka. „Dugme ne reaguje“ i „dugme reaguje, ali ništa se ne sačuva“ ukazuju na različite polovine, a kada kažete šta vidite, AI brže pronalazi uzrok.
- Hosting i trošak. Sajt samo s frontendom je jeftin i jednostavan za hosting. Backend se mora negdje izvršavati, što utiče na to koliko plaćate i kako se aplikacija ponaša kada miruje.
Svakodnevna analogija
Zamislite restoran.
Frontend je sala: jelovnik, stolovi, enterijer, konobar koji prima narudžbu. Dizajnirana je za goste, i oni mogu vidjeti i dotaknuti sve u njoj.
Backend je kuhinja i kancelarija: kuvari koji kuvaju, magacin, kasa, pravila menadžera o tome ko dobija popust. Gosti tamo ne ulaze, i ne bi smjeli.
API je prolaz između njih — šalter na kojem narudžbe ulaze a tanjiri izlaze, u dogovorenom formatu. Baza podataka je magacin i knjiga narudžbi.
Gost može prepisati svoju narudžbu (frontend je pod njegovom kontrolom), ali kuhinja i dalje odlučuje šta će kuvati i koliko naplaćuje. Zato se važne provjere nalaze pozadi.
Šta radi svaka strana
| Frontend | Backend | |
|---|---|---|
| Radi na | Uređaju korisnika, u pregledniku | Serveru koji vi (ili vaš hosting) kontrolišete |
| Glavni posao | Prikaz stvari, prikupljanje unosa, reakcija na klikove | Čuvanje podataka, primjena pravila, provjera dozvola, pozivanje drugih servisa |
| Mogu li korisnici vidjeti i mijenjati kod? | Da — preuzima se u njihov preglednik | Ne |
| Mogu li držati 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 |
| Šta obično pođe po zlu | Raspored se lomi na mobilnom, dugme ne radi, spora stranica | Podaci se ne čuvaju, prikazuju se pogrešni podaci, greške, sigurnosne rupe |
Neki okviri brišu granicu. Next.js, na primjer, dozvoljava da jedan projekat sadrži i kod za preglednik i kod za server. Ideja ostaje ista: pitanje je uvijek gdje se ovaj dio izvršava?
Primjer: rezervacija časa
Evo šta se dešava kada neko rezerviše čas joge, korak po korak.
| Korak | Gdje | Šta se dešava |
|---|---|---|
| 1 | Frontend | Stranica s rasporedom se učitava i traži od backenda časove za ovu sedmicu. |
| 2 | Backend | Čita časove i rezervacije iz baze, računa slobodna mjesta i vraća spisak kao JSON. |
| 3 | Frontend | Prikazuje svaki čas s vremenom, trenerom i slobodnim mjestima. |
| 4 | Frontend | Korisnik bira čas i unosi ime i e-poštu. Obrazac provjerava da e-pošta izgleda ispravno (ljubaznost, ne garancija). |
| 5 | Frontend → Backend | Šalje zahtjev POST /api/bookings preko API-ja. |
| 6 | Backend | Ponovo provjerava unos, provjerava da čas nije pun, čuva rezervaciju i traži od servisa e-pošte da pošalje potvrdu koristeći tajni ključ. |
| 7 | Backend → Frontend | Vraća „rezervisano“ ili „žao nam je, popunjeno je“. |
| 8 | Frontend | Prikazuje ekran s potvrdom. |
Primijetite korake 4 i 6: unos se provjerava dvaput. Provjera na frontendu daje trenutnu povratnu informaciju; provjera na backendu je ona koja se zaista računa, jer odlučan korisnik može potpuno zaobići frontend.
Uobičajeni pojmovi objašnjeni
| Pojam | Značenje |
|---|---|
| Klijent / server | Klijent je preglednik (ili aplikacija) koji šalje zahtjeve; server na njih odgovara. |
| UI | Korisnički interfejs — ekrani i kontrole. |
| API | Dogovoreni način na koji frontend traži od backenda podatke ili radnje. |
| Endpoint | Jedna konkretna adresa na API-ju, poput /api/bookings. |
| Full stack | Frontend + backend + baza zajedno. Pogledajte šta je full-stack aplikacija. |
| Statički sajt | Frontend bez sopstvenog backenda; isti fajlovi za sve. |
| SPA | Single-page aplikacija: frontend koji ažurira stranicu u pregledniku umjesto da učitava nove stranice. |
| Server-side rendering (SSR) | Server gradi HTML stranice prije slanja, što može pomoći brzini i SEO-u. |
| Varijable okruženja | Postavke i tajne koje se daju backendu u vrijeme izvršavanja, a čuvaju se van koda. |
Treba li vašoj aplikaciji backend?
| Ako vaša aplikacija… | Treba li backend? |
|---|---|
| Prikazuje informacije koje su iste za sve | Ne |
| Ima kontakt obrazac koji samo šalje e-poštu vama | Obično mali, ili servis za obrasce |
| Čuva podatke koje drugi ljudi će vidjeti | Da |
| Ima prijave i privatne podatke | Da |
| Naplaćuje uplate | Da — barem za kreiranje plaćanja i primanje webhook obavještenja o uplatama |
| Koristi plaćeni AI ili drugi API s tajnim ključem | Da, da ključ ostane van preglednika |
Uobičajene greške i zablude
- Stavljanje tajnih ključeva u frontend. Vidjet će ih svako ko otvori alatke za programere u pregledniku. Ovo je najčešća ozbiljna greška u aplikacijama pravljenim uz AI.
- Provođenje pravila samo na frontendu. Sakrivanje dugmeta „obriši“ za korisnike koji nisu admini nije zaštita; backend mora odbiti zahtjev.
- Pretpostavka da je backend „samo baza podataka“. Baza čuva podatke. Backend odlučuje ko ih može čitati i mijenjati i na koji način.
- Mišljenje da JavaScript znači frontend. JavaScript i TypeScript rade i na serverima, uz Node.js.
- Krivljenje pogrešne polovine. Ako stranica izgleda ispravno, ali su podaci pogrešni, problem je obično u backendu ili bazi, a ne u dizajnu.
- Pretjerano građenje. Portfolio ne treba posebni backend. Dodavanje jednog donosi trošak i pokretne dijelove.
Šta tražiti od AI alata
- „Koji dijelovi ove aplikacije rade u pregledniku, a koji na serveru?“
- „Premjesti sve API ključeve na backend i čitaj ih iz varijabli okruženja.“
- „Provjeravaj svaki obrazac i na serveru, a ne samo u pregledniku.“
- „Na backendu osiguraj da samo admini mogu brisati rezervacije.“
- „Stranica izgleda u redu, ali podaci se ne čuvaju — provjeri logove backenda za taj zahtjev.“
- „Ovo je jednostavan marketing sajt; neka ostane samo frontend osim ako nam ne treba backend.“
Frontend i backend u Mythexu
Novi Mythex projekat počinje s frontendom na Vite, React, TypeScript i Tailwind osnovi, a agent dodaje backend kada ga vaša aplikacija zatraži — ili možete tražiti zaseban API u Node.js, Python (FastAPI), C# ili Java koji radi uz frontend u istom projektu. U pregledu možete prebacivati između sajta i API servera, a objavljivanje postavlja oba, uz bazu i skladište fajlova kada zatreba. Dokumentacija objašnjava aplikacije s više servisa, vodič o web hostingu pokazuje gdje se svaka polovina izvršava kada je aplikacija objavljena, a šabloni aplikacija su brz način da vidite primjere full-stack aplikacija.
Pitanja
Koja je razlika između frontenda i backenda?
Frontend je dio aplikacije koji se izvršava u korisnikovom pregledniku — stranice, dugmad i obrasci koje korisnik vidi. Backend radi na serveru koji korisnik nikad ne vidi; on čuva podatke, primjenjuje poslovna pravila, provjerava dozvole i komunicira s drugim servisima.
Treba li svaka aplikacija backend?
Ne. Sajt za marketing, portfolio ili jednostavna landing stranica može imati samo frontend. Čim aplikaciji treba čuvati zajedničke podatke, prijavljivati korisnike, naplaćivati uplate ili koristiti tajne API ključeve, treba neka vrsta backenda.
Je li HTML frontend ili backend?
HTML, CSS i JavaScript koji se izvršavaju u pregledniku su frontend. JavaScript se može izvršavati i na serveru pomoću Node.js-a, i tada je to backend kod. Jezik ne odlučuje; odlučuje mjesto na kojem se kod izvršava.
Šta znači full stack?
Full stack znači pokrivati i frontend i backend (i obično bazu podataka). Full-stack aplikacija ima sva tri dijela; full-stack programer radi na svima njima.