فرانت‌اند در برابر بک‌اند: تفاوت چیست؟
فرانت‌اند بخشی از اپلیکیشن است که در مرورگر کاربر اجرا می‌شود؛ صفحه‌ها، دکمه‌ها، فرم‌ها و انیمیشن‌هایی که کاربر می‌بیند و با آن‌ها تعامل می‌کند. بک‌اند بخشی است که روی سروری اجرا می‌شود که کاربر هرگز آن را نمی‌بیند: داده را ذخیره و بازیابی می‌کند، قوانین کسب‌وکار را اعمال می‌کند، بررسی می‌کند چه کسی مجاز به چه کاری است و با سرویس‌های دیگری مثل پرداخت و ایمیل ارتباط می‌گیرد. این دو از طریق یک API با هم حرف می‌زنند و همراه با یک پایگاه داده، یک اپلیکیشن «full-stack» را می‌سازند.
چرا این موضوع هنگام ساخت با هوش مصنوعی مهم است
وقتی اپلیکیشنی را برای یک ابزار ساخت هوش مصنوعی توصیف می‌کنید، خواسته یا ناخواسته هر دو نیمه را با هم توصیف می‌کنید. جمله «مشتری‌ها می‌توانند یک نوبت رزرو کنند» یعنی یک فرم رزرو (فرانت‌اند)، قوانینی درباره اینکه کدام نوبت‌ها خالی است (بک‌اند) و جایی برای ذخیره رزروها (پایگاه داده).
دانستن این تقسیم‌بندی در سه کار عملی کمک می‌کند:
- امنیت. هر چیزی در فرانت‌اند توسط کاربر دیده و تغییر داده می‌شود. قوانین و کلیدهای محرمانه باید در بک‌اند باشند.
- عیب‌یابی. «دکمه پاسخ نمی‌دهد» و «دکمه پاسخ می‌دهد ولی چیزی ذخیره نمی‌شود» به دو بخش مختلف اشاره دارند و گفتن اینکه کدام را می‌بینید به هوش مصنوعی کمک می‌کند علت را سریع‌تر پیدا کند.
- میزبانی و هزینه. یک سایت فقط فرانت‌اند ساده و ارزان میزبانی می‌شود. بک‌اند باید جایی اجرا شود و این روی هزینه‌ها و رفتار اپلیکیشن در زمان بیکاری اثر دارد.
یک مثال روزمره
یک رستوران را در نظر بگیرید.
فرانت‌اند سالن غذاخوری است: منو، میزها، دکوراسیون و گارسونی که سفارش شما را می‌گیرد. برای مشتری طراحی شده و مشتری همه آن را می‌بیند و لمس می‌کند.
بک‌اند آشپزخانه و دفتر است: آشپزها که غذا می‌پزند، انبار، صندوق و قوانینی که مشخص می‌کند چه کسی تخفیف می‌گیرد. مشتری هرگز وارد آنجا نمی‌شود و نباید بتواند بشود.
API همان پنجره بین این دو است: جایی که سفارش‌ها با قالبی توافق‌شده وارد می‌شوند و غذا بیرون می‌آید. پایگاه داده انبار و دفتر سفارش‌هاست.
مشتری می‌تواند برگه سفارش خودش را بازنویسی کند (فرانت‌اند زیر کنترل اوست)، اما آشپزخانه همچنان تصمیم می‌گیرد چه چیزی بپزد و چه قیمتی بگیرد. به همین دلیل بررسی‌های مهم باید در بخش پشتی باشند.
هر بخش چه کاری انجام می‌دهد
| فرانت‌اند | بک‌اند | |
|---|---|---|
| روی چه چیزی اجرا می‌شود | دستگاه کاربر، در مرورگر | سروری که شما (یا میزبانتان) کنترل می‌کنید |
| کار اصلی | نمایش چیزها، دریافت ورودی، پاسخ به کلیک‌ها | ذخیره داده، اعمال قوانین، اعمال دسترسی‌ها، فراخوانی سرویس‌های دیگر |
| آیا کاربران می‌توانند کد را ببینند و تغییر دهند؟ | بله؛ روی مرورگرشان دانلود می‌شود | خیر |
| آیا می‌تواند کلیدهای محرمانه API را نگه دارد؟ | خیر | بله، در متغیرهای محیطی |
| فناوری‌های رایج | HTML، CSS، JavaScript/TypeScript، React، Vue، Svelte، Tailwind | Node.js، Python (FastAPI، Django)، C#، Java، Go، Ruby |
| چه چیزی معمولاً خراب می‌شود | چیدمان در موبایل به هم می‌ریزد، دکمه کار نمی‌کند، صفحه کند است | داده ذخیره نمی‌شود، داده اشتباه نشان داده می‌شود، خطا، حفره امنیتی |
بعضی فریم‌ورک‌ها این مرز را کمرنگ می‌کنند. برای مثال Next.js اجازه می‌دهد یک پروژه هم کد مرورگر و هم کد سرور داشته باشد. ایده همچنان ثابت است: سؤال همیشه این است که این بخش کجا اجرا می‌شود؟
یک نمونه کامل: رزرو یک کلاس
وقتی کسی یک کلاس یوگا رزرو می‌کند، مرحله‌به‌مرحله این اتفاق می‌افتد.
| مرحله | کجا | چه اتفاقی می‌افتد |
|---|---|---|
| ۱ | فرانت‌اند | صفحه برنامه بارگذاری می‌شود و از بک‌اند کلاس‌های این هفته را می‌خواهد. |
| ۲ | بک‌اند | کلاس‌ها و رزروها را از پایگاه داده می‌خواند، جای خالی را محاسبه می‌کند و فهرست را به‌صورت JSON برمی‌گرداند. |
| ۳ | فرانت‌اند | هر کلاس را با ساعت، مربی و تعداد جای خالی نمایش می‌دهد. |
| ۴ | فرانت‌اند | کاربر کلاس را انتخاب می‌کند و نام و ایمیل را وارد می‌کند. فرم بررسی می‌کند که ایمیل معتبر به نظر برسد (یک کمک، نه تضمین). |
| ۵ | فرانت‌اند ← بک‌اند | یک درخواست POST /api/bookings از طریق API ارسال می‌شود. |
| ۶ | بک‌اند | ورودی را دوباره اعتبارسنجی می‌کند، بررسی می‌کند کلاس پر نباشد، رزرو را ذخیره می‌کند و با یک کلید محرمانه از سرویس ایمیل می‌خواهد تأییدیه بفرستد. |
| ۷ | بک‌اند ← فرانت‌اند | پاسخ «رزرو شد» یا «متأسفیم، کلاس پر است» را برمی‌گرداند. |
| ۸ | فرانت‌اند | صفحه تأیید را نشان می‌دهد. |
به مراحل ۴ و ۶ توجه کنید: ورودی دو بار بررسی می‌شود. بررسی فرانت‌اند بازخورد فوری می‌دهد؛ بررسی بک‌اند است که واقعاً اهمیت دارد، چون کاربر مصمم می‌تواند کاملاً از فرانت‌اند رد شود.
اصطلاحات رایج
| اصطلاح | معنی |
|---|---|
| Client / server | کلاینت مرورگر (یا اپ) است که درخواست می‌دهد؛ سرور به آن پاسخ می‌دهد. |
| UI | رابط کاربری؛ صفحه‌ها و کنترل‌ها. |
| API | روشی توافق‌شده که فرانت‌اند با آن از بک‌اند داده یا عملیات می‌خواهد. |
| Endpoint | یک نشانی مشخص در API، مثل /api/bookings. |
| Full stack | فرانت‌اند + بک‌اند + پایگاه داده با هم. ببینید full-stack بودن یعنی چه. |
| Static site | فرانت‌اند بدون بک‌اند مستقل؛ برای همه یک مجموعه فایل یکسان. |
| SPA | Single-page application: فرانت‌اندی که به جای بارگذاری صفحه‌های جدید، صفحه را در مرورگر به‌روز می‌کند. |
| Server-side rendering (SSR) | سرور HTML صفحه را پیش از ارسال می‌سازد که می‌تواند به سرعت و SEO کمک کند. |
| Environment variables | تنظیمات و کلیدهای محرمانه‌ای که هنگام اجرا به بک‌اند داده می‌شود و خارج از کد نگه داشته می‌شود. |
آیا اپلیکیشن شما به بک‌اند نیاز دارد؟
| اگر اپلیکیشن شما… | بک‌اند لازم است؟ |
|---|---|
| اطلاعاتی را نشان می‌دهد که برای همه یکسان است | خیر |
| فرم تماس دارد که فقط برای شما ایمیل می‌فرستد | معمولاً یک بک‌اند کوچک یا یک سرویس فرم |
| داده‌ای را ذخیره می‌کند که دیگران هم می‌بینند | بله |
| ورود کاربر و داده خصوصی دارد | بله |
| پرداخت می‌گیرد | بله؛ حداقل برای ساختن صفحه پرداخت و دریافت webhookهای پرداخت |
| از یک API پولی یا دیگر API با کلید محرمانه استفاده می‌کند | بله، تا کلید از مرورگر دور بماند |
اشتباهات رایج و برداشت‌های غلط
- گذاشتن کلیدهای محرمانه در فرانت‌اند. هر کسی که ابزارهای توسعه‌دهنده مرورگر را باز کند آن را می‌بیند. این رایج‌ترین اشتباه جدی در اپلیکیشن‌های ساخته‌شده با هوش مصنوعی است.
- اعمال قوانین فقط در فرانت‌اند. پنهان کردن دکمه «حذف» برای کاربران غیرمدیر حفاظت نیست؛ بک‌اند باید درخواست را رد کند.
- فکر کردن بک‌اند فقط «پایگاه داده» است. پایگاه داده داده را ذخیره می‌کند. بک‌اند تصمیم می‌گیرد چه کسی می‌تواند آن را بخواند و تغییر دهد و چگونه.
- فکر کردن JavaScript یعنی فرانت‌اند. JavaScript و TypeScript با Node.js روی سرورها هم اجرا می‌شوند.
- مقصر دانستن بخش اشتباه. اگر صفحه درست به نظر می‌رسد ولی داده اشتباه است، مشکل معمولاً در بک‌اند یا پایگاه داده است، نه در طراحی.
- بیش از حد ساختن. یک نمونه کار شخصی به بک‌اند سفارشی نیاز ندارد. افزودن آن هزینه و اجزای متحرک بیشتری می‌آورد.
از ابزار ساخت هوش مصنوعی خود چه بخواهید
- «کدام بخش‌های این اپلیکیشن در مرورگر و کدام روی سرور اجرا می‌شوند؟»
- «همه کلیدهای API را به بک‌اند منتقل کن و از متغیرهای محیطی بخوان.»
- «همه فرم‌ها را هم در سرور و هم در مرورگر اعتبارسنجی کن.»
- «در بک‌اند اعمال کن که فقط مدیرها بتوانند رزروها را حذف کنند.»
- «صفحه درست به نظر می‌رسد ولی داده ذخیره نمی‌شود؛ لاگ‌های بک‌اند را برای این درخواست بررسی کن.»
- «این یک سایت معرفی ساده است؛ مگر اینکه به بک‌اند نیاز داشته باشیم، فقط فرانت‌اند بماند.»
فرانت‌اند و بک‌اند در Mythex
یک پروژه جدید در Mythex از یک فرانت‌اند Vite، React، TypeScript و Tailwind شروع می‌شود و وقتی اپلیکیشن به بک‌اند نیاز داشته باشد، عامل آن را اضافه می‌کند. همچنین می‌توانید درخواست کنید یک API جداگانه با Node، Python (FastAPI)، C# یا Java کنار فرانت‌اند در همان پروژه اجرا شود. در پیش‌نمایش می‌توانید بین وب‌سایت و سرور API جابه‌جا شوید و انتشار هر دو بخش را با هم منتشر می‌کند؛ در صورت نیاز پایگاه داده و فضای ذخیره فایل هم اضافه می‌شود. مستندات اپلیکیشن‌های چندسرویسی را پوشش می‌دهند، راهنمای میزبانی وب توضیح می‌دهد هر بخش پس از انتشار کجا اجرا می‌شود، و قالب‌های اپلیکیشن راه سریعی برای دیدن نمونه‌های full-stack هستند.
پرسش‌ها
تفاوت فرانت‌اند و بک‌اند چیست؟
فرانت‌اند بخشی از یک اپلیکیشن است که در مرورگر کاربر اجرا می‌شود؛ یعنی صفحه‌ها، دکمه‌ها و فرم‌هایی که کاربر می‌بیند. بک‌اند روی سروری اجرا می‌شود که کاربر آن را نمی‌بیند؛ داده را ذخیره می‌کند، قوانین کسب‌وکار را اعمال می‌کند، دسترسی‌ها را بررسی می‌کند و با سرویس‌های دیگر ارتباط برقرار می‌کند.
آیا هر اپلیکیشنی به بک‌اند نیاز دارد؟
نه. یک سایت معرفی، نمونه کار یا صفحه فرود ساده می‌تواند فقط فرانت‌اند باشد. به محض اینکه اپلیکیشن نیاز داشته باشد داده مشترک را ذخیره کند، کاربران را وارد حساب کند، پرداخت بگیرد یا از کلیدهای محرمانه API استفاده کند، به نوعی بک‌اند نیاز دارد.
آیا HTML بخشی از فرانت‌اند است یا بک‌اند؟
HTML، CSS و JavaScript که در مرورگر اجرا می‌شوند، فرانت‌اند هستند. JavaScript می‌تواند با Node.js روی سرور هم اجرا شود و در آن حالت کد بک‌اند است. زبان برنامه‌نویسی تعیین‌کننده نیست؛ محل اجرای کد تعیین‌کننده است.
منظور از full stack چیست؟
Full stack یعنی پوشش دادن هم فرانت‌اند و هم بک‌اند (و معمولاً پایگاه داده). یک اپلیکیشن full-stack هر سه بخش را دارد و یک توسعه‌دهنده full-stack روی همه آن‌ها کار می‌کند.