Frontend و Backend چیه؟ تفاوتشون رو با یه مثال ساده بفهم
2026-10-20
وقتی می‌خوای برنامه‌نویسی وب یاد بگیری، خیلی زود به این دو کلمه می‌رسی: فرانت‌اند و بک‌اند. بیا با یه مثال ساده بفهمیم چیه.
مثال رستوران
یه رستوران رو تصور کن:
- سالن و میز و منو چیزیه که مشتری می‌بینه و باهاش کار می‌کنه. این فرانت‌انده.
- آشپزخونه جاییه که غذا آماده می‌شه. مشتری نمی‌بینه، ولی همه‌چی اونجا اتفاق میفته. این بک‌انده.
- انبار مواد جاییه که مواد اولیه رو نگه می‌دارن. این دیتابیسه.
- گارسون سفارش رو از سالن به آشپزخونه می‌بره و غذا رو برمی‌گردونه. این APIـه.
فرانت‌اند چیه؟
هر چیزی که تو سایت می‌بینی و باهاش کار می‌کنی: دکمه‌ها، فرم‌ها، منوها، رنگ‌ها، انیمیشن‌ها. فرانت‌اند توی مرورگر اجرا می‌شه.
سه تکنولوژی اصلی:
- HTML: ساختار صفحه (تیتر، متن، تصویر)
- CSS: ظاهر (رنگ، اندازه، چیدمان)
- JavaScript: رفتار (وقتی کلیک می‌کنی چی بشه)
وظیفه‌ی فرانت‌اند اینه که صفحه قشنگ، قابل‌استفاده و سریع باشه، روی موبایل و کامپیوتر.
بک‌اند چیه؟
بخشی که تو سرور اجرا می‌شه و کاربر مستقیم نمی‌بینه. کارهاش:
- دریافت درخواست‌ها (مثلاً «لاگین کن»)
- بررسی و اعتبارسنجی (رمز درسته؟)
- اجرای منطق برنامه (موجودی کافیه؟ تخفیف اعمال بشه؟)
- حرف زدن با دیتابیس
- امنیت: اینکه هر کسی فقط به چیزی که حقشه دسترسی داشته باشه
بک‌اند رو می‌شه با زبان‌های مختلفی نوشت: پایتون، جاوااسکریپت (Node)، جاوا، سی‌شارپ و...
چطور با هم کار می‌کنن؟
فرض کن تو یه سایت می‌خوای وارد بشی:
- تو فرانت‌اند ایمیل و رمز رو می‌نویسی و «ورود» رو می‌زنی.
- فرانت‌اند یه درخواست (Request) به بک‌اند می‌فرسته.
- بک‌اند از دیتابیس کاربر رو پیدا می‌کنه و رمز رو چک می‌کنه.
- نتیجه رو به شکل یه جواب (Response) برمی‌گردونه.
- فرانت‌اند بر اساس جواب یا صفحه‌ی بعد رو نشون می‌ده، یا پیام خطا.
این رفت‌وبرگشت همه‌جا هست. هر بار که یه سایت رو باز می‌کنی، چندین‌بار اتفاق میفته.
کدوم رو یاد بگیرم؟
- اگه ظاهر و تجربه‌ی کاربری رو دوست داری: فرانت‌اند.
- اگه منطق، ساختار و سیستم رو دوست داری: بک‌اند.
- اگه می‌خوای هر دو رو بلد باشی و یه محصول رو از اول تا آخر بسازی: بهش می‌گن فول‌استک (اینجا توضیح دادیم).
اگه مطمئن نیستی، پیشنهادم اینه که هر دو رو در حد مقدماتی امتحان کنی. یه صفحه‌ی ساده با HTML و CSS بساز و بعد یه بک‌اند خیلی ساده که یه لیست رو برگردونه. خیلی زود می‌فهمی کدوم بیشتر بهت می‌چسبه.
سه سوءتفاهم رایج
«فرانت‌اند ساده‌تره.» نه. فرانت‌اند مدرن پیچیدگی خودش رو داره؛ مدیریت وضعیت، سرعت، دسترسی‌پذیری، سازگاری با مرورگرها.
«بک‌اند فقط کد زدنه.» نه. طراحی ساختار داده و امنیت و پایداری، بخش بزرگی از کاره.
«باید همه‌چی رو بلد باشم.» نه. اول یه مسیر رو عمق بده، بعد وسعت بده.
جمع‌بندی
- فرانت‌اند = چیزی که کاربر می‌بینه (HTML، CSS، JavaScript)
- بک‌اند = چیزی که پشت صحنه کار می‌کنه (سرور، منطق، امنیت)
- دیتابیس = جایی که اطلاعات ذخیره می‌شه
- API = راه ارتباط بین بخش‌ها
اگه از صفر می‌خوای ساخت یه سایت کامل رو با هر سه بخش یاد بگیری، مسیر «طراحی وب از صفر تا اولین پروژه‌ی واقعی» همین‌طور جلو میره. بزن بریم!
- فرانت‌اند چیست
- بک‌اند چیست
- تفاوت فرانت‌اند و بک‌اند
- برنامه‌نویسی وب