Frontend i backend: u čemu je razlika?
Frontend je deo aplikacije koji radi u korisnikovom pregledaču — stranice, dugmad, obrasci i animacije koje korisnik vidi i na koje klikne. Backend je deo koji radi na serveru koji korisnik nikada ne vidi: on čuva i preuzima podatke, primenjuje poslovna pravila, proverava ko sme šta da radi i komunicira sa drugim servisima, kao što su plaćanja i imejl. Ta dva dela razgovaraju preko API-ja, a zajedno sa bazom podataka čine „full-stack“ aplikaciju.
Zašto je to važno kada pravite nešto uz AI
Kada AI alatu opišete aplikaciju, opisujete obe strane odjednom, bilo da to primećujete ili ne. Rečenica „kupci mogu da rezervišu termin“ znači obrazac za rezervaciju (frontend), pravila o tome koji su termini slobodni (backend) i mesto gde se rezervacije čuvaju (baza podataka).
Znanje o toj podeli pomaže na tri praktična načina:
- Bezbednost. Sve što je u frontendu korisnik može da vidi i menja. Pravila i tajne moraju da žive u backendu.
- Otklanjanje grešaka. „Dugme ne reaguje“ i „dugme reaguje, ali ništa se ne čuva“ upućuju na različite delove aplikacije. Ako kažete šta vidite, AI brže pronalazi uzrok.
- Hosting i trošak. Sajt samo sa frontendom jeftin je i jednostavan za hosting. Backend mora negde da radi, što utiče na to koliko plaćate i kako se aplikacija ponaša kada miruje.
Svakodnevno poređenje
Zamislite restoran.
Frontend je sala: jelovnik, stolovi, enterijer i konobar koji prima narudžbinu. Pravljen je za goste, i oni mogu da vide i dodirnu sve što tu postoji.
Backend je kuhinja i kancelarija: kuvari koji spremaju hranu, magacin, kasa i pravila menadžera o tome ko dobija popust. Gosti tamo ne ulaze, i ne bi smeli da mogu.
API je prolaz između njih — pult na kome narudžbine ulaze, a jela izlaze, u dogovorenom formatu. Baza podataka je magacin i knjiga narudžbina.
Gost može da prepiše svoj listić (frontend je pod njegovom kontrolom), ali kuhinja i dalje odlučuje šta će da kuva i koliko šta košta. Zato se važne provere moraju nalaziti pozadi.
Šta radi svaki deo
| Frontend | Backend | |
|---|---|---|
| Radi na | Uređaju korisnika, u pregledaču | Serveru koji vi (ili vaš hosting) kontrolišete |
| Glavni posao | Prikaz, prikupljanje unosa, reakcija na klikove | Čuvanje podataka, primena pravila, provera dozvola, pozivi drugih servisa |
| Mogu li korisnici da vide i menjaju kod? | Da — preuzima se u njihov pregledač | Ne |
| Mogu li da čuvaju tajne API ključeve? | Ne | Da, u promenljivim 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 telefonu, dugme ne radi, spora stranica | Podaci se ne čuvaju, prikazuju se pogrešni podaci, greške, bezbednosne rupe |
Neki okviri brišu granicu između dva dela. Next.js, na primer, dozvoljava da jedan projekat sadrži i kod za pregledač i kod za server. Ideja i dalje ostaje ista: pitanje je uvek gde se ovaj deo izvršava?
Praktičan primer: rezervacija časa joge
Evo šta se dešava kada neko rezerviše čas joge, korak po korak.
| Korak | Gde | Šta se dešava |
|---|---|---|
| 1 | Frontend | Stranica sa rasporedom se učitava i traži od backenda časove za ovu nedelju. |
| 2 | Backend | Čita časove i rezervacije iz baze, računa koliko mesta je ostalo i vraća listu kao JSON. |
| 3 | Frontend | Prikazuje svaki čas sa vremenom, predavačem i brojem slobodnih mesta. |
| 4 | Frontend | Korisnik bira čas i unosi ime i imejl. Obrazac proverava da li imejl izgleda ispravno (kao ljubaznost, ne kao garancija). |
| 5 | Frontend → Backend | Šalje zahtev POST /api/bookings preko API-ja. |
| 6 | Backend | Ponovo proverava unos, proverava da čas nije pun, čuva rezervaciju i preko tajnog ključa traži od imejl servisa da pošalje potvrdu. |
| 7 | Backend → Frontend | Vraća „rezervisano“ ili „žao nam je, popunjeno je“. |
| 8 | Frontend | Prikazuje ekran sa potvrdom. |
Primetite korake 4 i 6: unos se proverava dva puta. Provera na frontendu daje trenutnu povratnu informaciju; provera na backendu je ona koja zaista važi, jer odlučan korisnik može potpuno da zaobiđe frontend.
Često korišćeni pojmovi
| Pojam | Značenje |
|---|---|
| Klijent / server | Klijent je pregledač (ili aplikacija) koji šalje zahteve; server na njih odgovara. |
| UI | Korisnički interfejs — ekrani i kontrole. |
| API | Dogovoren način na koji frontend traži od backenda podatke ili radnje. |
| Endpoint | Jedna konkretna adresa na API-ju, na primer /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 | Aplikacija na jednoj stranici: frontend koji menja sadržaj u pregledaču umesto da učitava nove stranice. |
| Renderovanje na serveru (SSR) | Server pravi HTML stranice pre slanja, što može da pomogne brzini i SEO-u. |
| Promenljive okruženja | Podešavanja i tajne koje se backendu daju u trenutku rada, izvan 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 vam samo šalje imejl | Obično mali, ili servis za obrasce |
| Čuva podatke koje će drugi ljudi videti | Da |
| Ima prijavu i privatne podatke | Da |
| Prima uplate | Da — bar za kreiranje plaćanja i prijem webhook obaveštenja o uplati |
| Koristi plaćeni AI ili drugi API sa tajnim ključem | Da, da bi ključ ostao van pregledača |
Česte greške i zablude
- Stavljanje tajnih ključeva u frontend. Svako ko otvori alatke za developere u pregledaču može da ih vidi. Ovo je najčešća ozbiljna greška u aplikacijama pravljenim uz AI.
- Provera pravila samo na frontendu. Sakrivanje dugmeta „obriši“ za korisnike koji nisu administratori nije zaštita; backend mora da odbije zahtev.
- Pretpostavka da je backend „samo baza“. Baza čuva podatke. Backend odlučuje ko ih može da čita i menja i na koji način.
- Misao da JavaScript znači frontend. JavaScript i TypeScript rade i na serverima, uz Node.js.
- Krivljenje pogrešnog dela. Ako stranica izgleda dobro, a podaci nisu tačni, problem je obično u backendu ili bazi, a ne u dizajnu.
- Previše gradnje. Portfolio ne treba prilagođen backend. Dodavanje jednog donosi trošak i nove pokretne delove.
Šta tražiti od AI alata za pravljenje aplikacije
- „Koji delovi ove aplikacije rade u pregledaču, a koji na serveru?“
- „Premesti sve API ključeve u backend i čitaj ih iz promenljivih okruženja.“
- „Proveri svaki obrazac i na serveru, a ne samo u pregledaču.“
- „Na backendu zabrani brisanje rezervacija svima osim administratorima.“
- „Stranica izgleda dobro, ali podaci se ne čuvaju — proveri logove backenda za taj zahtev.“
- „Ovo je jednostavan marketinški sajt; neka ostane samo frontend ako nam backend nije potreban.“
Frontend i backend u Mythex-u
Novi Mythex projekat kreće od Vite, React, TypeScript i Tailwind frontenda, a agent dodaje backend kada ga vaša aplikacija zatreba. Možete i tražiti zaseban API u Node.js, Python (FastAPI), C# ili Java koji radi uz frontend u istom projektu. U pregledu možete da prelazite između sajta i API servera, a objavljivanje postavlja oba dela, uz bazu i skladište fajlova kada zatreba. U dokumentaciji su opisane aplikacije sa više servisa, vodič o veb hostingu objašnjava gde svaki deo radi kada je aplikacija uživo, a šabloni aplikacija su brz način da vidite primere full-stack aplikacija.
Pitanja
Koja je razlika između frontenda i backenda?
Frontend je deo aplikacije koji radi u korisnikovom pregledaču — stranice, dugmad i obrasci koje korisnik vidi i na koje klikne. Backend radi na serveru koji korisnik nikada ne vidi; on čuva podatke, primenjuje poslovna pravila, proverava dozvole i komunicira sa drugim servisima.
Da li svaka aplikacija treba backend?
Ne. Marketinški sajt, portfolio ili jednostavna landing stranica mogu biti samo frontend. Čim aplikacija treba da čuva podatke koje dele drugi ljudi, da prijavljuje korisnike, prima uplate ili koristi tajne API ključeve, potreban joj je neki oblik backenda.
Da li je HTML frontend ili backend?
HTML, CSS i JavaScript koji rade u pregledaču su frontend. JavaScript može raditi i na serveru uz Node.js, i tada je to backend kod. Jezik ne određuje o čemu se radi; određuje to mesto na kome se kod izvršava.
Šta znači full stack?
Full stack znači da pokrivate i frontend i backend (a obično i bazu podataka). Full-stack aplikacija ima sva tri dela, a full-stack programer radi na svima njima.