Frontend vs Backend: Ялгаа нь юу вэ?
Frontend бол аппын хэрэглэгчийн browser дээр ажилладаг хэсэг — тэд харж, дарж, бөглөдөг хуудас, товчлуур, маягт, анимэйшнүүд. Backend бол хэрэглэгчийн харахгүй сервер дээр ажилладаг хэсэг: өгөгдлийг хадгалж, буцаан авч, бизнесийн дүрмийг хэрэгжүүлж, хэн юу хийж болохыг шалгаж, төлбөр болон имэйл зэрэг бусад үйлчилгээтэй харилцдаг. Энэ хоёр хэсэг нь API-ээр харилцаж, өгөгдлийн сантай хамт "full-stack" апп бүрдүүлдэг.
Яагаад AI-р бүтээхдээ энэ нь чухал вэ
AI builder-т апп тайлбарлахдаа та хоёр хэсгийг зэрэг дүрсэлж байгаа, харин үүнийг мэдэж байгаа эсэхээс үл хамаарна. "Хэрэглэгчид цаг захиалж болно" гэдэг нь захиалгын маягт (frontend), аль цаг сул байгааг тодорхойлох дүрэм (backend) болон захиалгыг хадгалах газар (өгөгдлийн сан) гэсэн үг.
Хуваарийг мэдэх нь гурван практик талаас тусална:
- Аюулгүй байдал. Frontend дээрх зүйлийг хэрэглэгч харж, өөрчилж чадна. Дүрэм болон нууцууд backend дээр байх ёстой.
- Алдаа олох. "Товчлуур хариу өгдөггүй" болон "товчлуур хариу өгдөг боловч юу ч хадгалагддаггүй" гэдэг нь өөр өөр хэсгийг заадаг бөгөөд аль нь харагдаж байгааг хэлэх нь AI-д шалтгааныг илүү хурдан олоход тусална.
- Hosting ба өртөг. Зөвхөн frontend сайт нь хямд бөгөөд хялбар байрлуулагддаг. Backend нь ямар нэг газар ажиллах ёстой, энэ нь таны төлбөр болон апп идэвхгүй байх үеийн ажиллагааг нөлөөлдөг.
Өдөр тутмын жишээ
Ресторанаар жишээ авъя.
Frontend бол идэх өрөө: цэс, ширээ, интерьер, захиалга авдаг зөөгч. Үйлчлүүлэгчид үүнийг хардаг бөгөөд бүгдэд нь хүрч болдог.
Backend бол гал тогоо ба оффис: тогооч нар хоол хийдэг, агуулахын бараа, касс, хямдралд хэн эрхтэйг тодорхойлдог менежерийн дүрэм. Үйлчлүүлэгчид тэнд ордоггүй, орох ёсгүй.
API бол тэдгээрийн хоорондох цонх — захиалга орж, хоол гарч ирдэг, тохиролцсон хэлбэртэй тийм газар. Өгөгдлийн сан бол агуулах ба захиалгын дэвтэр.
Үйлчлүүлэгч захиалгын цаасаа өөрөө бичиж болно (frontend нь түүний хяналтад байна), гэхдээ гал тогоо өөрөө юу хийх, ямар үнэ авахаа шийднэ. Тийм учраас чухал шалгалтууд арын талд байх ёстой.
Тус бүр юу хийдэг вэ
| Frontend | Backend | |
|---|---|---|
| Ажиллаж байгаа газар | Хэрэглэгчийн төхөөрөмж, browser дээр | Таны (эсвэл hosting-ийн) удирддаг сервер |
| Гол ажил | Харуулах, оролт авах, дарах үйлдэлд хариу өгөх | Өгөгдөл хадгалах, дүрэм хэрэгжүүлэх, эрх шалгах, бусад үйлчилгээ дуудах |
| Хэрэглэгч кодыг харж, өөрчилж чадах уу? | Тийм — browser-т нь татагддаг | Үгүй |
| Нууц API түлхүүр хадгалж чадах уу? | Үгүй | Тийм, environment variable-д |
| Түгээмэл технологи | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Юу буруу болдог вэ | Мобайл дээр layout эвдэрдэг, товч ажилладаггүй, хуудас удаан | Өгөгдөл хадгалагддаггүй, буруу өгөгдөл харагддаг, алдаа, аюулгүй байдлын нүх |
Зарим framework энэ зааглалыг бүдгэрүүлдэг. Жишээ нь Next.js нь нэг төслийн дотор browser-ийн код болон серверийн кодыг хамт байлгах боломжийг өгдөг. Санаа нь хэвээрээ: асуулт нь үргэлж энэ хэсэг хаана ажилладаг вэ? гэдэг.
Жишээ: хичээлд бүртгүүлэх
Хүн йогийн хичээлд бүртгүүлэхэд юу болдгийг алхам алхмаар харъя.
| Алхам | Хаана | Юу болдог |
|---|---|---|
| 1 | Frontend | Хуваарийн хуудас ачаалж, энэ долоо хоногийн хичээлүүдийг backend-ээс асууна. |
| 2 | Backend | Өгөгдлийн сангаас хичээл, бүртгэлийг уншиж, үлдсэн суудлыг тооцоолж, жагсаалтыг JSON-оор буцаана. |
| 3 | Frontend | Хичээл бүрийг цаг, багш, үлдсэн суудалтай хамт харуулна. |
| 4 | Frontend | Хэрэглэгч хичээл сонгож, нэр, имэйлээ бөглөнө. Маягт имэйл зөв эсэхийг шалгана (зөвлөмж, баталгаа биш). |
| 5 | Frontend → Backend | API-гаар POST /api/bookings хүсэлт илгээнэ. |
| 6 | Backend | Оролтыг дахин баталгаажуулж, хичээл дүүрээгүйг шалгаад, захиалгыг хадгалж, нууц түлхүүрээр имэйл үйлчилгээнээс баталгаажуулах имэйл илгээхийг хүсэлт гаргана. |
| 7 | Backend → Frontend | "Захиалагдлаа" эсвэл "Уучлаарай, дүүрсэн байна" гэж хариулна. |
| 8 | Frontend | Баталгаажуулах дэлгэцийг харуулна. |
Алхам 4 ба 6-ыг анхаараарай: оролтыг хоёр удаа шалгадаг. Frontend-ийн шалгалт нь шууд хариу өгөхөд зориулагдсан; backend-ийн шалгалт нь үнэхээр чухал, учир нь хэрэглэгч frontend-ийг бүрмөсөн алгасаж чадна.
Түгээмэл нэр томъёо
| Нэр томъёо | Утга |
|---|---|
| Client / server | Client нь хүсэлт илгээдэг browser (эсвэл апп); server нь хариулдаг. |
| UI | User interface — дэлгэц, удирдлагын хэсгүүд. |
| API | Frontend backend-ээс өгөгдөл эсвэл үйлдэл хүсэх тохиролцсон арга. |
| Endpoint | API дээрх тодорхой нэг URL, жишээ нь /api/bookings. |
| Full stack | Frontend + backend + өгөгдлийн сан хамтдаа. Full-stack апп гэж юу вэ гэдгийг үзнэ үү. |
| Static site | Өөрийн backend-гүй frontend; бүх хүнд ижил файлууд. |
| SPA | Single-page application: шинэ хуудас ачаалахгүйгээр browser дотор хуудсыг шинэчилдэг frontend. |
| Server-side rendering (SSR) | Сервер хуудасныхаа HTML-ийг илгээхээс өмнө бүтээдэг; энэ нь хурд болон SEO-д тустай байж болно. |
| Environment variables | Backend-д ажиллах үед өгдөг тохиргоо болон нууцууд; кодноос гадуур хадгалагддаг. |
Таны апп backend хэрэгтэй юу?
| Таны апп… | Backend хэрэгтэй юу? |
|---|---|
| Бүгдэд нь адилхан мэдээлэл харуулдаг | Үгүй |
| Зөвхөн танд имэйл илгээдэг холбоо барих маягттай | Ихэвчлэн жижиг backend, эсвэл маягтын үйлчилгээ |
| Бусад хүмүүс харах өгөгдөл хадгалдаг | Тийм |
| Нэвтрэлт болон хувийн өгөгдөлтэй | Тийм |
| Төлбөр авдаг | Тийм — дор хаяж checkout үүсгэх, төлбөрийн webhook хүлээн авахад |
| Нууц түлхүүртэй төлбөртэй AI эсвэл бусад API ашигладаг | Тийм, түлхүүрийг browser-ээс хамгаалахын тулд |
Түгээмэл алдаа, буруу ойлголт
- Нууц түлхүүрийг frontend-д байрлуулах. Browser-ийн developer tools нээсэн хэн бүр үүнийг харж чадна. Энэ нь AI-р бүтээсэн аппуудын хамгийн түгээмэл, ноцтой алдаа.
- Дүрмийг зөвхөн frontend дээр хэрэгжүүлэх. Админ биш хүмүүст "устгах" товчийг нуух нь хамгаалалт биш; backend хүсэлтийг татгалзах ёстой.
- Backend нь "зөвхөн өгөгдлийн сан" гэж бодох. Өгөгдлийн сан өгөгдлийг хадгална. Backend нь хэн уншиж, өөрчилж болохыг болон хэрхэн хийхийг шийддэг.
- JavaScript гэдэг нь frontend гэж бодох. JavaScript болон TypeScript нь Node.js-ээр серверт ч ажилладаг.
- Буруу хэсгийг буруутгах. Хуудас зөв харагдаж байгаа боловч өгөгдөл буруу бол асуудал ихэвчлэн backend эсвэл өгөгдлийн санд байдаг, дизайнд биш.
- Хэт их барих. Портфолио-д захиалгат backend хэрэгтэй биш. Нэмснээр өртөг болон хөдөлгөөнт хэсгүүд нэмэгдэнэ.
AI builder-доо юу гуйх вэ
- "Энэ аппын аль хэсэг browser дээр, аль нь сервер дээр ажилладаг вэ?"
- "API түлхүүрүүдийг backend руу шилжүүлж, environment variable-ээс унш."
- "Маягт бүрийг browser дээр төдийгүй серверт мөн баталгаажуул."
- "Зөвхөн админ захиалга устгаж чадахаар backend дээр хэрэгжүүл."
- "Хуудас зөв харагдаж байгаа боловч өгөгдөл хадгалагдахгүй байна — хүсэлтийг backend-ийн логоос шалга."
- "Энэ бол энгийн маркетингийн сайт; бид backend хэрэгтэй болтол зөвхөн frontend хэвээр байлгаарай."
Mythex дээрх frontend ба backend
Mythex-ийн шинэ төсөл Vite, React, TypeScript болон Tailwind frontend-ээс эхэлдэг бөгөөд таны аппад backend хэрэгтэй болмогц agent үүнийг нэмдэг — эсвэл та ижил төсөл дотор зэрэгцэн ажиллах Node, Python (FastAPI), C# эсвэл Java-р бичигдсэн тусдаа API хүсэж болно. Урьдчилан харахдаа вэбсайт болон API серверийн хооронд шилжиж болно, харин нийтлэхэд хоёулаа байрлуулагддаг, шаардлагатай үед өгөгдлийн сан болон файлын сан нэмэгддэг. Олон үйлчилгээтэй аппууд-ын талаар docs-д, вэб hosting гарын авлагад таны аппын хоёр хэсэг хаана ажилладагийг live болсны дараа тайлбарласан байгаа, аппын загварууд нь full-stack жишээнүүдийг хурдан харах хамгийн хялбар арга юм.
Асуултууд
Frontend ба backend-ийн ялгаа юу вэ?
Frontend бол аппын хэрэглэгчийн browser дээр ажилладаг хэсэг — тэд харж, дарж байгаа хуудас, товчлуур, маягтууд. Backend нь хэрэглэгчийн хэзээ ч харахгүй сервер дээр ажилладаг; өгөгдөл хадгалж, бизнесийн дүрмийг хэрэгжүүлж, эрхийг шалгаж, бусад үйлчилгээтэй харилцдаг.
Аппд заавал backend хэрэгтэй юу?
Үгүй. Маркетингийн сайт, портфолио эсвэл энгийн landing page зөвхөн frontend байж болно. Аппд хамтын өгөгдөл хадгалах, хэрэглэгч нэвтрүүлэх, төлбөр авах эсвэл нууц API түлхүүр ашиглах шаардлагатай болмогц ямар нэг хэлбэрийн backend хэрэгтэй.
HTML нь frontend уу, backend уу?
Browser дээр ажиллах HTML, CSS, JavaScript бол frontend. JavaScript-ийг Node.js ашиглан сервер дээр ч ажиллуулж болох бөгөөд тэр үед энэ нь backend код болдог. Хэл нь шийдэхгүй; кодыг хаана ажиллаж байгаа нь шийднэ.
Full stack гэдэг нь юу гэсэн үг вэ?
Full stack гэдэг нь frontend болон backend (ихэвчлэн өгөгдлийн сангийн хамт) хоёрыг хамтад нь хамарч байгааг хэлнэ. Full-stack апп бол гурван хэсгийг бүгдийг нь агуулдаг; full-stack хөгжүүлэгч эдгээр бүгд дээр ажилладаг.