Frontend vs Backend: என்ன வித்தியாசம்?
Frontend என்பது ஒரு ஆப்பின் பகுதி, அது பயனரின் உலாவியில் இயங்குகிறது — அவர்கள் பார்த்து கிளிக் செய்யும் பக்கங்கள், பட்டன்கள், படிவங்கள் மற்றும் அனிமேஷன்கள். Backend என்பது பயனர் ஒருபோதும் பார்க்காத சர்வரில் இயங்கும் பகுதி: அது தரவைச் சேமித்து எடுக்கிறது, வணிக விதிகளைப் பயன்படுத்துகிறது, யார் எதைச் செய்யலாம் என்பதைச் சரிபார்க்கிறது, மற்றும் பணம் செலுத்துதல், மின்னஞ்சல் போன்ற பிற சேவைகளுடன் பேசுகிறது. இரண்டும் ஒரு API மூலம் தொடர்புகொள்கின்றன; தரவுத்தளத்துடன் சேர்ந்து அவை “full-stack” ஆப்பை உருவாக்குகின்றன.
AI உடன் உருவாக்கும்போது ஏன் இது முக்கியம்
AI builder-க்கு ஒரு ஆப்பை விவரிக்கும்போது, நீங்கள் உணர்ந்தாலும் உணராவிட்டாலும் இரண்டு பகுதிகளையும் ஒரே நேரத்தில் விவரிக்கிறீர்கள். “வாடிக்கையாளர்கள் ஒரு நேரத்தை பதிவு செய்யலாம்” என்பது ஒரு பதிவுப் படிவம் (frontend), எந்த நேரங்கள் காலியாக உள்ளன என்ற விதிகள் (backend), மற்றும் பதிவுகளைச் சேமிக்க ஓர் இடம் (database) ஆகியவற்றைக் குறிக்கிறது.
இந்தப் பிரிவை அறிவது மூன்று நடைமுறை வழிகளில் உதவுகிறது:
- பாதுகாப்பு. Frontend-இல் உள்ள எதையும் பயனர் பார்க்கவும் மாற்றவும் முடியும். விதிகளும் ரகசியங்களும் backend-இல் இருக்க வேண்டும்.
- பிழைதிருத்தம். “பட்டன் பதிலளிக்கவில்லை” மற்றும் “பட்டன் பதிலளிக்கிறது, ஆனால் எதுவும் சேமிக்கப்படவில்லை” ஆகியவை வெவ்வேறு பகுதிகளைச் சுட்டுகின்றன; நீங்கள் எதைப் பார்க்கிறீர்கள் என்று சொன்னால் AI காரணத்தை வேகமாகக் கண்டறியும்.
- ஹோஸ்டிங் மற்றும் செலவு. Frontend மட்டும் உள்ள தளம் மலிவானது, எளிதாக ஹோஸ்ட் செய்யலாம். Backend எங்காவது இயங்க வேண்டும்; அது உங்கள் செலவையும், ஆப் செயலற்று இருக்கும்போது அது எப்படி நடந்துகொள்கிறது என்பதையும் பாதிக்கிறது.
அன்றாட உவமை
ஒரு உணவகத்தை எடுத்துக்கொள்ளுங்கள்.
Frontend என்பது சாப்பாட்டு அறை: மெனு, மேஜைகள், அலங்காரம், ஆர்டர் எடுக்கும் பணியாளர். இது வாடிக்கையாளர்களுக்காக வடிவமைக்கப்பட்டது; அவர்கள் அனைத்தையும் பார்க்கவும் தொடவும் முடியும்.
Backend என்பது சமையலறையும் அலுவலகமும்: சமைக்கும் சமையல்காரர்கள், இருப்பு அறை, பணப் பெட்டி, யாருக்கு தள்ளுபடி என்ற மேலாளரின் விதிகள். வாடிக்கையாளர்கள் அங்கே செல்வதில்லை, செல்லவும் கூடாது.
API என்பது இரண்டிற்கும் இடையிலான வழி — ஆர்டர்கள் உள்ளே செல்லும், உணவுகள் வெளியே வரும் கவுண்டர், ஒப்புக்கொள்ளப்பட்ட வடிவத்தில். தரவுத்தளம் என்பது இருப்பு அறையும் ஆர்டர் பதிவேடும்.
வாடிக்கையாளர் தங்கள் ஆர்டர் சீட்டை மாற்றி எழுதலாம் (frontend அவர்கள் கட்டுப்பாட்டில் உள்ளது), ஆனால் சமையலறையே எதைச் சமைப்பது, எவ்வளவு கட்டணம் என்பதை இன்னும் முடிவு செய்கிறது. அதனால்தான் முக்கியமான சரிபார்ப்புகள் பின்பக்கத்தில் இருக்க வேண்டும்.
ஒவ்வொரு பக்கமும் என்ன செய்கிறது
| Frontend | Backend | |
|---|---|---|
| எங்கு இயங்கும் | பயனரின் சாதனத்தில், உலாவியில் | நீங்கள் (அல்லது உங்கள் ஹோஸ்ட்) கட்டுப்படுத்தும் சர்வர் |
| முக்கிய வேலை | காட்டுதல், உள்ளீடு பெறுதல், கிளிக்குகளுக்கு பதிலளித்தல் | தரவைச் சேமித்தல், விதிகளைப் பயன்படுத்துதல், அனுமதிகளை அமல்படுத்துதல், பிற சேவைகளை அழைத்தல் |
| பயனர்கள் குறியீட்டைப் பார்த்து மாற்ற முடியுமா? | ஆம் — அது அவர்களின் உலாவிக்கு பதிவிறக்கப்படுகிறது | இல்லை |
| ரகசிய API விசைகளை வைத்திருக்க முடியுமா? | முடியாது | முடியும், சூழல் மாறிகளில் (environment variables) |
| பொதுவான தொழில்நுட்பங்கள் | 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 | API வழியாக POST /api/bookings கோரிக்கையை அனுப்புகிறது. |
| 6 | Backend | உள்ளீட்டை மீண்டும் சரிபார்க்கிறது, வகுப்பு நிரம்பவில்லை என்று உறுதி செய்கிறது, பதிவைச் சேமிக்கிறது, ரகசிய விசையைப் பயன்படுத்தி உறுதிப்படுத்தல் மின்னஞ்சல் அனுப்பும்படி மின்னஞ்சல் சேவையைக் கேட்கிறது. |
| 7 | Backend → Frontend | “பதிவு செய்யப்பட்டது” அல்லது “மன்னிக்கவும், நிரம்பிவிட்டது” என்று பதில் அனுப்புகிறது. |
| 8 | Frontend | உறுதிப்படுத்தல் திரையைக் காட்டுகிறது. |
படி 4 மற்றும் 6 ஐக் கவனியுங்கள்: உள்ளீடு இரண்டு முறை சரிபார்க்கப்படுகிறது. Frontend சரிபார்ப்பு உடனடி பின்னூட்டம் தருகிறது; backend சரிபார்ப்பே உண்மையில் கணக்கில் கொள்ளப்படுகிறது, ஏனெனில் ஒரு விடாப்பிடியான பயனர் frontend-ஐ முழுவதுமாகத் தவிர்க்க முடியும்.
பொதுவான சொற்களின் விளக்கம்
| சொல் | பொருள் |
|---|---|
| Client / server | Client என்பது கோரிக்கை அனுப்பும் உலாவி (அல்லது ஆப்); server அவற்றிற்குப் பதிலளிக்கிறது. |
| UI | User interface — திரைகளும் கட்டுப்பாடுகளும். |
| API | Frontend backend-இடம் தரவு அல்லது செயல்களைக் கேட்கும் ஒப்புக்கொள்ளப்பட்ட முறை. |
| Endpoint | /api/bookings போன்ற API-இல் உள்ள ஒரு குறிப்பிட்ட URL. |
| Full stack | Frontend + backend + தரவுத்தளம் சேர்ந்து. full-stack ஆப் என்றால் என்ன என்று பாருங்கள். |
| Static site | சொந்த backend இல்லாத frontend; எல்லோருக்கும் ஒரே கோப்புகள். |
| SPA | Single-page application: பக்கங்களை புதிதாக ஏற்றாமல் உலாவியிலேயே பக்கத்தைப் புதுப்பிக்கும் frontend. |
| Server-side rendering (SSR) | அனுப்புவதற்கு முன் சர்வர் பக்கத்தின் HTML-ஐ உருவாக்குகிறது; இது வேகத்திற்கும் SEO-க்கும் உதவலாம். |
| Environment variables | குறியீட்டில் வைக்காமல், இயக்கத்தின்போது backend-க்கு கொடுக்கப்படும் அமைப்புகளும் ரகசியங்களும். |
உங்கள் ஆப்புக்கு backend தேவையா?
| உங்கள் ஆப்… | Backend தேவையா? |
|---|---|
| எல்லோருக்கும் ஒரே தகவலைக் காட்டுகிறது | இல்லை |
| உங்களுக்கு மட்டும் மின்னஞ்சல் அனுப்பும் தொடர்புப் படிவம் உள்ளது | பொதுவாக சிறிய backend அல்லது படிவ சேவை |
| மற்றவர்கள் பார்க்கும் தரவைச் சேமிக்கிறது | ஆம் |
| உள்நுழைவுகளும் தனிப்பட்ட தரவும் உள்ளன | ஆம் |
| கட்டணம் பெறுகிறது | ஆம் — குறைந்தபட்சம் checkout-களை உருவாக்கவும் கட்டண webhook-களைப் பெறவும் |
| ரகசிய விசையுடன் கட்டண AI அல்லது பிற API-ஐப் பயன்படுத்துகிறது | ஆம், விசையை உலாவிக்கு வெளியே வைத்திருக்க |
பொதுவான தவறுகளும் தவறான புரிதல்களும்
- ரகசிய விசைகளை frontend-இல் வைப்பது. உலாவியின் டெவலப்பர் கருவிகளைத் திறக்கும் எவரும் அதைப் பார்க்கலாம். AI-ஆல் உருவாக்கப்படும் ஆப்புகளில் இதுவே மிகவும் பொதுவான தீவிரத் தவறு.
- விதிகளை frontend-இல் மட்டும் அமல்படுத்துவது. நிர்வாகி அல்லாதவர்களுக்கு “நீக்கு” பட்டனை மறைப்பது பாதுகாப்பு அல்ல; backend கோரிக்கையை மறுக்க வேண்டும்.
- Backend என்பது “வெறும் தரவுத்தளம்” என்று நினைப்பது. தரவுத்தளம் தரவைச் சேமிக்கிறது. யார் அதைப் படிக்கலாம், மாற்றலாம், எப்படி என்பதை backend தீர்மானிக்கிறது.
- JavaScript என்றால் frontend என்று நினைப்பது. JavaScript மற்றும் TypeScript Node.js மூலம் சர்வர்களிலும் இயங்குகின்றன.
- தவறான பகுதியைக் குற்றம் சாட்டுவது. பக்கம் சரியாகத் தெரிந்தும் தரவு தவறாக இருந்தால், பிரச்சனை பெரும்பாலும் backend அல்லது தரவுத்தளத்தில் இருக்கும், வடிவமைப்பில் அல்ல.
- தேவைக்கு மேல் கட்டுவது. போர்ட்ஃபோலியோவுக்கு தனிப்பயன் backend தேவையில்லை. அதைச் சேர்ப்பது செலவையும் நகரும் பகுதிகளையும் அதிகரிக்கும்.
உங்கள் AI builder-இடம் கேட்க வேண்டியவை
- “இந்த ஆப்பின் எந்தப் பகுதிகள் உலாவியிலும், எவை சர்வரிலும் இயங்குகின்றன?”
- “எல்லா API விசைகளையும் backend-க்கு நகர்த்தி சூழல் மாறிகளிலிருந்து படியுங்கள்.”
- “ஒவ்வொரு படிவத்தையும் உலாவியிலும் சர்வரிலும் சரிபார்க்கவும்.”
- “நிர்வாகிகள் மட்டுமே பதிவுகளை நீக்க முடியும் என்பதை backend-இல் அமல்படுத்துங்கள்.”
- “பக்கம் சரியாக உள்ளது, ஆனால் தரவு சேமிக்கப்படவில்லை — அந்தக் கோரிக்கைக்கான backend பதிவுகளைப் பாருங்கள்.”
- “இது ஒரு எளிய மார்க்கெட்டிங் தளம்; backend தேவைப்படும் வரை frontend மட்டுமே வைத்திருங்கள்.”
Mythex-இல் frontend மற்றும் backend
ஒரு புதிய Mythex திட்டம் Vite, React, TypeScript மற்றும் Tailwind frontend-இலிருந்து தொடங்குகிறது; உங்கள் ஆப்புக்கு தேவைப்படும்போது agent backend-ஐச் சேர்க்கிறது. அல்லது அதே திட்டத்தில் frontend-உடன் இணையாக Node, Python (FastAPI), C# அல்லது Java-இல் தனி API-ஐக் கேட்கலாம். முன்னோட்டத்தில் இணையதளத்துக்கும் API சர்வருக்கும் இடையே மாறலாம்; வெளியிடும்போது இரண்டும் deploy ஆகின்றன, தேவைப்பட்டால் தரவுத்தளம் மற்றும் கோப்பு சேமிப்பும் சேர்க்கப்படுகின்றன. பல-சேவை ஆப்புகள் பற்றி ஆவணங்களில் உள்ளது; web hosting வழிகாட்டி நேரலையில் ஒவ்வொரு பகுதியும் எங்கு இயங்குகிறது என்பதை விளக்குகிறது; app templates முழு-stack உதாரணங்களை விரைவாகப் பார்க்க உதவும்.
கேள்விகள்
frontend மற்றும் backend இடையே என்ன வித்தியாசம்?
Frontend என்பது ஒரு ஆப்பின் பகுதி, அது பயனரின் உலாவியில் இயங்கும் — பக்கங்கள், பட்டன்கள் மற்றும் படிவங்கள் அவர்கள் பார்ப்பவை. Backend என்பது பயனர் ஒருபோதும் பார்க்காத சர்வரில் இயங்கும் பகுதி; அது தரவைச் சேமிக்கிறது, வணிக விதிகளைப் பயன்படுத்துகிறது, அனுமதிகளைச் சரிபார்க்கிறது மற்றும் பிற சேவைகளுடன் பேசுகிறது.
ஒவ்வொரு ஆப்புக்கும் backend தேவையா?
இல்லை. ஒரு மார்க்கெட்டிங் தளம், போர்ட்ஃபோலியோ அல்லது எளிய லேண்டிங் பக்கம் frontend மட்டுமே கொண்டிருக்கலாம். ஆப்புக்கு பகிரப்பட்ட தரவைச் சேமிக்கவோ, பயனர்களை உள்நுழையவோ, கட்டணம் பெறவோ அல்லது ரகசிய API விசைகளைப் பயன்படுத்தவோ தேவைப்பட்டால் ஏதேனும் ஒரு வகை backend தேவைப்படும்.
HTML frontend-ஆ அல்லது backend-ஆ?
உலாவியில் இயங்கும் HTML, CSS மற்றும் JavaScript frontend ஆகும். Node.js பயன்படுத்தி JavaScript சர்வரிலும் இயங்கலாம், அப்போது அது backend குறியீடு. மொழி அதை முடிவு செய்வதில்லை; குறியீடு எங்கு இயங்குகிறது என்பதே முடிவு செய்கிறது.
full stack என்றால் என்ன?
Full stack என்பது frontend மற்றும் backend இரண்டையும் (பொதுவாக தரவுத்தளத்தையும்) உள்ளடக்குவது. Full-stack ஆப் என்பது மூன்று பகுதிகளையும் கொண்ட ஆப்; full-stack டெவலப்பர் அனைத்திலும் வேலை செய்கிறார்.