تفاوت بک اند و فرانت اند چیست؟

دیدن ویدیو بااعث میشه متن زیر رو بهتر متوجه بشید :

تعریف خیلی ساده فرانت‌اند و بک‌اند

وقتی یک سایت یا اپلیکیشن را باز می‌کنی، دو بخش اصلی دارد:

• فرانت‌اند (Front-End)
  بخشی که کاربر می‌بیند و با آن کار می‌کند

• بک‌اند (Back-End)
  بخش پشت صحنه که کاربر نمی‌بیند

فرانت‌اند (Front-End) چیست؟

فرانت‌اند یعنی ظاهر سایت و تعامل کاربر با سایت

هر چیزی که روی صفحه می‌بینی جزو فرانت‌اند است، مثل:

• دکمه‌ها

• فرم ثبت‌نام

• منوها

• رنگ‌ها و فونت‌ها

• انیمیشن‌ها

• ریسپانسیو بودن سایت در موبایل و دسکتاپ

هر زمان کاربر کلیک می‌کند، اسکرول می‌کند یا چیزی تایپ می‌کند، فرانت‌اند در حال اجراست.

تکنولوژی‌های فرانت‌اند

ابزارهایی که در فرانت‌اند استفاده می‌شوند:

• HTML برای ساختار و اسکلت صفحه

• CSS برای طراحی ظاهر سایت

• JavaScript برای تعامل و منطق سمت کاربر

• Bootstrap و Tailwind برای طراحی سریع رابط کاربری

• React، Vue و Angular برای ساخت سایت‌ها و اپلیکیشن‌های مدرن

مثال ساده فرانت‌اند

یک دکمه ثبت‌نام که کاربر روی آن کلیک می‌کند، فقط فرانت‌اند است.

بک‌اند (Back-End) چیست؟

بک‌اند مغز سایت است و تمام منطق اصلی در آن اجرا می‌شود.

کارهای بک‌اند شامل موارد زیر است:

• ثبت اطلاعات کاربران

• ورود و خروج کاربران

• ارتباط با دیتابیس

• مدیریت کاربران

• تامین امنیت سایت

• پردازش فرم‌ها

• ارسال ایمیل

• ساخت و مدیریت API

کاربر بک‌اند را نمی‌بیند، اما بدون آن سایت عملاً بی‌استفاده است.

تکنولوژی‌های بک‌اند

زبان‌ها و فریم‌ورک‌های رایج بک‌اند:

• PHP (Laravel)

• Node.js

• Python (Django / Flask)

• Java

• C# (.NET)

دیتابیس‌های پرکاربرد

• MySQL

• PostgreSQL

• MongoDB

مثال ساده بک‌اند

کدی که اطلاعات فرم را دریافت می‌کند و در دیتابیس ذخیره می‌کند، کد بک‌اند محسوب می‌شود.

ارتباط فرانت‌اند و بک‌اند چگونه است؟

مثال ثبت‌نام کاربر:

1. کاربر فرم را پر می‌کند (فرانت‌اند)

2. روی دکمه ثبت‌نام کلیک می‌کند (فرانت‌اند)

3. اطلاعات به سرور ارسال می‌شود (بک‌اند)

4. بک‌اند اطلاعات را بررسی و اعتبارسنجی می‌کند

5. داده‌ها در دیتابیس ذخیره می‌شوند

6. نتیجه به فرانت‌اند برمی‌گردد و نمایش داده می‌شود

این ارتباط معمولاً از طریق روش‌های زیر انجام می‌شود:

• ارسال فرم

• AJAX

• Fetch API

• REST API

مثال خیلی ساده برای درک بهتر

سایت مثل یک رستوران است:

• بک‌اند مثل آشپزخانه

• فرانت‌اند مثل میز، منو و دکور

• ارتباط بین این دو مثل گارسون

تو فقط نتیجه نهایی را می‌بینی، اما کار اصلی پشت صحنه انجام می‌شود.

نقش‌ها در بازار کار

نقش‌های رایج برنامه‌نویسی وب:

• Front-End Developer: تمرکز روی ظاهر و تجربه کاربر

• Back-End Developer: تمرکز روی منطق، سرور و دیتابیس

• Full-Stack Developer: انجام فرانت‌اند و بک‌اند با هم

بیشتر فریلنسرها فول‌استک هستند چون می‌توانند پروژه را کامل تحویل دهند.