Frontend vs Backend: која е разликата?

Frontendot е делот од апликацијата што работи во прелистувачот на корисникот — страниците, копчињата, формуларите и анимациите што ги гледаат и ги кликаат. Backendot е делот што работи на сервер што корисникот никогаш не го гледа: складира и враќа податоци, ги применува деловните правила, проверува кој е дозволено да прави што и комуницира со услуги како плаќања и е-пошта. Двата дела комуницираат преку API, а заедно со базата на податоци го сочинуваат „full-stack“ апликацијата.

Зошто е важно кога градите со AI

Кога опишувате апликација на AI градител, ги опишувате двата дела истовремено, без разлика дали сте свесни за тоа. „Корисниците можат да резервираат термин“ значи формулар за резервација (frontend), правила за тоа кои термини се слободни (backend) и место каде се зачувуваат резервациите (база на податоци).

Познавањето на поделбата ви помага на три практични начини:

Безбедност. Сѐ што е во frontendot може да го види и промени корисникот. Правилата и тајните мора да бидат во backendot.
Дебагирање. „Копчето не реагира“ и „копчето реагира, но ништо не се зачувува“ укажуваат на различни делови, а кажувањето кој од двата го гледате му помага на AI побрзо да ја најде причината.
Хостирање и трошоци. Веб-страница само со frontend е евтина и едноставна за хостирање. Backendot мора некаде да работи, а тоа влијае на тоа колку плаќате и како се однесува апликацијата кога е неактивна.

Секојдневна аналогија

Замислете ресторан.

Frontendot е трпезаријата: менито, масите, декорот, келнерот што ја зема вашата нарачка. Е дизајнирана за гостите, и тие можат да ја видат и допрат сета.

Backendot е кујната и канцеларијата: готвачите што готват, магацинот, касата, менаџерските правила за тоа кој добива попуст. Гостите никогаш не влегуваат таму и не треба да можат.

API-то е прозорецот помеѓу нив — шалтерот каде нарачките влегуваат и јадењата излегуваат, во договорен формат. Базата на податоци е магацинот и книгата на нарачки.

Гостинот може да го препише својот налог (frontendot е под негова контрола), но кујната сепак одлучува што ќе готви и што ќе наплати. Затоа важните проверки припаѓаат во задниот дел.

Што прави секој дел

	Frontend	Backend
Работи на	Уредот на корисникот, во прелистувачот	Сервер што вие (или вашиот хостинг) го контролирате
Главна задача	Прикажување, собирање внес, реагирање на кликови	Чување податоци, применување правила, наметнување дозволи, повикување други услуги
Можат ли корисниците да го видат и менуваат кодот?	Да — се презема во нивниот прелистувач	Не
Можат ли да чуваат тајни API клучеви?	Не	Да, во променливи на средината
Вообичаени технологии	HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind	Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby
Што обично се расипува	Распоредот се расипува на мобилен, копчето не прави ништо, бавна страница	Податоците не се зачувуваат, погрешни податоци се прикажуваат, грешки, безбедносни дупки

Некои рамки ја бришат границата. Next.js, на пример, дозволува еден проект да содржи и код за прелистувачот и код за серверот. Идејата останува иста: прашањето е секогаш каде се извршува овој дел?

Работен пример: резервација за час по јога

Еве што се случува кога некој резервира час по јога, чекор по чекор.

Чекор	Каде	Што се случува
1	Frontend	Страницата со распоред се вчитува и бара од backendot часовите за оваа недела.
2	Backend	Ги чита часовите и резервациите од базата, ги пресметува слободните места и го враќа списокот како JSON.
3	Frontend	Ги прикажува сите часови со време, инструктор и слободни места.
4	Frontend	Корисникот избира час и внесува име и е-пошта. Формуларот проверува дали е-поштата изгледа валидно (љубезност, не гаранција).
5	Frontend → Backend	Испраќа барање `POST /api/bookings` преку API.
6	Backend	Го проверува внесот повторно, проверува дали часот не е полн, ја зачувува резервацијата и бара од услугата за е-пошта да испрати потврда со тајниот клуч.
7	Backend → Frontend	Враќа „резервирано“ или „извинете, полно е“.
8	Frontend	Го прикажува екранот за потврда.

Забележете ги чекорите 4 и 6: внесот се проверува двапати. Проверката на frontendot дава брза повратна информација; проверката на backendot е онаа што навистина важи, бидејќи упорен корисник може целосно да го заобиколи frontendot.

Вообичаени термини

