Frontend بمقابلہ Backend: فرق کیا ہے؟
Frontend ایپ کا وہ حصہ ہے جو صارف کے براؤزر میں چلتا ہے، یعنی وہ صفحات، بٹن، فارم اور اینیمیشنز جو صارف دیکھتا اور کلک کرتا ہے۔ Backend وہ حصہ ہے جو ایک ایسے سرور پر چلتا ہے جسے صارف نہیں دیکھتا: یہ ڈیٹا محفوظ اور بازیافت کرتا ہے، کاروباری قواعد لاگو کرتا ہے، دیکھتا ہے کہ کون کیا کرنے کی اجازت رکھتا ہے، اور پیمنٹ و ای میل جیسی دوسری سروسز سے بات کرتا ہے۔ یہ دونوں ایک API کے ذریعے بات کرتے ہیں، اور ڈیٹا بیس کے ساتھ مل کر یہ ایک "full-stack" ایپ بناتے ہیں۔
AI کے ساتھ بناتے وقت یہ فرق کیوں اہم ہے
جب آپ کسی AI builder کو ایپ بیان کرتے ہیں، تو آپ دراصل دونوں حصے ایک ساتھ بیان کر رہے ہوتے ہیں، چاہے آپ اس بات کو محسوس کریں یا نہ کریں۔ "گاہک ایک سلاٹ بُک کر سکتے ہیں" کا مطلب ہے بکنگ فارم (Frontend)، یہ قاعدہ کہ کون سے سلاٹ خالی ہیں (Backend)، اور بکنگز محفوظ کرنے کی جگہ (ڈیٹا بیس)۔
یہ تقسیم سمجھنا تین عملی طریقوں سے مدد دیتا ہے:
- سیکیورٹی۔ Frontend میں موجود کسی بھی چیز کو صارف دیکھ اور بدل سکتا ہے۔ قواعد اور خفیہ چابیاں Backend میں رہنی چاہئیں۔
- ڈیبگنگ۔ "بٹن جواب نہیں دیتا" اور "بٹن جواب دیتا ہے مگر کچھ محفوظ نہیں ہوتا" دو مختلف حصوں کی طرف اشارہ کرتے ہیں، اور یہ بتانا کہ آپ کیا دیکھ رہے ہیں AI کو وجہ جلدی تلاش کرنے میں مدد دیتا ہے۔
- ہوسٹنگ اور لاگت۔ صرف Frontend والی سائٹ سستی اور آسانی سے ہوسٹ ہوتی ہے۔ Backend کو کہیں چلنا پڑتا ہے، جس سے آپ کی ادائیگی اور ایپ کے غیر فعال ہونے پر اس کے رویے پر فرق پڑتا ہے۔
روزمرہ کی مثال
ایک ریسٹورنٹ کا تصور کریں۔
Frontend ڈائننگ ہال ہے: مینیو، میزیں، سجاوٹ، اور آرڈر لیتا ہوا ویٹر۔ یہ گاہکوں کے لیے بنایا گیا ہے اور وہ اس کا ہر حصہ دیکھ اور چھو سکتے ہیں۔
Backend کچن اور دفتر ہے: باورچی کھانا بناتے ہیں، گودام ہے، کیش کاؤنٹر ہے، اور مینیجر کے قواعد ہیں کہ کسے رعایت ملے گی۔ گاہک وہاں نہیں جاتے، اور انہیں جانا بھی نہیں چاہیے۔
API ان کے درمیان کا راستہ ہے: وہ کاؤنٹر جہاں آرڈر اندر جاتے ہیں اور کھانے باہر آتے ہیں، ایک طے شدہ شکل میں۔ ڈیٹا بیس گودام اور آرڈر بک ہے۔
گاہک اپنی آرڈر پرچی بدل سکتا ہے (Frontend اس کے کنٹرول میں ہے)، لیکن کچن پھر بھی فیصلہ کرتا ہے کہ کیا پکانا ہے اور کیا قیمت لینی ہے۔ اسی لیے اہم چیک پیچھے، یعنی Backend میں ہونے چاہئیں۔
ہر حصہ کیا کرتا ہے
| Frontend | Backend | |
|---|---|---|
| کہاں چلتا ہے | صارف کے آلے پر، براؤزر میں | وہ سرور جو آپ (یا آپ کا ہوسٹ) کنٹرول کرتا ہے |
| بنیادی کام | چیزیں دکھانا، ان پٹ لینا، کلکس کا جواب دینا | ڈیٹا محفوظ کرنا، قواعد لاگو کرنا، اجازت نافذ کرنا، دوسری سروسز کو کال کرنا |
| کیا صارف کوڈ دیکھ اور بدل سکتے ہیں؟ | ہاں، یہ ان کے براؤزر میں ڈاؤن لوڈ ہوتا ہے | نہیں |
| کیا خفیہ API keys رکھ سکتا ہے؟ | نہیں | ہاں، 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 پر ایک مخصوص 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 درکار ہے؟ |
|---|---|
| ایسی معلومات دکھائے جو سب کے لیے ایک جیسی ہوں | نہیں |
| ایک رابطہ فارم ہو جو صرف آپ کو ای میل کرے | عموماً ایک چھوٹا سا، یا کوئی فارم سروس |
| ایسا ڈیٹا محفوظ کرے جو دوسرے لوگ دیکھیں گے | ہاں |
| لاگ اِن اور نجی ڈیٹا رکھے | ہاں |
| پیمنٹ لے | ہاں، کم از کم چیک آؤٹ بنانے اور پیمنٹ webhooks وصول کرنے کے لیے |
| خفیہ کلید کے ساتھ کوئی پیڈ AI یا دوسری API استعمال کرے | ہاں، تاکہ کلید براؤزر سے دور رہے |
عام غلطیاں اور غلط فہمیاں
- خفیہ کلیدیں Frontend میں رکھنا۔ یہ ہر اس شخص کو نظر آئیں گی جو براؤزر کے developer tools کھولتا ہے۔ AI سے بنی ایپس میں یہ سب سے عام اور سنگین غلطی ہے۔
- قواعد صرف Frontend میں نافذ کرنا۔ غیر ایڈمن صارفین کے لیے "ڈیلیٹ" بٹن چھپا دینا تحفظ نہیں؛ Backend کو درخواست رد کرنی ہوگی۔
- Backend کو "صرف ڈیٹا بیس" سمجھنا۔ ڈیٹا بیس ڈیٹا محفوظ کرتا ہے۔ Backend طے کرتا ہے کہ کون اسے پڑھ اور بدل سکتا ہے اور کیسے۔
- یہ سمجھنا کہ JavaScript کا مطلب ہے Frontend۔ JavaScript اور TypeScript Node.js کے ذریعے سرورز پر بھی چلتے ہیں۔
- غلط حصے کو موردِ الزام ٹھہرانا۔ اگر صفحہ ٹھیک لگے مگر ڈیٹا غلط ہو، تو مسئلہ عموماً Backend یا ڈیٹا بیس میں ہوتا ہے، ڈیزائن میں نہیں۔
- ضرورت سے زیادہ بنانا۔ پورٹ فولیو کو کسی حسب ضرورت Backend کی ضرورت نہیں۔ اسے شامل کرنے سے لاگت اور حرکت پذیر پرزے بڑھتے ہیں۔
اپنے AI builder سے کیا مانگیں
- "اس ایپ کے کون سے حصے براؤزر میں چلتے ہیں اور کون سے سرور پر؟"
- "تمام API keys Backend میں منتقل کریں اور انہیں environment variables سے پڑھیں۔"
- "ہر فارم کو براؤزر کے ساتھ ساتھ سرور پر بھی جانچیں۔"
- "Backend پر نافذ کریں کہ صرف ایڈمن بکنگز ڈیلیٹ کر سکیں۔"
- "صفحہ ٹھیک لگ رہا ہے مگر ڈیٹا محفوظ نہیں ہو رہا، اس درخواست کے لیے Backend logs دیکھیں۔"
- "یہ ایک سادہ مارکیٹنگ سائٹ ہے؛ جب تک ضرورت نہ ہو، اسے صرف Frontend رکھیں۔"
Mythex میں Frontend اور Backend
نیا Mythex پروجیکٹ Vite، React، TypeScript اور Tailwind کے Frontend سے شروع ہوتا ہے، اور جب آپ کی ایپ کو ضرورت ہو تو ایجنٹ Backend شامل کر دیتا ہے۔ آپ Node، Python (FastAPI)، C# یا Java میں الگ API بھی مانگ سکتے ہیں جو اسی پروجیکٹ میں Frontend کے ساتھ چلے۔ پیش نظارہ میں آپ ویب سائٹ اور API سرور کے درمیان تبدیل ہو سکتے ہیں، اور پبلش کرنے پر دونوں تعینات ہوتے ہیں، ضرورت پڑنے پر ڈیٹا بیس اور فائل اسٹوریج کے ساتھ۔ docs میں multi-service ایپس کی تفصیل ہے، ویب ہوسٹنگ گائیڈ بتاتی ہے کہ لائیو ہونے پر ہر حصہ کہاں چلتا ہے، اور ایپ ٹیمپلیٹس full-stack مثالیں دیکھنے کا تیز طریقہ ہیں۔
سوالات
Frontend اور Backend میں کیا فرق ہے؟
Frontend ایپ کا وہ حصہ ہے جو صارف کے براؤزر میں چلتا ہے، یعنی وہ صفحات، بٹن اور فارم جو صارف دیکھتا اور استعمال کرتا ہے۔ Backend ایک ایسے سرور پر چلتا ہے جسے صارف کبھی نہیں دیکھتا؛ یہ ڈیٹا محفوظ کرتا ہے، کاروباری قواعد لاگو کرتا ہے، اجازت چیک کرتا ہے اور دوسری سروسز سے بات کرتا ہے۔
کیا ہر ایپ کو Backend کی ضرورت ہوتی ہے؟
نہیں۔ مارکیٹنگ سائٹ، پورٹ فولیو یا سادہ لینڈنگ پیج صرف Frontend پر مبنی ہو سکتا ہے۔ جیسے ہی ایپ کو مشترکہ ڈیٹا محفوظ کرنا ہو، لوگوں کو لاگ اِن کرانا ہو، پیمنٹ لینی ہو یا خفیہ API keys استعمال کرنی ہوں، اسے کسی نہ کسی شکل میں Backend چاہیے۔
کیا HTML، Frontend ہے یا Backend؟
براؤزر میں چلنے والے HTML، CSS اور JavaScript Frontend ہیں۔ JavaScript Node.js کے ذریعے سرور پر بھی چل سکتی ہے، وہاں یہ Backend کوڈ ہے۔ زبان یہ طے نہیں کرتی؛ فیصلہ اس سے ہوتا ہے کہ کوڈ کہاں چلتا ہے۔
Full stack کا کیا مطلب ہے؟
Full stack کا مطلب ہے Frontend اور Backend دونوں (اور عموماً ڈیٹا بیس) کا احاطہ۔ Full-stack ایپ وہ ہے جس کے تینوں حصے ہوں، اور Full-stack ڈویلپر ان سب پر کام کرتا ہے۔