Frontend և Backend. ո՞րն է տարբերությունը

Frontend-ը հավելվածի այն մասն է, որն աշխատում է օգտատիրոջ բրաուզերում՝ էջերը, կոճակները, ձևերը և անիմացիաները, որ նա տեսնում և սեղմում է։ Backend-ը այն մասն է, որն աշխատում է սերվերի վրա, որը օգտատերը երբեք չի տեսնում. այն պահում և վերցնում է տվյալները, կիրառում բիզնես կանոնները, ստուգում է, թե ով ինչ կարող է անել, և կապվում է այլ ծառայությունների հետ, ինչպիսիք են վճարումները և էլ. փոստը։ Երկուսը հաղորդակցվում են API-ի միջոցով, և տվյալների բազայի հետ միասին կազմում են «full-stack» հավելված։

Ինչու է սա կարևոր AI-ով կառուցելիս

Երբ AI builder-ին նկարագրում եք հավելվածը, դուք նկարագրում եք երկու կողմերն էլ միաժամանակ, անկախ նրանից՝ գիտակցում եք դա, թե ոչ։ «Հաճախորդները կարող են գրանցել ժամ» նշանակում է ամրագրման ձև (frontend), կանոններ, թե որ ժամերն են ազատ (backend), և տեղ, որտեղ պահվում են ամրագրումները (տվյալների բազա)։

Բաժանումը իմանալը օգնում է երեք գործնական ձևով.

Անվտանգություն. Frontend-ում եղած ամեն ինչ օգտատերը կարող է տեսնել և փոխել։ Կանոնները և գաղտնի բանալիները պետք է գտնվեն backend-ում։
Սխալների որոնում. «Կոճակը չի արձագանքում» և «կոճակը արձագանքում է, բայց ոչինչ չի պահվում» տարբեր կողմերի մասին են խոսում, և այն, թե ինչ եք տեսնում, օգնում է AI-ին ավելի արագ գտնել պատճառը։
Հոստինգ և արժեք. Միայն frontend ունեցող կայքը էժան է և պարզ հոստվում է։ Backend-ը պետք է որևէ տեղ աշխատի, ինչը ազդում է այն բանի վրա, թե ինչ եք վճարում և ինչպես է հավելվածը վարվում անգործության ժամանակ։

Ամենօրյա անալոգիա

Մտածեք ռեստորանի մասին։

Frontend-ը ճաշասենյակն է. ճաշացուցակը, սեղանները, interior-ը, մատուցողը, որ ընդունում է պատվերը։ Այն նախատեսված է հաճախորդների համար, և նրանք տեսնում և կարող են շոշափել ամեն ինչ։

Backend-ը խոհանոցն ու գրասենյակն է. խոհարարները, պահեստը, դրամարկղը, ղեկավարի կանոնները, թե ով կարող է զեղչ ստանալ։ Հաճախորդները երբեք չեն մտնում այնտեղ, և նրանք չպետք է կարողանան դա անել։

API-ն նրանց միջև անցումն է. հանձնման պատուհանը, որտեղ պատվերները մտնում են, իսկ ափսեները դուրս են գալիս համաձայնեցված ձևաչափով։ Տվյալների բազան պահեստն է և պատվերների գիրքը։

Հաճախորդը կարող է ձեռքով փոխել իր պատվերի թերթիկը (frontend-ը նրա վերահսկողության տակ է), բայց խոհանոցը դեռ որոշում է, թե ինչ կպատրաստի և ինչ կգանձի։ Ահա թե ինչու կարևոր ստուգումները պետք է լինեն հետևի մասում։

Յուրաքանչյուր կողմի գործը

	Frontend	Backend
Աշխատում է	Օգտատիրոջ սարքում, բրաուզերում	Սերվերի վրա, որը դու (կամ հոստինգը) վերահսկում ես
Հիմնական գործը	Ցույց տալ, մուտքագրում հավաքել, արձագանքել սեղմումներին	Պահել տվյալները, կիրառել կանոնները, վերահսկել թույլտվությունները, կապվել այլ ծառայությունների հետ
Կարո՞ղ են օգտատերերը տեսնել և փոխել կոդը։	Այո. այն ներբեռնվում է նրանց բրաուզեր	Ոչ
Կարո՞ղ է պահել գաղտնի API բանալիներ։	Ոչ	Այո, միջավայրի փոփոխականներում
Սովորական տեխնոլոգիաներ	HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind	Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby
Ինչ է սովորաբար սխալվում	Էջի դասավորությունը կոտրվում է բջջային սարքում, կոճակը չի աշխատում, էջը դանդաղ է	Տվյալները չեն պահվում, սխալ տվյալներ են ցուցադրվում, սխալներ, անվտանգության խոցելիություններ

