Frontend ir backend: koks skirtumas?
Frontend – tai programos dalis, kuri veikia vartotojo naršyklėje: puslapiai, mygtukai, formos ir animacijos, kuriuos vartotojas mato ir spaudo. Backend – tai dalis, kuri veikia serveryje, kurio vartotojas niekada nemato: ji saugo ir išgauna duomenis, taiko verslo taisykles, tikrina, kas ką gali daryti, ir bendrauja su kitomis paslaugomis, pavyzdžiui mokėjimų ar el. pašto sistemomis. Abi dalys bendrauja per API, o kartu su duomenų baze sudaro „full stack“ programą.
Kodėl tai svarbu kuriant su DI
Kai aprašote programą DI kūrimo įrankiui, jūs aprašote abi dalis iš karto – ar tai suvokiate, ar ne. Frazė „klientai gali užsisakyti laiką“ reiškia užsakymo formą (frontend), taisykles, kurie laikai laisvi (backend), ir vietą, kur saugomi užsakymai (duomenų bazė).
Žinojimas, kaip tai padalinta, padeda trimis praktiniais būdais:
- Saugumas. Viskas, kas yra frontend, gali būti matoma ir pakeista vartotojo. Taisyklės ir paslaptys turi gyventi backend.
- Klaidų paieška. „Mygtukas nereaguoja“ ir „mygtukas reaguoja, bet niekas neišsaugoma“ rodo į skirtingas dalis, o pasakymas, ką matote, padeda DI greičiau rasti priežastį.
- Talpinimas ir kaina. Vien frontend svetainę talpinti pigu ir paprasta. Backend turi veikti kažkur, o tai veikia kainą ir tai, kaip programa elgiasi, kai ji nenaudojama.
Kasdienė analogija
Pagalvokite apie restoraną.
Frontend – tai valgomoji: meniu, staliukai, interjeras, padavėjas, priimantis užsakymą. Ji sukurta klientams, ir jie mato bei liečia viską, kas joje yra.
Backend – tai virtuvė ir biuras: virėjai gamina, sandėlis, kasa, vadovo taisyklės, kas gauna nuolaidą. Klientai į ten neina ir neturėtų galėti.
API – tai perdavimo langelis tarp jų: vieta, kur užsakymai įeina, o patiekalai išeina sutartu formatu. Duomenų bazė – tai sandėlis ir užsakymų knyga.
Klientas gali perrašyti savo užsakymo lapelį (frontend yra jo kontrolėje), bet virtuvė vis tiek nusprendžia, ką gamins ir kiek kainuos. Todėl svarbiausi patikrinimai priklauso galinei daliai.
Ką kiekviena dalis daro
| Frontend | Backend | |
|---|---|---|
| Veikia | Vartotojo įrenginyje, naršyklėje | Serveryje, kurį valdote jūs (arba jūsų talpintojas) |
| Pagrindinis darbas | Rodyti, rinkti įvestis, reaguoti į paspaudimus | Saugoti duomenis, taikyti taisykles, valdyti leidimus, kviesti kitas paslaugas |
| Ar vartotojai gali matyti ir keisti kodą? | Taip – jis atsisiunčiamas į naršyklę | Ne |
| Ar gali laikyti slaptus API raktus? | Ne | Taip, aplinkos kintamuosiuose |
| Dažniausios technologijos | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Kas dažniausiai nutinka | Išdėstymas sugenda mobiliajame, mygtukas nieko nedaro, lėtas puslapis | Duomenys neišsaugomi, rodomi neteisingi duomenys, klaidos, saugumo spragos |
Kai kurie karkasai šią ribą susimaišo. Pavyzdžiui, Next.js leidžia vienam projektui turėti ir naršyklės, ir serverio kodą. Idėja išlieka ta pati: visada klausimas – kur šis gabalas veikia?
Darbo pavyzdys: klasės rezervavimas
Štai kas nutinka, kai kas nors užsisako jogos pamoką, žingsnis po žingsnio.
| Žingsnis | Kur | Kas vyksta |
|---|---|---|
| 1 | Frontend | Tvarkaraščio puslapis įsikrauna ir paprašo backend šios savaitės pamokų. |
| 2 | Backend | Iš duomenų bazės nuskaito pamokas ir rezervacijas, apskaičiuoja laisvas vietas ir grąžina sąrašą kaip JSON. |
| 3 | Frontend | Rodo kiekvieną pamoką su laiku, mokytoju ir laisvomis vietomis. |
| 4 | Frontend | Vartotojas pasirenka pamoką ir įveda vardą bei el. paštą. Forma patikrina, ar el. paštas atrodo teisingas (tai patogumas, o ne garantija). |
| 5 | Frontend → Backend | Išsiunčia POST /api/bookings užklausą per API. |
| 6 | Backend | Dar kartą patikrina įvestį, tikrina, ar pamoka nepilna, išsaugo rezervaciją ir su slaptu raktu paprašo el. pašto paslaugos išsiųsti patvirtinimą. |
| 7 | Backend → Frontend | Grąžina „rezervuota“ arba „atsiprašome, vietų nebėra“. |
| 8 | Frontend | Rodo patvirtinimo ekraną. |
Pastebėkite 4 ir 6 žingsnius: įvestis tikrinama du kartus. Frontend patikrinimas duoda momentinį atsakymą; backend patikrinimas yra tas, kuris iš tiesų lemia, nes apsukrus vartotojas gali apeiti frontend visiškai.
Dažniausių terminų paaiškinimas
| Terminas | Reikšmė |
|---|---|
| Client / server | Klientas – tai naršyklė (arba programa), siunčianti užklausas; serveris į jas atsako. |
| UI | Vartotojo sąsaja – ekranai ir valdikliai. |
| API | Sutartas būdas, kuriuo frontend prašo backend duomenų ar veiksmų. |
| Endpoint | Viena konkreti API adresas, pavyzdžiui /api/bookings. |
| Full stack | Frontend + backend + duomenų bazė kartu. Žr. kas yra full stack programa. |
| Static site | Frontend be savo backend; visiems tie patys failai. |
| SPA | Vieno puslapio programa: frontend atnaujina puslapį naršyklėje vietoj naujų puslapių įkrovimo. |
| Server-side rendering (SSR) | Serveris sukuria puslapio HTML prieš jį siųsdamas, o tai gali padėti greičiui ir SEO. |
| Environment variables | Nustatymai ir paslaptys, perduodami backend veikimo metu ir laikomi atskirai nuo kodo. |
Ar jūsų programai reikia backend?
| Jei jūsų programa… | Reikia backend? |
|---|---|
| Rodo informaciją, kuri visiems vienoda | Ne |
| Turi kontaktų formą, kuri tik atsiunčia laišką jums | Paprastai nedidelį arba formų paslaugą |
| Saugo duomenis, kuriuos matys kiti žmonės | Taip |
| Turi prisijungimus ir privačius duomenis | Taip |
| Priima mokėjimus | Taip – bent jau mokėjimo sesijoms kurti ir mokėjimo pranešimams gauti |
| Naudoja mokamą DI ar kitą API su slaptu raktu | Taip, kad raktas liktų nuo naršyklės atokiau |
Dažniausios klaidos ir klaidingi įsitikinimai
- Slapti raktai frontend. Juos matys kiekvienas, kas atidaro naršyklės kūrėjo įrankius. Tai dažniausia rimta klaida DI kuriamose programose.
- Taisyklių vykdymas tik frontend. Paslėpti „ištrinti“ mygtuką ne administratoriams nėra apsauga; backend privalo atmesti užklausą.
- Manymas, kad backend – „tik duomenų bazė“. Duomenų bazė saugo duomenis. Backend nusprendžia, kas juos gali skaityti ir keisti bei kaip.
- Manymas, kad JavaScript reiškia frontend. JavaScript ir TypeScript veikia ir serveriuose, naudojant Node.js.
- Kaltinti ne tą dalį. Jei puslapis atrodo teisingai, bet duomenys neteisingi, problema dažniausiai yra backend ar duomenų bazėje, o ne dizaine.
- Per didelis kūrimas. Portfeliui nereikia pasirinktinio backend. Jis prideda kainos ir judančių dalių.
Ko prašyti iš savo DI kūrimo įrankio
- „Kurios šios programos dalys veikia naršyklėje, o kurios serveryje?“
- „Perkelk visus API raktus į backend ir skaityk juos iš aplinkos kintamųjų.“
- „Tikrink kiekvieną formą serveryje, ne tik naršyklėje.“
- „Užtikrink backend, kad rezervacijas gali ištrinti tik administratoriai.“
- „Puslapis atrodo gerai, bet duomenys neišsaugomi – patikrink backend žurnalus dėl šios užklausos.“
- „Tai paprasta rinkodaros svetainė; laikykime ją tik frontend, nebent prireiks backend.“
Frontend ir backend Mythex
Naujas Mythex projektas pradedamas nuo Vite, React, TypeScript ir Tailwind frontend, o agentas prideda backend, kai programai jo reikia – arba galite paprašyti atskiro API Node, Python (FastAPI), C# ar Java, veikiančio kartu su frontend tame pačiame projekte. Peržiūroje galite perjungti tarp svetainės ir API serverio, o publikavimas įdiegia abi dalis, prireikus pridedant duomenų bazę ir failų saugyklą. Dokumentacijoje rasite apie kelių paslaugų programas, svetainių talpinimo vadove – kur kiekviena dalis veikia, kai programa tampa gyva, o programėlių šablonai – greitas būdas pamatyti pilno steko pavyzdžius.
Klausimai
Koks skirtumas tarp frontend ir backend?
Frontend – tai programos dalis, kuri veikia vartotojo naršyklėje: puslapiai, mygtukai ir formos, kuriuos jis mato. Backend veikia serveryje, kurio vartotojas nemato; jis saugo duomenis, taiko verslo taisykles, tikrina leidimus ir bendrauja su kitomis paslaugomis.
Ar kiekvienai programai reikia backend?
Ne. Rinkodaros svetainei, portfelio puslapiui ar paprastam nukreipimo puslapiui pakanka vien frontend. Kai programai reikia saugoti bendrus duomenis, prisijungimus, priimti mokėjimus ar naudoti slaptus API raktus, būtinas kokio nors tipo backend.
Ar HTML yra frontend ar backend?
HTML, CSS ir JavaScript, veikiantys naršyklėje, yra frontend. JavaScript taip pat gali veikti serveryje naudojant Node.js – tuomet tai backend kodas. Kalba nenusprendžia; nusprendžia tai, kur kodas vykdomas.
ką reiškia full stack?
Full stack reiškia apimti ir frontend, ir backend (dažniausiai ir duomenų bazę). Full stack programa turi visas tris dalis, o full stack kūrėjas dirba su visomis jomis.