Frontend ja backend: mis vahe neil on?

Frontend on rakenduse osa, mis töötab kasutaja brauseris: lehed, nupud, vormid ja animatsioonid, mida ta näeb ja millele klõpsab. Backend on osa, mis töötab serveris, mida kasutaja kunagi ei näe: see salvestab andmeid ja toob need välja, rakendab ärireegleid, kontrollib, kes mida tohib teha, ning suhtleb teiste teenustega, nagu maksed ja e-post. Need kaks suhtlevad API kaudu ning koos andmebaasiga moodustavad nad „full-stack” rakenduse.

Miks see tähtis on, kui ehitad AI-ga

Kui kirjeldad AI-ehitajale rakendust, kirjeldad sa korraga mõlemat poolt, olenemata sellest, kas sa seda tead või mitte. „Kliendid saavad broneerida aja” tähendab broneerimisvormi (frontend), reegleid, milline aeg on vaba (backend), ja kohta, kuhu broneeringud salvestada (andmebaas).

Selle jaotuse tundmine aitab kolmes praktilises asjas:

Turvalisus. Kõik, mis on frontendis, on kasutaja nähtav ja muudetav. Reeglid ja salajased võtmed peavad asuma backendis.
Silumine. „Nupp ei reageeri” ja „nupp reageerib, aga midagi ei salvestu” viitavad erinevatele pooltele. Kui ütled AI-le, mida näed, aitab see tal põhjuse kiiremini leida.
Hosting ja kulud. Ainult frontendi leht on odav ja lihtne majutada. Backend peab kuskil töötama, mis mõjutab, mida maksad ja kuidas rakendus käitub, kui see on tühikäigul.

Igapäevane võrdlus

Mõtle restoranile.

Frontend on söögisaal: menüü, lauad, sisustus ja ettekandja, kes võtab tellimuse. See on kujundatud klientidele ning nad näevad ja puudutavad kõike seda.

Backend on köök ja kontor: kokad, laoruum, kassa ja juhataja reeglid, kes saab allahindlust. Kliendid sinna ei lähe ega peaks saama minna.

API on nende vahel olev ava: leti, kuhu tellimused sisse antakse ja valmistoidud välja tulevad, kokkulepitud vormingus. Andmebaas on laoruum ja tellimusraamat.

Klient võib oma tellimuslehte ümber kirjutada (frontend on tema kontrolli all), aga köök otsustab endiselt, mida ta valmistab ja mis maksab. Seepärast kuuluvad olulised kontrollid taha.

Mida iga pool teeb

	Frontend	Backend
Töötab	Kasutaja seadmes, brauseris	Serveris, mida sina (või su hostiteenus) kontrollid
Põhiülesanne	Näitab asju, kogub sisendit, reageerib klõpsudele	Salvestab andmeid, rakendab reegleid, jõustab õigusi, kutsub teisi teenuseid
Kas kasutajad näevad ja muudavad koodi?	Jah, see laaditakse alla nende brauserisse	Ei
Kas võib hoida salajasi API-võtmeid?	Ei	Jah, keskkonnamuutujates
Levinud tehnoloogiad	HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind	Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby
Mis läheb valesti	Paigutus laguneb mobiilis, nupp ei tee midagi, aeglane leht	Andmed ei salvestu, vale info kuvatakse, vead, turvaaugud

Mõned raamistikud hägustavad piiri. Näiteks Next.js lubab ühes projektis olla nii brauseris kui serveris töötavat koodi. Mõte jääb samaks: küsimus on alati, kus see tükk töötab?

Töötav näide: tunni broneerimine

Siin on see, mis juhtub, kui keegi broneerib joogatunni, samm-sammult.

Samm	Kus	Mis juhtub
1	Frontend	Ajakava leht laadib ja küsib backendilt selle nädala tunnid.
2	Backend	Loeb tunnid ja broneeringud andmebaasist, arvutab vabad kohad ning tagastab nimekirja JSON-ina.
3	Frontend	Kuvab iga tunni koos ajaga, õpetaja ja vabade kohtadega.
4	Frontend	Kasutaja valib tunni ja täidab nime ja e-posti. Vorm kontrollib, et e-post näib õige (see on teenus, mitte garantii).
5	Frontend → Backend	Saadab päringu `POST /api/bookings` läbi API.
6	Backend	Kontrollib sisendi uuesti, veendub, et tund pole täis, salvestab broneeringu ja palub e-posti teenusel saata salajase võtme abil kinnituse.
7	Backend → Frontend	Tagastab „broneeritud” või „vabandust, on täis”.
8	Frontend	Kuvab kinnitusekraani.

Pane tähele samme 4 ja 6: sisendit kontrollitakse kaks korda. Frontendi kontroll annab kohese tagasiside; backendi kontroll on see, mis tegelikult loeb, sest otsustav kasutaja võib frontendi täielikult mööda minna.

Levinumad mõisted selgitatult

