Front End یا فرانت‌اند به بخشی از یک محصول نرم‌افزاری گفته می‌شود که کاربر آن را می‌بیند و با آن تعامل می‌کند. در برنامه وب، این بخش معمولاً با HTML، CSS و JavaScript ساخته می‌شود و مسئول نمایش داده‌ها، مدیریت تعامل‌ها، فرم‌ها و بازخورد بصری است.

برای مثال، وقتی کاربر محصولی را به سبد خرید اضافه می‌کند، Front End تغییر تعداد کالاها و پیام موفقیت را نمایش می‌دهد، اما اعتبارسنجی نهایی موجودی و ثبت تراکنش معمولاً در بک‌اند انجام می‌شود. پنهان کردن یک دکمه یا کنترل مقدار فیلد در مرورگر جایگزین اعتبارسنجی سمت سرور نیست.

یک تعامل ساده با API

const response = await fetch("/api/products/42");
if (!response.ok) throw new Error("Request failed");
const product = await response.json();
console.log(product.name);

فریم‌ورک‌هایی مانند React و Vue برای ساخت رابط‌های تعاملی کاربرد دارند. کیفیت فرانت‌اند را باید از نظر دسترس‌پذیری، عملکرد، واکنش‌گرایی و تجربه کاربری بررسی کرد.

برای ارتباط آن با لایه سرور، مدخل‌های رابط برنامه‌نویسی کاربردی، بک‌اند و تجربه کاربری را نیز مطالعه کنید.

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

برای مثال‌ها و توضیحات بیشتر، مبانی معماری مدرن وب را در وبلاگ باورژن بخوانید.