Frontend vs Backend: care este diferența?
Frontend-ul este partea unei aplicații care rulează în browserul utilizatorului — paginile, butoanele, formularele și animațiile pe care le vede și le apasă. Backend-ul este partea care rulează pe un server pe care utilizatorul nu îl vede: stochează și extrage date, aplică regulile de business, verifică cine are voie să facă ce și comunică cu alte servicii, precum plățile și e-mailul. Cele două comunică printr-un API și, împreună cu o bază de date, formează o aplicație „full stack".
De ce contează când construiești cu AI
Când descrii o aplicație unui constructor AI, descrii ambele jumătăți deodată, indiferent dacă îți dai seama sau nu. „Clienții pot rezerva un loc" înseamnă un formular de rezervare (frontend), reguli despre ce locuri sunt libere (backend) și un loc unde se salvează rezervările (baza de date).
Cunoscând împărțirea, te ajută în trei moduri practice:
- Securitate. Orice se află în frontend poate fi văzut și modificat de utilizator. Regulile și secretele trebuie să stea în backend.
- Depanare. „Butonul nu răspunde" și „butonul răspunde, dar nu se salvează nimic" indică jumătăți diferite, iar dacă spui care dintre ele vezi, AI-ul găsește mai repede cauza.
- Găzduire și cost. Un site doar frontend este ieftin și simplu de găzduit. Un backend trebuie să ruleze undeva, ceea ce influențează cât plătești și cum se comportă aplicația când este inactivă.
O analogie din viața de zi cu zi
Gândește-te la un restaurant.
Frontend-ul este sala: meniul, mesele, decorul, ospătarul care îți preia comanda. Este gândit pentru clienți, iar ei pot vedea și atinge tot.
Backend-ul este bucătăria și biroul: bucătarii care gătesc, magazia, casa de marcat, regulile managerului despre cine primește reducere. Clienții nu intră acolo și nici nu ar trebui să poată.
API-ul este legătura dintre ele — ghișeul prin care intră comenzile și ies farfuriile, într-un format convenit. Baza de date este magazia și registrul comenzilor.
Un client își poate rescrie bonul de comandă (frontend-ul este sub controlul lui), dar bucătăria tot decide ce gătește și cât costă. De aceea verificările importante trebuie să stea în spate.
Ce face fiecare parte
| Frontend | Backend | |
|---|---|---|
| Rulează pe | Dispozitivul utilizatorului, în browser | Un server pe care îl controlezi tu sau gazda ta |
| Sarcina principală | Afișează lucruri, colectează date, răspunde la clicuri | Stochează date, aplică reguli, impune permisiuni, apelează alte servicii |
| Pot utilizatorii să vadă și să modifice codul? | Da — este descărcat în browserul lor | Nu |
| Poate ține chei API secrete? | Nu | Da, în variabile de mediu |
| Tehnologii frecvente | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Ce poate merge prost | Layout-ul se strică pe mobil, butonul nu face nimic, pagină lentă | Date nesalvate, date greșite afișate, erori, găuri de securitate |
Unele framework-uri estompează granița. Next.js, de exemplu, permite ca un singur proiect să conțină atât cod de browser, cât și cod de server. Ideea rămâne aceeași: întrebarea este mereu unde rulează această bucată?
Un exemplu concret: rezervarea unei clase
Iată ce se întâmplă când cineva rezervă o clasă de yoga, pas cu pas.
| Pas | Unde | Ce se întâmplă |
|---|---|---|
| 1 | Frontend | Pagina cu orarul se încarcă și cere backend-ului clasele din această săptămână. |
| 2 | Backend | Citește clasele și rezervările din baza de date, calculează locurile libere și returnează lista ca JSON. |
| 3 | Frontend | Afișează fiecare clasă cu ora, profesorul și locurile libere. |
| 4 | Frontend | Utilizatorul alege o clasă și completează numele și e-mailul. Formularul verifică dacă e-mailul pare valid (ca o atenție, nu ca o garanție). |
| 5 | Frontend → Backend | Trimite o cerere POST /api/bookings prin API. |
| 6 | Backend | Validează din nou datele, verifică dacă clasa nu este plină, salvează rezervarea și cere serviciului de e-mail să trimită o confirmare, folosind o cheie secretă. |
| 7 | Backend → Frontend | Returnează „rezervat" sau „ne pare rău, este plin". |
| 8 | Frontend | Afișează ecranul de confirmare. |
Observă pașii 4 și 6: datele sunt verificate de două ori. Verificarea din frontend oferă feedback instant; cea din backend este cea care contează cu adevărat, pentru că un utilizator hotărât poate ocoli complet frontend-ul.
Termeni comuni explicați
| Termen | Înțeles |
|---|---|
| Client / server | Clientul este browserul (sau aplicația) care face cererile; serverul le răspunde. |
| UI | Interfața utilizatorului — ecranele și controalele. |
| API | Modul convenit prin care frontend-ul cere backend-ului date sau acțiuni. |
| Endpoint | Un URL specific din API, de exemplu /api/bookings. |
| Full stack | Frontend + backend + baza de date, împreună. Vezi ce este o aplicație full stack. |
| Site static | Un frontend fără backend propriu; aceleași fișiere pentru toți. |
| SPA | Aplicație cu o singură pagină: un frontend care actualizează pagina în browser în loc să încarce pagini noi. |
| Randare pe server (SSR) | Serverul construiește HTML-ul paginii înainte de a-l trimite, ceea ce poate ajuta viteza și SEO. |
| Variabile de mediu | Setări și secrete date backend-ului la rulare, păstrate în afara codului. |
Ai nevoie de backend pentru aplicația ta?
| Dacă aplicația ta… | Are nevoie de backend? |
|---|---|
| Afișează informații identice pentru toți | Nu |
| Are un formular de contact care doar îți trimite e-mail | De obicei unul mic, sau un serviciu de formulare |
| Salvează date pe care le vor vedea alți oameni | Da |
| Are autentificare și date private | Da |
| Primește plăți | Da — cel puțin pentru a crea checkout-uri și a primi webhook-uri de plată |
| Folosește un API AI plătit sau alt API cu cheie secretă | Da, ca să păstrezi cheia departe de browser |
Greșeli frecvente și idei greșite
- Punerea cheilor secrete în frontend. Vor fi vizibile pentru oricine deschide instrumentele de dezvoltator ale browserului. Este cea mai frecventă greșeală serioasă în aplicațiile construite cu AI.
- Aplicarea regulilor doar în frontend. Ascunderea butonului „șterge" pentru utilizatorii non-admin nu este protecție; backend-ul trebuie să refuze cererea.
- Presupunerea că backend-ul este „doar baza de date". Baza de date stochează datele. Backend-ul decide cine le poate citi și modifica și cum.
- Credința că JavaScript înseamnă frontend. JavaScript și TypeScript rulează și pe servere, cu Node.js.
- Dacă dai vina pe partea greșită. Dacă pagina arată corect, dar datele sunt greșite, problema este de obicei în backend sau în baza de date, nu în design.
- Supradimensionarea. Un portofoliu nu are nevoie de un backend personalizat. Adăugarea unuia aduce cost și piese mobile în plus.
Ce să ceri constructorului tău AI
- „Ce părți ale acestei aplicații rulează în browser și care pe server?"
- „Mută toate cheile API în backend și citește-le din variabile de mediu."
- „Validează fiecare formular și pe server, nu doar în browser."
- „Impune în backend că doar adminii pot șterge rezervări."
- „Pagina arată bine, dar datele nu se salvează — verifică în jurnalele backend-ului cererea."
- „Acesta este un site de prezentare simplu; păstrează-l doar frontend, dacă nu avem nevoie de backend."
Frontend și backend în Mythex
Un proiect nou în Mythex pornește de la un frontend Vite, React, TypeScript și Tailwind, iar agentul adaugă un backend atunci când aplicația ta are nevoie de unul — sau poți cere un API separat în Node, Python (FastAPI), C# sau Java, care rulează alături de frontend în același proiect. În previzualizare poți comuta între site și serverul API, iar publicarea le lansează pe amândouă, cu o bază de date și stocare de fișiere adăugate când este nevoie. Documentația explică aplicațiile cu mai multe servicii, ghidul găzduirea web arată unde rulează fiecare parte după lansare, iar șabloanele de aplicații sunt un mod rapid de a vedea exemple full stack.
Întrebări
Care este diferența dintre frontend și backend?
Frontend-ul este partea unei aplicații care rulează în browserul utilizatorului — paginile, butoanele și formularele pe care le vede și le apasă. Backend-ul rulează pe un server pe care utilizatorul nu îl vede; el stochează date, aplică regulile de business, verifică permisiunile și comunică cu alte servicii.
Orice aplicație are nevoie de backend?
Nu. Un site de prezentare, un portofoliu sau o pagină de destinație simplă pot fi doar frontend. Din momentul în care aplicația trebuie să salveze date comune, să autentifice utilizatori, să proceseze plăți sau să folosească chei API secrete, are nevoie de un backend de un fel.
HTML este frontend sau backend?
HTML, CSS și JavaScript care rulează în browser sunt frontend. JavaScript poate rula și pe un server, folosind Node.js, și atunci este cod de backend. Limbajul nu decide; decide locul în care rulează codul.
Ce înseamnă full stack?
Full stack înseamnă că acoperi atât frontend-ul, cât și backend-ul (și de obicei baza de date). O aplicație full stack are toate cele trei părți; un dezvoltator full stack lucrează la toate.