تفاوت فرانتاند و بکاند: هرکدام دقیقاً چه کاری انجام میدهند؟

وقتی صحبت از توسعهی یک وبسایت یا اپلیکیشن میشود، دو اصطلاح همیشه تکرار میشوند: فرانتاند و بکاند. برای کسی که وارد این حوزه نشده، این دو ممکن است گنگ بهنظر برسند؛ اما تشبیه یک رستوران، همهچیز را روشن میکند.
تشبیه رستوران
فرانتاند مثل سالن رستوران است: میزها، منو، دکوراسیون و نحوهی برخورد گارسون — یعنی هرچیزی که مشتری میبیند و با آن تعامل دارد. بکاند مثل آشپزخانه است: جایی که غذا واقعاً پخته میشود، مواد اولیه نگهداری میشود و سفارشها پردازش میشوند — مشتری آن را نمیبیند، اما بدون آن، رستوران کار نمیکند.
یک قانون ساده برای همیشه بهخاطر بسپارید: اگر میتوانید آن را در مرورگر ببینید و با آن کلیک/تایپ کنید، فرانتاند است. اگر جایی روی یک سرور در حال اجراست که شما مستقیماً نمیبینید، بکاند است.
مقایسهی سریع
| فرانتاند | بکاند | |
|---|---|---|
| محل اجرا | مرورگر کاربر | سرور |
| کاربر مستقیم میبیند؟ | بله | خیر |
| زبانهای رایج | HTML، CSS، JavaScript | Python، Node.js، PHP، Java |
| فریمورکهای نمونه | React، Vue، Astro | Django، FastAPI، Express |
| نمونهی کار | چیدمان صفحه، دکمه، فرم | ذخیرهسازی داده، محاسبات، امنیت |
فرانتاند یعنی چه؟
فرانتاند (Front-end) بخشی از یک وبسایت یا اپلیکیشن است که مستقیماً در مرورگر کاربر اجرا و نمایش داده میشود: چیدمان صفحه، رنگها، دکمهها، فرمها و هر تعاملی که کاربر با آن انجام میدهد. فناوریهای اصلی این بخش HTML (ساختار)، CSS (ظاهر) و JavaScript (رفتار و تعامل) هستند. فریمورکهایی مثل React، Vue یا Astro (که همین سایت هوشیوا با آن ساخته شده) کار ساخت فرانتاند را سریعتر و منظمتر میکنند.
بکاند یعنی چه؟
بکاند (Back-end) بخشی است که روی سرور اجرا میشود و کاربر مستقیماً آن را نمیبیند. وظایف اصلی آن:
- ذخیره و بازیابی داده از پایگاهداده (مثلاً اطلاعات کاربران یا محصولات)
- پردازش منطق کسبوکار (مثلاً محاسبهی تخفیف یا بررسی موجودی)
- احراز هویت و امنیت (تشخیص اینکه کاربر واقعاً همان کسی است که میگوید)
- ارتباط با سرویسهای دیگر از طریق API
زبانها و فریمورکهای رایج بکاند شامل Python (با Django یا FastAPI)، Node.js، PHP و Java هستند.
چطور این دو با هم صحبت میکنند؟
فرانتاند و بکاند معمولاً از طریق API با هم ارتباط برقرار میکنند: فرانتاند یک درخواست میفرستد (مثلاً «لیست محصولات را به من بده»)، بکاند داده را از پایگاهداده میخواند و در قالبی مشخص (معمولاً JSON) پاسخ میدهد، و فرانتاند آن داده را در صفحه نمایش میدهد.
پس Full-stack یعنی چه؟
توسعهدهندهی Full-stack کسی است که هم روی فرانتاند و هم روی بکاند مسلط است و میتواند یک محصول را از ابتدا تا انتها بسازد. در تیمهای کوچک، این نقش بسیار رایج است؛ در تیمهای بزرگتر معمولاً افراد در یکی از این دو حوزه تخصص پیدا میکنند.
جمعبندی
فرانتاند همان چیزی است که کاربر میبیند و لمس میکند؛ بکاند موتوری است که پشت صحنه، همهچیز را ممکن میسازد. یک وبسایت یا نرمافزار خوب، به هر دو بخش به یک اندازه نیاز دارد — ظاهر زیبا بدون منطق درست پشت آن، فقط یک نمای خالی است.


