Frontend in backend: v čem je razlika?
Frontend je del aplikacije, ki teče v uporabnikovem brskalniku – strani, gumbi, obrazci in animacije, ki jih uporabnik vidi in na katere klika. Backend je del, ki teče na strežniku, ki ga uporabnik nikoli ne vidi: shranjuje in pridobiva podatke, uveljavlja poslovna pravila, preverja, kdo sme kaj narediti, in komunicira z drugimi storitvami, kot so plačila in e-pošta. Oba se povezujeta prek API-ja, skupaj s podatkovno bazo pa tvorita aplikacijo „full stack“.
Zakaj je to pomembno, ko gradite z AI
Ko AI graditelju opišete aplikacijo, opisujete obe polovici hkrati, tudi če se tega morda ne zavedate. „Stranke lahko rezervirajo termin“ pomeni obrazec za rezervacijo (frontend), pravila o tem, kateri termini so prosti (backend), in prostor, kamor se rezervacije shranijo (podatkovna baza).
Poznavanje delitve vam v praksi pomaga na tri načine:
- Varnost. Vse, kar je v frontendu, lahko uporabnik vidi in spremeni. Pravila in skrivnosti morajo biti v backendu.
- Odpravljanje napak. „Gumb se ne odzove“ in „gumb se odzove, a nič se ne shrani“ kažeta na različni polovici. Če povesta, kaj vidite, AI hitreje najde vzrok.
- Gostovanje in stroški. Statična stran samo s frontendom je poceni in preprosta za gostovanje. Backend mora teči nekje, kar vpliva na to, koliko plačate in kako se aplikacija obnaša, ko ni v uporabi.
Vsakdanja primerjava
Predstavljajte si restavracijo.
Frontend je jedilnica: jedilni list, mize, opremljenost in natakar, ki sprejme naročilo. Zasnovan je za goste, ki vse to vidijo in se z vsem lahko dotaknejo.
Backend je kuhinja in pisarna: kuharji, zaloga, blagajna in pravila vodje o tem, kdo dobi popust. Gostje tja ne hodijo in tja tudi ne smejo.
API je prehod med njima – pult, kjer naročila vstopajo in kjer prihajajo krožniki, v dogovorjeni obliki. Podatkovna baza je skladišče in knjiga naročil.
Gost lahko popravi svoj listek za naročilo (frontend je pod njegovim nadzorom), kuhinja pa še vedno odloča, kaj bo skuhala in koliko bo to stalo. Zato morajo pomembna preverjanja biti zadaj.
Kaj počne vsaka stran
| Frontend | Backend | |
|---|---|---|
| Teče na | Uporabnikovi napravi, v brskalniku | Strežniku, ki ga nadzorujete vi ali vaš gostitelj |
| Glavna naloga | Prikazovati stvari, zbirati vnos, odzivati se na klike | Shranjevati podatke, uveljavljati pravila, nadzorovati pravice, klicati druge storitve |
| Ali lahko uporabniki vidijo in spremenijo kodo? | Da – naloži se v njihov brskalnik | Ne |
| Ali lahko hrani skrivne API ključe? | Ne | Da, v okoljskih spremenljivkah |
| Pogoste tehnologije | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Kaj se pogosto pokvari | Postavitev se zlomi na telefonu, gumb ne deluje, počasna stran | Podatki se ne shranijo, napačni podatki na zaslonu, napake, varnostne luknje |
Nekatera ogrodja mejo med njima zabrišejo. Next.js na primer omogoča, da en projekt vsebuje tako kodo za brskalnik kot kodo za strežnik. Ideja ostaja enaka: vprašanje je vedno kje ta del teče?
Delovni primer: rezervacija joge
Tukaj je, kaj se zgodi, ko nekdo rezervira urico joge, korak za korakom.
| Korak | Kje | Kaj se zgodi |
|---|---|---|
| 1 | Frontend | Stran z urnikom se naloži in od backenda zahteva seznam uric za ta teden. |
| 2 | Backend | Iz podatkovne baze prebere urice in rezervacije, izračuna proste mesta in vrne seznam kot JSON. |
| 3 | Frontend | Prikaže vsako uro s časom, učiteljem in prostimi mesti. |
| 4 | Frontend | Uporabnik izbere uro in vpiše ime ter e-pošto. Obrazec preveri, ali je e-pošta videti veljavna (zgolj za udobje, ne jamstvo). |
| 5 | Frontend → Backend | Pošlje zahtevo POST /api/bookings prek API-ja. |
| 6 | Backend | Vnos znova preveri, preveri, ali uro še ni polna, shrani rezervacijo in z uporabo skrivnega ključa pošto za potrditev pošlje prek e-poštne storitve. |
| 7 | Backend → Frontend | Vrne „rezervirano“ ali „žal, je polno“. |
| 8 | Frontend | Prikaže potrditveni zaslon. |
Opazite koraka 4 in 6: vnos se preveri dvakrat. Preverjanje v frontendu daje takojšnje povratne informacije; preverjanje v backendu pa je tisto, ki res šteje, ker se lahko odločen uporabnik frontenda povsem izogne.
Pogosti pojmi, pojasnjeni
| Pojem | Pomen |
|---|---|
| Odjemalec / strežnik | Odjemalec je brskalnik (ali aplikacija), ki pošilja zahteve; strežnik nanje odgovarja. |
| UI | Uporabniški vmesnik – zasloni in kontrole. |
| API | Dogovorjen način, kako frontend od backenda zahteva podatke ali dejanja. |
| Endpoint | En določen naslov na API-ju, na primer /api/bookings. |
| Full stack | Frontend + backend + podatkovna baza skupaj. Glejte kaj je full-stack aplikacija. |
| Statična stran | Frontend brez lastnega backenda; za vse so enake datoteke. |
| SPA | Enostranska aplikacija: frontend, ki posodablja stran v brskalniku namesto nalaganja novih strani. |
| Upodabljanje na strežniku (SSR) | Strežnik sestavi HTML strani, preden jo pošlje, kar lahko pomaga hitrosti in SEO. |
| Okoljske spremenljivke | Nastavitve in skrivnosti, ki se backendu dodelijo med delovanjem in so ločene od kode. |
Ali vaša aplikacija potrebuje backend?
| Če vaša aplikacija… | Potrebuje backend? |
|---|---|
| Prikazuje podatke, ki so za vse enaki | Ne |
| Ima kontaktni obrazec, ki vam samo pošlje e-pošto | Ponavadi majhen, ali storitev za obrazce |
| Shranjuje podatke, ki jih bodo videli drugi | Da |
| Ima prijave in zasebne podatke | Da |
| Sprejema plačila | Da – vsaj za ustvarjanje plačilnih obrazcev in sprejemanje webhookov o plačilih |
| Uporablja plačljiv AI ali drug API s skrivnim ključem | Da, da ključ ostane izven brskalnika |
Pogoste napake in zmote
- Shranjevanje skrivnih ključev v frontendu. Vidni so vsakomur, ki odpre razvijalska orodja brskalnika. To je najpogostejša resna napaka pri aplikacijah, zgrajenih z AI.
- Uveljavljanje pravil samo v frontendu. Skrivanje gumba „izbriši“ za ne-administratorje ni zaščita; backend mora zahtevo zavrniti.
- Predpostavka, da je backend „samo podatkovna baza“. Baza shranjuje podatke. Backend odloča, kdo jih sme brati in spreminjati ter kako.
- Mišljenje, da JavaScript pomeni frontend. JavaScript in TypeScript tečeta tudi na strežnikih z Node.js.
- Krivdanje napačne polovice. Če stran izgleda pravilno, podatki pa so napačni, je težava ponavadi v backendu ali bazi, ne v zasnovi.
- Prekomerna gradnja. Portfelju ni treba lastnega backenda. Dodajanje ga poveča stroške in število premikajočih se delov.
Kaj zahtevati od AI graditelja
- „Kateri deli te aplikacije tečejo v brskalniku in kateri na strežniku?“
- „Premakni vse API ključe v backend in jih preberi iz okoljskih spremenljivk.“
- „Preveri vsak obrazec na strežniku, ne le v brskalniku.“
- „Na backendu uveljavi, da lahko rezervacije briše samo administrator.“
- „Stran izgleda v redu, podatki pa se ne shranjujejo – preveri dnevnike backenda za to zahtevo.“
- „To je preprosta marketinška stran; naj ostane samo frontend, razen če rabimo backend.“
Frontend in backend v Mythexu
Nov projekt v Mythexu začne z Vite, React, TypeScript in Tailwind frontendom, agent pa doda backend, ko ga vaša aplikacija potrebuje – ali lahko zahtevate ločen API v Node, Pythonu (FastAPI), C# ali Javi, ki teče poleg frontenda v istem projektu. V predogledu lahko preklapljate med spletno stranjo in API strežnikom, objava pa namesti oba, po potrebi pa dodamo podatkovno bazo in shrambo datotek. Dokumentacija opisuje aplikacije z več storitvami, vodnik spletno gostovanje pojasni, kje po objavi teče vsaka polovica, predloge aplikacij pa so hiter način, kako videti primere full-stack aplikacij.
Vprašanja
Kakšna je razlika med frontendom in backendom?
Frontend je del aplikacije, ki teče v uporabnikovem brskalniku – strani, gumbi in obrazci, ki jih uporabnik vidi in klika. Backend teče na strežniku, ki ga uporabnik nikoli ne vidi; shranjuje podatke, uveljavlja poslovna pravila, preverja pravice in komunicira z drugimi storitvami.
Ali vsaka aplikacija potrebuje backend?
Ne. Marketinška spletna stran, portfelj ali preprosta pristajalna stran je lahko samo frontend. Takoj ko aplikacija potrebuje shranjevanje skupnih podatkov, prijavo uporabnikov, plačila ali skrivne API ključe, potrebuje neko obliko backenda.
Je HTML frontend ali backend?
HTML, CSS in JavaScript, ki tečejo v brskalniku, so frontend. JavaScript lahko teče tudi na strežniku z Node.js, kjer je to backend koda. Jezik ne odloča; odloča, kje se koda izvaja.
Kaj pomeni full stack?
Full stack pomeni, da zajema tako frontend kot backend (ponavadi tudi podatkovno bazo). Full-stack aplikacija ima vse tri dele, razvijalec full-stack pa dela na vseh.