فرانتاند همان چیزی است که در مرورگر یا روی صفحه‌ی گوشی می‌بینید و لمس می‌کنید: رنگ‌ها، دکمه‌ها، منوها، فرم ثبت‌نام، تصاویر و حرکت‌ها. کسی که آن را می‌سازد «توسعه‌دهنده‌ی فرانتاند» نام دارد. ابزار اصلی او سه چیز است: HTML برای ساختار، CSS برای ظاهر و جاوااسکریپت برای رفتار.
مثال: یک فروشگاه اینترنتی#
وقتی در سایت فروشگاه، فیلتر قیمت را می‌کشید و لیست کالاها فوراً عوض می‌شود، یا وقتی دکمه‌ی «افزودن به سبد» را می‌زنید و عدد سبد بالا می‌رود، کار فرانتاند را می‌بینید. اما اینکه موجودی از کجا می‌آید و سفارش کجا ثبت می‌شود، به بک‌اند مربوط است.
وظایف رایج یک فرانتاندکار#
- پیاده‌سازی طرحی که طراح رابط کاربری آماده کرده
- راست‌به‌چپ و ریسپانسیو کردن صفحه‌ها برای زبان فارسی و گوشی‌های مختلف
- سرعت دادن به بارگذاری صفحه
- اتصال صفحه به API و نمایش داده‌ها
- رعایت دسترس‌پذیری تا همه بتوانند از سایت استفاده کنند
ارتباط با بک‌اند#
این دو بخش با هم یک محصول کامل می‌سازند. فرانتاند درخواست می‌فرستد و بک‌اند جواب می‌دهد؛ ارتباط معمولاً از طریق API انجام می‌شود. کسی که هر دو را بلد باشد فول‌استک نامیده می‌شود.
اشتباه رایج#
بعضی فرانتاند را فقط «زیبا کردن سایت» می‌دانند، در حالی که بخش بزرگی از آن مهندسی است: مدیریت وضعیت، عملکرد، سازگاری مرورگرها و امنیت سمت کاربر.