Термин	Значење
Клиент / сервер	Клиентот е прелистувачот (или апликацијата) што прави барања; серверот одговара на нив.
UI	Кориснички интерфејс — екраните и контролите.
API	Договорениот начин frontendot да бара податоци или дејства од backendot.
Endpoint	Една конкретна адреса на API-то, како `/api/bookings`.
Full stack	Frontend + backend + база на податоци заедно. Видете што е full-stack апликација.
Статичка страница	Frontend без свој backend; истите датотеки за сите.
SPA	Single-page application: frontend што ја ажурира страницата во прелистувачот наместо да вчитува нови страници.
Server-side rendering (SSR)	Серверот го составува HTML-от на страницата пред да го испрати, што може да помогне за брзината и SEO.
Променливи на средината	Поставки и тајни што му се даваат на backendot при извршување, чувани надвор од кодот.

Дали вашата апликација има потреба од backend?

Ако вашата апликација…	Ѝ треба backend?
Прикажува информации што се исти за сите	Не
Има контакт формулар што само ви испраќа е-пошта	Обично мал, или услуга за формулари
Зачувува податоци што ги гледаат други луѓе	Да
Има најава и приватни податоци	Да
Прима плаќања	Да — барем за создавање на наплатни страници и примање webhook-и за плаќања
Користи платен AI или друг API со тајен клуч	Да, за тајниот клуч да остане надвор од прелистувачот

Вообичаени грешки и погрешни сфаќања

Ставање тајни клучеви во frontendot. Ќе ги види секој што ги отвора алатките за програмери во прелистувачот. Ова е најчестата сериозна грешка кај апликациите изградени со AI.
Спроведување правила само во frontendot. Скривањето на копчето „избриши“ за не-администратори не е заштита; backendot мора да го одбие барањето.
Претпоставка дека backendot е „само базата“. Базата чува податоци. Backendot одлучува кој може да ги чита и менува и како.
Мислење дека JavaScript значи frontend. JavaScript и TypeScript работат и на сервери, со Node.js.
Обвинување на погрешниот дел. Ако страницата изгледа точно, но податоците се погрешни, проблемот обично е во backendot или базата, не во дизајнот.
Преку-градење. Портфолиото не треба сопствен backend. Додавањето на еден додава трошоци и подвижни делови.

Што да бараете од вашиот AI градител

„Кои делови од оваа апликација работат во прелистувачот, а кои на серверот?“
„Пренеси ги сите API клучеви во backendot и читај ги од променливи на средината.“
„Валидирај го секој формулар и на серверот и во прелистувачот.“
„Наметни на backendot дека само администраторите можат да бришат резервации.“
„Страницата изгледа добро, но податоците не се зачувуваат — провери ги логовите на backendot за барањето.“
„Ова е едноставна веб-страница за маркетинг; задржи ја само со frontend, освен ако не ни треба backend.“

Frontend и backend во Mythex

Новиот проект во Mythex почнува од Vite, React, TypeScript и Tailwind frontend, а агентот додава backend кога вашата апликација ќе има потреба од него — или можете да побарате посебен API во Node, Python (FastAPI), C# или Java што работи покрај frontendot во истиот проект. Во прегледот можете да се префрлате помеѓу веб-страницата и API серверот, а објавувањето ги распоредува двата, со база на податоци и складиште за датотеки додадени по потреба. Документацијата ги опишува апликациите со повеќе услуги, водичот за веб-хостинг објаснува каде работи секој дел кога апликацијата е во живо, а шаблоните за апликации се брз начин да видите примери со full-stack.

Прашања

Која е разликата помеѓу frontend и backend?

Frontendot е делот од апликацијата што работи во прелистувачот на корисникот — страниците, копчињата и формуларите што ги гледаат и ги кликнуваат. Backendot работи на сервер што корисникот никогаш не го гледа; тој ги чува податоците, ги применува деловните правила, проверува кој смее да што прави и комуницира со други услуги.

Дали секоја апликација има потреба од backend?

Не. Веб-страница за маркетинг, портфолио или едноставна целна страница може да биде само frontend. Чим апликацијата треба да зачува заеднички податоци, да ги најави корисниците, да прима плаќања или да користи тајни API клучеви, ѝ треба некаков backend.

Дали HTML е frontend или backend?

HTML, CSS и JavaScript што работат во прелистувачот се frontend. JavaScript може да работи и на сервер со Node.js, и тогаш е backend код. Јазикот не одлучува; одлучува каде се извршува кодот.

Што значи full stack?

Full stack значи да ги покриваш и frontendot и backendot (и обично базата на податоци). Full-stack апликација е онаа што ги има сите три дела; full-stack програмерот работи на сите нив.