Որոշ ֆրեյմվորքներ մշուշում են սահմանը։ Օրինակ՝ Next.js-ը թույլ է տալիս, որ մեկ նախագիծը պարունակի և բրաուզերի, և սերվերի կոդ։ Գաղափարը նույնն է. հարցը միշտ այն է՝ այս մասը որտե՞ղ է աշխատում։

Աշխատած օրինակ. յոգայի դասի գրանցում

Նայեք, թե ինչ է կատարվում, երբ մեկը գրանցվում է յոգայի դասին, քայլ առ քայլ։

Քայլ	Որտեղ	Ինչ է կատարվում
1	Frontend	Գրաֆիկի էջը բեռնվում է և հարցնում backend-ից այս շաբաթվա դասերը։
2	Backend	Կարդում է դասերն ու գրանցումները տվյալների բազայից, հաշվում է ազատ տեղերը և վերադարձնում ցուցակը JSON-ով։
3	Frontend	Յուրաքանչյուր դաս ցուցադրում է ժամով, մարզչով և ազատ տեղերով։
4	Frontend	Օգտատերը ընտրում է դաս և լրացնում անունն ու էլ. փոստը։ Ձևը ստուգում է, որ էլ. փոստը վավեր է թվում (ընդհանուր քաղաքավարություն, ոչ երաշխիք)։
5	Frontend → Backend	Ուղարկում է `POST /api/bookings` հարցում API-ի միջոցով։
6	Backend	Նորից ստուգում է մուտքը, ստուգում, որ դասը լիքը չէ, պահում է գրանցումը և գաղտնի բանալիով խնդրում էլ. փոստի ծառայությանը ուղարկել հաստատում։
7	Backend → Frontend	Վերադարձնում է «գրանցված է» կամ «ցավոք, լիքն է»։
8	Frontend	Ցուցադրում է հաստատման էկրանը։

Նկատեք 4-րդ և 6-րդ քայլերը. մուտքը ստուգվում է երկու անգամ։ Frontend-ի ստուգումը տալիս է անմիջական արձագանք, իսկ backend-ի ստուգումն է, որ իրոք կարևոր է, քանի որ վճռական օգտատերը կարող է ամբողջությամբ շրջանցել frontend-ը։

Հիմնական տերմինների բացատրություն

Տերմին	Նշանակություն
Client / server	Client-ը բրաուզերն է (կամ հավելվածը), որ հարցումներ է անում. server-ը պատասխանում է դրանց։
UI	User interface. էկրանները և կառավարման տարրերը։
API	Համաձայնեցված եղանակը, որով frontend-ը տվյալներ կամ գործողություններ է խնդրում backend-ից։
Endpoint	API-ի մեկ կոնկրետ URL, օրինակ՝ `/api/bookings`։
Full stack	Frontend + backend + տվյալների բազա միասին։ Տե՛ս ինչ է full-stack հավելվածը։
Static site	Frontend՝ առանց սեփական backend-ի. բոլորի համար նույն ֆայլերը։
SPA	Single-page application. frontend, որ թարմացնում է էջը բրաուզերում՝ նոր էջեր բեռնելու փոխարեն։
Server-side rendering (SSR)	Սերվերը կառուցում է էջի HTML-ը նախքան ուղարկելը, ինչը կարող է օգնել արագությանը և SEO-ին։
Environment variables	Կարգավորումներ և գաղտնիքներ, որոնք backend-ին տրվում են աշխատանքի ժամանակ և պահվում են կոդից դուրս։

Պե՞տք է արդյոք ձեր հավելվածին backend

Եթե ձեր հավելվածը…	Backend է պետք՞
Ցուցադրում է տեղեկություն, որ բոլորի համար նույնն է	Ոչ
Ունի կապի ձև, որ միայն ձեզ է էլ. նամակ ուղարկում	Սովորաբար փոքր, կամ ձևերի ծառայություն
Պահում է տվյալներ, որ ուրիշները կտեսնեն	Այո
Ունի մուտք և անձնական տվյալներ	Այո
Ընդունում է վճարումներ	Այո. առնվազն ստուգումներ ստեղծելու և վճարման webhook-ներ ստանալու համար
Օգտագործում է վճարովի AI կամ այլ API գաղտնի բանալիով	Այո, որպեսզի բանալին չհասնի բրաուզեր

Սովորական սխալներ և թյուրըմբռնումներ

