Frontend vs Backend: Ano ang Pagkakaiba?
Ang frontend ang bahagi ng app na tumatakbo sa browser ng user, ang mga pahina, button, form at animation na nakikita at kinaklik nila. Ang backend ang bahaging tumatakbo sa server na hindi nakikita ng user: nag-iimbak at kumukuha ito ng data, nagpapatupad ng business rules, tinitingnan kung sino ang pinapayagang gumawa ng ano, at nakikipag-usap sa ibang serbisyo gaya ng payments at email. Nagkakausap ang dalawa sa pamamagitan ng API, at kasama ang database, bumubuo sila ng “full-stack” na app.
Bakit mahalaga ito kapag gumagawa gamit ang AI
Kapag inilarawan mo ang app sa isang AI builder, inilalarawan mo na ang dalawang bahagi nang sabay, aware ka man o hindi. Ang “Pwedeng mag-book ng slot ang customers” ay nangangahulugan ng booking form (frontend), mga patakaran kung aling slot ang bakante (backend) at lugar kung saan i-save ang bookings (database).
Makakatulong ang pag-alam sa hatiang ito sa tatlong praktikal na paraan:
- Seguridad. Anumang nasa frontend ay nakikita at nababago ng user. Dapat nasa backend ang mga rules at secrets.
- Debugging. Ang “hindi tumutugon ang button” at ang “tumutugon ang button pero walang na-save” ay tumuturo sa magkaibang bahagi, at ang pagsasabi kung alin ang nakikita mo ay nakakatulong sa AI na mas mabilis mahanap ang sanhi.
- Hosting at gastos. Simple at mura i-host ang site na frontend lang. Kailangang tumakbo ang backend sa isang lugar, at naaapektuhan nito kung magkano ang babayaran mo at kung paano kumikilos ang app kapag hindi ginagamit.
Isang pang-araw-araw na halimbawa
Isipin ang isang restawran.
Ang frontend ang dining room: ang menu, mga mesa, dekorasyon, at ang waiter na kumukuha ng order. Dinisenyo ito para sa mga customer at nakikita at nahahawakan nila ang lahat ng ito.
Ang backend ang kusina at opisina: ang mga chef na nagluluto, ang stockroom, ang cash register, at ang patakaran ng manager kung sino ang makakakuha ng discount. Hindi pumapasok ang mga customer doon, at hindi dapat nila magawa.
Ang API ang daanan sa pagitan nila, ang counter kung saan pumapasok ang order at lumalabas ang pagkain, sa napagkasunduang format. Ang database ang stockroom at ang order book.
Maaaring baguhin ng customer ang order slip nila (nasa kontrol nila ang frontend), pero ang kusina pa rin ang nagpapasya kung ano ang lulutuin at magkano ang sisingilin. Kaya dapat nasa likod ang mahahalagang check.
Ano ang ginagawa ng bawat panig
| Frontend | Backend | |
|---|---|---|
| Tumatakbo sa | Device ng user, sa browser | Server na kontrolado mo (o ng host mo) |
| Pangunahing trabaho | Magpakita ng mga bagay, kumuha ng input, tumugon sa clicks | Mag-imbak ng data, magpatupad ng rules, magbigay ng permiso, tumawag sa ibang serbisyo |
| Nakikita at nababago ba ng users ang code? | Oo, dahil dina-download ito sa browser nila | Hindi |
| Kayang humawak ng secret API keys? | Hindi | Oo, sa environment variables |
| Karaniwang teknolohiya | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| Ano ang madalas masira | Nasisira ang layout sa mobile, hindi tumutugon ang button, mabagal ang page | Hindi na-save ang data, maling data ang lumalabas, errors, butas sa seguridad |
May ilang framework na nagpapalabo ng linyang ito. Halimbawa, pinapayagan ng Next.js ang isang project na maglaman ng parehong browser code at server code. Pareho pa rin ang ideya: ang tanong palagi ay saan tumatakbo ang bahaging ito?
Halimbawang gawa: pag-book ng klase
Narito ang nangyayari kapag may nag-book ng yoga class, hakbang-hakbang.
| Hakbang | Saan | Ano ang nangyayari |
|---|---|---|
| 1 | Frontend | Nag-load ang schedule page at humihingi ng listahan ng klase ngayong linggo sa backend. |
| 2 | Backend | Binabasa ang mga klase at bookings mula sa database, kinakalkula ang bakanteng slots, at ibinabalik ang listahan bilang JSON. |
| 3 | Frontend | Ipinapakita ang bawat klase kasama ang oras, guro at bakanteng slots. |
| 4 | Frontend | Pinipili ng user ang klase at nilalagyan ang pangalan at email. Tinitingnan ng form kung mukhang tama ang email (para sa kaginhawaan, hindi garantiya). |
| 5 | Frontend → Backend | Nagpapadala ng request na POST /api/bookings sa pamamagitan ng API. |
| 6 | Backend | Muling bini-validate ang input, tinitingnan kung hindi pa puno ang klase, sine-save ang booking, at humihiling sa email service na magpadala ng kumpirmasyon gamit ang secret key. |
| 7 | Backend → Frontend | Ibinabalik ang “booked” o “pasensya, puno na.” |
| 8 | Frontend | Ipinapakita ang confirmation screen. |
Pansinin ang hakbang 4 at 6: dalawang beses chine-check ang input. Ang check sa frontend ay nagbibigay ng agarang feedback; ang check sa backend ang talagang mahalaga, dahil kayang lampasan ng determinadong user ang frontend nang buo.
Mga karaniwang termino
| Termino | Kahulugan |
|---|---|
| Client / server | Ang client ang browser (o app) na gumagawa ng requests; ang server ang sumasagot. |
| UI | User interface, ang mga screen at kontrol. |
| API | Ang napagkasunduang paraan kung paano hihingi ng data o aksyon ang frontend sa backend. |
| Endpoint | Isang partikular na URL sa API, gaya ng /api/bookings. |
| Full stack | Frontend + backend + database na magkasama. Tingnan ang ano ang full-stack app. |
| Static site | Frontend na walang sariling backend; iisa ang mga file para sa lahat. |
| SPA | Single-page application: frontend na nag-a-update ng page sa browser sa halip na mag-load ng bagong pahina. |
| Server-side rendering (SSR) | Binubuo ng server ang HTML ng page bago ipadala, na nakakatulong sa bilis at SEO. |
| Environment variables | Mga setting at secrets na ibinibigay sa backend habang tumatakbo, nakahiwalay sa code. |
Kailangan ba ng app mo ng backend?
| Kung ang app mo… | Kailangan ng backend? |
|---|---|
| Nagpapakita ng impormasyong pareho para sa lahat | Hindi |
| May contact form na email lang ang pinupuntahan | Karaniwan, isang maliit na backend o form service |
| Nag-iimbak ng data na makikita ng ibang tao | Oo |
| May logins at pribadong data | Oo |
| Tumatanggap ng bayad | Oo, kahit para lang gumawa ng checkouts at tumanggap ng payment webhooks |
| Gumagamit ng bayad na AI o ibang API na may secret key | Oo, para hindi makarating ang key sa browser |
Mga karaniwang pagkakamali at maling akala
- Paglalagay ng secret keys sa frontend. Makikita ito ng sinumang magbukas ng developer tools ng browser. Ito ang pinakakaraniwan at seryosong pagkakamali sa mga app na gawa ng AI.
- Pagpapatupad ng rules sa frontend lang. Ang pagtatago ng “delete” button sa mga hindi admin ay hindi proteksyon; dapat tanggihan ng backend ang request.
- Pag-iisip na “database lang” ang backend. Nag-iimbak lang ng data ang database. Ang backend ang nagpapasya kung sino ang makakabasa at makakabago nito, at paano.
- Pag-iisip na ang JavaScript ay frontend lang. Tumatakbo rin sa mga server ang JavaScript at TypeScript, gamit ang Node.js.
- Pagsisi sa maling bahagi. Kung tama ang itsura ng page pero mali ang data, kadalasan nasa backend o database ang problema, hindi sa disenyo.
- Sobrang pagbuo. Hindi nangangailangan ng sariling backend ang portfolio. Dinadagdagan lang nito ang gastos at mga gumagalaw na bahagi.
Ano ang hihilingin sa AI builder mo
- “Alin sa mga bahagi ng app na ito ang tumatakbo sa browser at alin ang nasa server?”
- “Ilipat ang lahat ng API keys sa backend at basahin ang mga ito mula sa environment variables.”
- “I-validate ang bawat form sa server, hindi lang sa browser.”
- “Ipatupad sa backend na ang mga admin lang ang makakapag-delete ng bookings.”
- “Maayos ang itsura ng page pero hindi na-save ang data, tingnan ang backend logs para sa request.”
- “Simpleng marketing site lang ito; panatilihing frontend lang maliban kung kailangan natin ng backend.”
Frontend at backend sa Mythex
Nagsisimula ang bagong Mythex project sa frontend na Vite, React, TypeScript at Tailwind, at idinadagdag ng agent ang backend kapag kailangan ng app mo; o maaari kang humiling ng hiwalay na API sa Node, Python (FastAPI), C# o Java na tatakbo kasama ng frontend sa iisang project. Sa preview, maaari kang lumipat sa pagitan ng website at API server, at kapag nag-publish, ide-deploy ang dalawa, kasama ang database at file storage kapag kinakailangan. Ipinapaliwanag ng mga docs ang multi-service apps, sinasaklaw ng gabay sa web hosting kung saan tumatakbo ang bawat bahagi kapag live na, at ang app templates ay mabilis na paraan para makita ang mga halimbawang full-stack.
Mga tanong
Ano ang pagkakaiba ng frontend at backend?
Ang frontend ang bahagi ng app na tumatakbo sa browser ng user, ang mga pahina, button at form na nakikita at nakikita nila. Ang backend ay tumatakbo sa server na hindi kailanman nakikita ng user; nag-iimbak ito ng data, nagpapatupad ng business rules, tumitingin kung sino ang may permiso sa ano, at nakikipag-ugnayan sa ibang serbisyo.
Kailangan ba ng bawat app ng backend?
Hindi. Maaaring frontend lang ang marketing site, portfolio o simpleng landing page. Kapag kailangan ng app na mag-save ng shared data, mag-log in ng users, tumanggap ng bayad o gumamit ng secret API keys, kailangan na nito ng backend sa anumang anyo.
Frontend ba o backend ang HTML?
Ang HTML, CSS at JavaScript na tumatakbo sa browser ay frontend. Maaari ring tumakbo ang JavaScript sa server gamit ang Node.js, at doon ito backend code. Hindi ang wika ang nagdedesisyon kundi kung saan tumatakbo ang code.
Ano ang ibig sabihin ng full stack?
Ang full stack ay sumasaklaw sa frontend at backend (at kadalasan ang database). Ang full-stack app ay may lahat ng tatlong bahagi; ang full-stack developer ay nagtatrabaho sa lahat ng ito.