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 برای ساخت رابطهای تعاملی کاربرد دارند. کیفیت فرانتاند را باید از نظر دسترسپذیری، عملکرد، واکنشگرایی و تجربه کاربری بررسی کرد.
برای ارتباط آن با لایه سرور، مدخلهای رابط برنامهنویسی کاربردی، بکاند و تجربه کاربری را نیز مطالعه کنید.
برای تکمیل بحث، ارتباط این مفهوم را با پروتکل انتقال ابرمتن و زبان پرسوجوی گرافکیوال بررسی کنید.
برای مثالها و توضیحات بیشتر، مبانی معماری مدرن وب را در وبلاگ باورژن بخوانید.