Գաղտնի բանալիները frontend-ում դնելը։ Դրանք տեսանելի կլինեն ցանկացած մարդու համար, ով բացում է բրաուզերի մշակողի գործիքները։ Սա AI-ով կառուցված հավելվածներում ամենատարածված լուրջ սխալն է։
Կանոնները միայն frontend-ում կիրառելը։ Ադմինից բացի ուրիշների համար «ջնջել» կոճակը թաքցնելը պաշտպանություն չէ. backend-ը պետք է մերժի հարցումը։
Ենթադրելը, որ backend-ը «միայն տվյալների բազան է»։ Տվյալների բազան պահում է տվյալները. backend-ը որոշում է, թե ով կարող է կարդալ և փոխել դրանք և ինչպես։
Կարծելը, որ JavaScript-ը նշանակում է frontend։ JavaScript-ը և TypeScript-ը աշխատում են նաև սերվերների վրա՝ Node.js-ով։
Սխալ մասին մեղադրելը։ Եթե էջը ճիշտ է երևում, բայց տվյալները սխալ են, խնդիրը սովորաբար backend-ում կամ տվյալների բազայում է, ոչ թե դիզայնում։
Չափազանց շատ կառուցելը։ Պորտֆոլիոյին հատուկ backend պետք չէ։ Դրա ավելացումը ավելացնում է ծախս և շարժական մասեր։

Ի՞նչ խնդրել ձեր AI builder-ից

«Այս հավելվածի ո՞ր մասերն են աշխատում բրաուզերում, և որոնք՝ սերվերի վրա»։
«Տեղափոխիր բոլոր API բանալիները backend-ին և կարդա դրանք միջավայրի փոփոխականներից»։
«Ստուգիր յուրաքանչյուր ձև նաև սերվերի վրա, ոչ միայն բրաուզերում»։
«Կիրառիր backend-ում, որ միայն ադմինները կարող են ջնջել գրանցումները»։
«Էջը ճիշտ է երևում, բայց տվյալները չեն պահվում. ստուգիր backend-ի լոգերում հարցումը»։
«Սա պարզ մարքեթինգային կայք է. պահիր այն միայն frontend, եթե մեզ backend պետք չէ»։

Frontend և backend Mythex-ում

Նոր Mythex նախագիծը սկսվում է Vite, React, TypeScript և Tailwind frontend-ից, և agent-ը ավելացնում է backend, երբ հավելվածին պետք է։ Կարող եք նաև խնդրել առանձին API Node-ով, Python-ով (FastAPI), C#-ով կամ Java-ով՝ նույն նախագծում frontend-ի կողքին։ Preview-ում կարող եք անցնել կայքի և API սերվերի միջև, իսկ հրապարակելիս երկուսն էլ տեղակայվում են, իսկ անհրաժեշտության դեպքում ավելանում են տվյալների բազա և ֆայլերի պահոց։ Փաստաթղթերը նկարագրում են բազմասպասարկու հավելվածները, web hosting ուղեցույցը բացատրում է, թե որտեղ է աշխատում յուրաքանչյուր կես՝ արդեն ակտիվ լինելիս, իսկ հավելվածների ձևանմուշները full-stack օրինակներ տեսնելու արագ միջոց են։

Հարցեր

Ո՞րն է տարբերությունը frontend-ի և backend-ի միջև։

Frontend-ը հավելվածի այն մասն է, որն աշխատում է օգտատիրոջ բրաուզերում՝ էջերը, կոճակները և ձևերը, որ նա տեսնում և օգտագործում է։ Backend-ը աշխատում է սերվերի վրա, որը օգտատերը երբեք չի տեսնում. այն պահում է տվյալները, կիրառում բիզնես կանոնները, ստուգում թույլտվությունները և կապվում այլ ծառայությունների հետ։

Յուրաքանչյուր հավելված պե՞տք է backend։

Ոչ։ Մարքեթինգային կայքը, պորտֆոլիոն կամ պարզ լենդինգ էջը կարող է լինել միայն frontend։ Հենց որ հավելվածին անհրաժեշտ է պահել ընդհանուր տվյալներ, մուտք գործել օգտատիրոջ հաշիվ, ընդունել վճարումներ կամ օգտագործել գաղտնի API բանալիներ, նրան անհրաժեշտ է ինչ-որ տեսակի backend։

HTML-ը frontend է, թե backend։

Բրաուզերում աշխատող HTML, CSS և JavaScript-ը frontend են։ JavaScript-ը կարող է աշխատել նաև սերվերի վրա՝ Node.js-ի միջոցով, և այդ դեպքում այն backend կոդ է։ Որոշիչը լեզուն չէ, այլ այն, թե որտեղ է աշխատում կոդը։

Ի՞նչ է նշանակում full stack։

Full stack-ը նշանակում է և՛ frontend-ի, և՛ backend-ի (և սովորաբար տվյալների բազայի) ընդգրկում։ Full-stack հավելվածը ունի այս երեք մասերից բոլորը, իսկ full-stack մշակողը աշխատում է դրանցից բոլորի վրա։