Frontend un backend: kāda ir atšķirība?
Frontend ir lietotnes daļa, kas darbojas lietotāja pārlūkā — lapas, pogas, veidlapas un animācijas, ko lietotājs redz un klikšķina. Backend ir daļa, kas darbojas serverī, ko lietotājs nekad neredz: tas glabā un atgriež datus, piemēro biznesa noteikumus, pārbauda, kam ir atļauts ko darīt, un sadarbojas ar citiem pakalpojumiem, piemēram, maksājumiem un e-pastu. Abas daļas sazinās caur API, un kopā ar datubāzi tās veido „full-stack” lietotni.
Kāpēc tas ir svarīgi, veidojot ar AI
Kad aprakstīsi lietotni AI veidotājam, tu vienlaikus apraksti abas puses, pat ja to neapzinies. „Klienti var rezervēt laiku” nozīmē rezervācijas veidlapu (frontend), noteikumus par to, kuri laiki ir brīvi (backend), un vietu, kur saglabāt rezervācijas (datubāze).
Zinot šo sadalījumu, palīdz trijos praktiskos veidos:
- Drošība. Viss, kas ir frontend, var tikt redzēts un mainīts lietotāja pusē. Noteikumiem un slepenajām atslēgām jāatrodas backend.
- Kļūdu meklēšana. „Poga nereaģē” un „poga reaģē, bet nekas netiek saglabāts” norāda uz dažādām daļām, un, pateicot, ko tieši redzi, AI var ātrāk atrast cēloni.
- Hostings un izmaksas. Tikai frontend vietne ir lēta un vienkārši hostējama. Backend jādarbojas kaut kur, un tas ietekmē, cik maksā un kā lietotne uzvedas, kad tā ir dīkstāvē.
Ikdienas analoģija
Iedomājies restorānu.
Frontend ir ēdamzāle: ēdienkarte, galdi, interjers, viesmīlis, kas pieņem pasūtījumu. Tas ir paredzēts klientiem, un viņi var redzēt un aptaustīt visu.
Backend ir virtuve un birojs: pavāri gatavo, noliktava, kase, vadītāja noteikumi par atlaidēm. Klienti tur neiet, un tiem arī nevajadzētu iekļūt.
API ir saskarsmes punkts starp tiem — letes, kur pasūtījumi ienāk un ēdieni iznāk vienotā, iepriekš saskaņotā formātā. Datubāze ir noliktava un pasūtījumu grāmata.
Klients var pārrakstīt savu pasūtījuma lapiņu (frontend ir viņa kontrolē), bet virtuve joprojām izlemj, ko gatavot un cik maksāt. Tāpēc svarīgās pārbaudes jāveic aizmugurē.
Ko dara katra puse
| Frontend | Backend | |
|---|---|---|
| Darbojas | Lietotāja ierīcē, pārlūkā | Serverī, ko kontrolē tu (vai tavs hostings) |
| Galvenais uzdevums | Rādīt, savākt ievadi, reaģēt uz klikšķiem | Glabāt datus, piemērot noteikumus, nodrošināt tiesības, sazināties ar citiem pakalpojumiem |
| Vai lietotāji var redzēt un mainīt kodu? | Jā — tas tiek lejupielādēts viņu pārlūkā | Nē |
| Vai var glabāt slepenas API atslēgas? | Nē | Jā, vides mainīgajos |
| Biežākās tehnoloģijas | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Kas parasti noiet greizi | Izkārtojums salūst mobilajā ierīcē, poga nedara neko, lēna lapa | Dati nesaglabājas, rādās nepareizi dati, kļūdas, drošības caurumi |
Daži ietvari robežu nedaudz izplūdina. Piemēram, Next.js ļauj vienā projektā turēt gan pārlūka, gan servera kodu. Ideja paliek tā pati: jautājums vienmēr ir kur šī daļa darbojas?
Darba piemērs: jogas nodarbības rezervēšana
Šeit aprakstīts, kas notiek, kad kāds rezervē jogas nodarbību, soli pa solim.
| Solis | Kur | Kas notiek |
|---|---|---|
| 1 | Frontend | Nodarbību lapa ielādējas un pieprasa šīs nedēļas nodarbības no backend. |
| 2 | Backend | Nolasa nodarbības un rezervācijas no datubāzes, aprēķina brīvās vietas un atgriež sarakstu kā JSON. |
| 3 | Frontend | Parāda katru nodarbību ar laiku, pasniedzēju un brīvajām vietām. |
| 4 | Frontend | Lietotājs izvēlas nodarbību un ieraksta vārdu un e-pastu. Veidlapa pārbauda, vai e-pasts izskatās pareizs (tā ir ērtība, nevis garantija). |
| 5 | Frontend → Backend | Nosūta POST /api/bookings pieprasījumu caur API. |
| 6 | Backend | Vēlreiz pārbauda ievadi, pārliecinās, ka nodarbība nav pilna, saglabā rezervāciju un ar slepenu atslēgu liek e-pasta pakalpojumam nosūtīt apstiprinājumu. |
| 7 | Backend → Frontend | Atgriež „rezervēts” vai „atvainojiet, vietas vairs nav”. |
| 8 | Frontend | Parāda apstiprinājuma ekrānu. |
Ievēro soļus 4 un 6: ievade tiek pārbaudīta divreiz. Frontend pārbaude dod tūlītēju atgriezenisko saiti; backend pārbaude ir tā, kas patiesi skaitās, jo apņēmīgs lietotājs var apiet frontend pilnībā.
Biežākie termini
| Termins | Nozīme |
|---|---|
| Klients / serveris | Klients ir pārlūks (vai lietotne), kas sūta pieprasījumus; serveris uz tiem atbild. |
| UI | Lietotāja saskarne — ekrāni un vadības elementi. |
| API | Vienota veida, kā frontend pieprasa datus vai darbības no backend. |
| Endpoint | Viens konkrēts URL API, piemēram, /api/bookings. |
| Full stack | Frontend + backend + datubāze kopā. Skat. kas ir full-stack lietotne. |
| Statiska vietne | Frontend bez sava backend; visiem ir vieni un tie paši faili. |
| SPA | Vienas lapas lietotne: frontend, kas atjauno lapu pārlūkā, nevis ielādē jaunas lapas. |
| Servera puses renderēšana (SSR) | Serveris sagatavo lapas HTML, pirms to nosūta, kas var uzlabot ātrumu un SEO. |
| Vides mainīgie | Iestatījumi un slepenas atslēgas, ko backend saņem izpildes laikā un kas netiek glabātas kodā. |
Vai tavai lietotnei vajag backend?
| Ja tava lietotne… | Vai vajag backend? |
|---|---|
| Rāda informāciju, kas visiem ir vienāda | Nē |
| Ir kontaktu veidlapa, kas tikai nosūta e-pastu tev | Parasti neliels backend vai veidlapu pakalpojums |
| Saglabā datus, ko redzēs citi cilvēki | Jā |
| Ir pieslēgšanās un privāti dati | Jā |
| Pieņem maksājumus | Jā — vismaz lai izveidotu norēķinus un saņemtu maksājumu webhook |
| Izmanto maksas AI vai citu API ar slepenu atslēgu | Jā, lai atslēga neatrastos pārlūkā |
Biežākās kļūdas un nepareizi priekšstati
- Slepenu atslēgu ievietošana frontend. Tās redzēs ikviens, kas atver pārlūka izstrādātāja rīkus. Tā ir visbiežākā nopietnā kļūda AI veidotās lietotnēs.
- Noteikumu izpilde tikai frontend. Poga „dzēst”, kas paslēpta ne-administratoriem, nav aizsardzība; backend pieprasījums jānoraida.
- Uzskats, ka backend ir „tikai datubāze”. Datubāze glabā datus. Backend izlemj, kas tos drīkst lasīt un mainīt un kā.
- Domāt, ka JavaScript nozīmē frontend. JavaScript un TypeScript darbojas arī serveros, izmantojot Node.js.
- Vainot nepareizo daļu. Ja lapa izskatās pareizi, bet dati ir nepareizi, problēma parasti ir backend vai datubāzē, nevis dizainā.
- Pārlieku daudz būvēt. Portfolio nevajag pielāgotu backend. Tas pievieno izmaksas un kustīgās daļas.
Ko prasīt no sava AI veidotāja
- „Kuras šīs lietotnes daļas darbojas pārlūkā un kuras serverī?”
- „Pārvieto visas API atslēgas uz backend un nolasi tās no vides mainīgajiem.”
- „Validē katru veidlapu arī serverī, ne tikai pārlūkā.”
- „Nodrošini backend, ka rezervācijas var dzēst tikai administratori.”
- „Lapa izskatās labi, bet dati netiek saglabāti — pārbaudi backend žurnālus šim pieprasījumam.”
- „Šī ir vienkārša mārketinga vietne; lai tā paliek tikai frontend, ja vien mums nevajag backend.”
Frontend un backend Mythex
Jauns Mythex projekts sākas ar Vite, React, TypeScript un Tailwind frontend, un aģents pievieno backend, kad tavai lietotnei tas vajadzīgs. Vari arī pieprasīt atsevišķu API Node, Python (FastAPI), C# vai Java, kas darbojas blakus frontend tajā pašā projektā. Priekšskatījumā vari pārslēgties starp vietni un API serveri, un publicēšana izvieto abus, kopā ar datubāzi un failu glabātuvi, kad tās vajadzīgas. Vairāku pakalpojumu lietotņu dokumentācija izskaidro, kā tās darbojas, tīmekļa hostinga ceļvedis parāda, kur katra daļa darbojas pēc publicēšanas, un lietotņu sagataves ir ātrs veids, kā redzēt full-stack piemērus.
Jautājumi
Kāda ir atšķirība starp frontend un backend?
Frontend ir lietotnes daļa, kas darbojas lietotāja pārlūkā — lapas, pogas un veidlapas, ko viņš redz un klikšķina. Backend darbojas serverī, ko lietotājs nekad neredz: tas glabā datus, piemēro biznesa noteikumus, pārbauda tiesības un sadarbojas ar citiem pakalpojumiem.
Vai katrai lietotnei vajag backend?
Nē. Mārketinga vietnei, portfolio vai vienkāršai nosēšanās lapai var pietikt tikai ar frontend. Tiklīdz lietotnei jāsaglabā kopīgi dati, jāpieslēdz lietotāji, jāpieņem maksājumi vai jāizmanto slepenas API atslēgas, vajag kāda veida backend.
Vai HTML ir frontend vai backend?
HTML, CSS un JavaScript, kas darbojas pārlūkā, ir frontend. JavaScript var darboties arī serverī, izmantojot Node.js, un tad tas ir backend kods. Valoda to neizlemj; izlemj tas, kur kods darbojas.
Ko nozīmē full stack?
Full stack nozīmē aptvert gan frontend, gan backend (un parasti arī datubāzi). Full stack lietotne ir tāda, kurai ir visas trīs daļas; full stack izstrādātājs strādā ar visām tām.