Mõiste	Tähendus
Klient / server	Klient on brauser (või rakendus), mis teeb päringuid; server vastab neile.
UI	Kasutajaliides: ekraanid ja juhtelemendid.
API	Kokkulepitud viis, kuidas frontend küsib backendilt andmeid või toiminguid.
Endpoint	Üks konkreetne URL API-s, näiteks `/api/bookings`.
Full stack	Frontend + backend + andmebaas koos. Vaata mis on full-stack rakendus.
Staatiline sait	Frontend ilma oma backendita; kõigile samad failid.
SPA	Üheleheline rakendus: frontend, mis uuendab lehte brauseris, selle asemel et laadida uusi lehti.
Serveripoolne renderdamine (SSR)	Server koostab lehe HTML-i enne saatmist, mis võib aidata kiirust ja SEO-d.
Keskkonnamuutujad	Seaded ja salajased võtmed, mis antakse backendile töö ajal ja hoitakse koodist eemal.

Kas su rakendus vajab backendi?

Kui su rakendus…	Kas vajab backendi?
Näitab infot, mis on kõigile sama	Ei
Sisaldab kontaktvormi, mis saadab sulle ainult e-kirja	Tavaliselt väike backend või vormiteenus
Salvestab andmeid, mida teised näevad	Jah
Sisaldab sisselogimisi ja privaatseid andmeid	Jah
Võtab vastu makseid	Jah, vähemalt maksete loomiseks ja makse-webhook'ide vastuvõtmiseks
Kasutab tasulist AI- või muud API-d salajase võtmega	Jah, et võti brauserist eemal hoida

Levinud vead ja arusaamatused

Salajaste võtmete panemine frontendi. Need on nähtavad igaühele, kes avab brauseri arendajatööriistad. See on AI-ga ehitatud rakenduste kõige levinum tõsine viga.
Reeglite jõustamine ainult frontendis. Kustutamisnupu peitmine mitteadministraatorite eest ei ole kaitse; backend peab päringu tagasi lükkama.
Arvamus, et backend on „lihtsalt andmebaas”. Andmebaas salvestab andmed. Backend otsustab, kes neid loeb ja muudab ning kuidas.
Arvamus, et JavaScript tähendab frontendi. JavaScript ja TypeScript töötavad ka serverites Node.js-iga.
Vale poole süüdistamine. Kui leht näeb õige välja, aga andmed on valed, asub probleem tavaliselt backendis või andmebaasis, mitte disainis.
Liigne ehitamine. Portfoolio ei vaja kohandatud backendit. Selle lisamine suurendab kulusid ja liikuvaid osi.

Mida küsida oma AI-ehitajalt

„Millised selle rakenduse osad töötavad brauseris ja millised serveris?”
„Vii kõik API-võtmed backendi ja loe need keskkonnamuutujatest.”
„Kontrolli iga vormi ka serveris, mitte ainult brauseris.”
„Jõusta backendis, et kustutada broneeringuid saavad ainult administraatorid.”
„Leht näeb korras välja, aga andmeid ei salvestata — vaata päringu logisid backendis.”
„See on lihtne turundusleht; hoia see ainult frontendina, kui meil pole tegelikult backendi vaja.”

Frontend ja backend Mythexis

Uus Mythexi projekt algab Vite, React, TypeScripti ja Tailwindi frontendist ning agent lisab backendi siis, kui su rakendus seda vajab. Võid ka paluda eraldi API-d Node.js-is, Python-is (FastAPI), C#-s või Javas, mis töötab koos frontendiga samas projektis. Eelvaates saad vahetada veebisaidi ja API-serveri vahel ning avaldamisel juurutatakse mõlemad, lisades vajadusel andmebaasi ja failisalvestuse. Dokumentatsioon selgitab mitme teenusega rakendusi, veebihostimise juhend näitab, kus iga pool elus töötab, ning rakenduste mallid on kiire viis full-stack näidete vaatamiseks.

Küsimused

Mis vahe on frontendil ja backendil?

Frontend on rakenduse osa, mis töötab kasutaja brauseris: lehed, nupud ja vormid, mida ta näeb ja millega suhtleb. Backend töötab serveris, mida kasutaja kunagi ei näe; see salvestab andmeid, rakendab ärireegleid, kontrollib õigusi ja suhtleb teiste teenustega.

Kas iga rakendus vajab backendi?

Ei. Turundusleht, portfoolio või lihtne maandumisleht võib olla ainult frontend. Kui rakendus peab salvestama jagatud andmeid, logima kasutajaid sisse, võtma vastu makseid või kasutama salajasi API-võtmeid, vajab see mingisugust backendi.

Kas HTML on frontend või backend?

Brauseris töötavad HTML, CSS ja JavaScript on frontend. JavaScript võib töötada ka serveris Node.js-i abil, siis on see backendi kood. Keel ei otsusta seda, vaid see, kus kood töötab.

Mida tähendab full stack?

Full stack tähendab nii frontendi kui ka backendi (ja tavaliselt ka andmebaasi) katmist. Full stack rakendus on see, millel on kõik kolm osa; full stack arendaja töötab kõigi nende kallal.