Front end (فرانت) و بک اِند (Back end) عباراتی هستن که برنامه نویسا و متخصص های رایانه به وجود آوردن و نشون دهنده میزان دسترسی کاربران به لایه‌های مختلف یه برنامه‌ی رایانه‌ای یا یه وب سایت هستن.
درواقع به زبون ساده بخوام بگم، فرانت اِند همون ظاهر سایته. هر چیزی از یه برنامه‌ی رایانه‌ای یا سایتو که شما به عنوان یه کاربر بتونید ببینید جزء فرانت اِند سایت محسوب میشه.
همین صفحه‌ای که الان شما دارید این مطلبو توش میخونید، دقیقاً همین صفحه… بهش میگن فرانت اِند سایت ما.
توی فرانت اِند از زبان های برنامه نویسی HTML , CSS. JS استفاده میشه.
فرانت از دو بخش UI (رابط کاربری) و UX (تجربه کاربری) تشکیل شده. وقتی داریم درباره ظاهر یه سایت، اپلیکیشن یا هر برنامه‌ی رایانه‌ای دیگه‌ای صحبت می‌کنیم درواقع داریم درباره‌ی دو بخش UI و UX صحبت می‌کنیم.
UI و UX چیست؟
UX چیه؟ گفتم که تجربه کاربری.
تجربه کاربری یعنی چی؟ خب ببینید، اپلیکیشن واتس آپ‌رو در نظر بگیرید. فرض کنید که دکمه‌ی ارسال پیامش به جای اینکه پایین سمت راست باشه بالا سمت چپ میبود. خیلی بد میشد نه؟ نه تنها کلی اذیت میشدید برای ارسال پیام بلکه کلی هم از سرعتتون کم میشد.
UX دقیقاً کارش اینه. یعنی میگه هرچیزی باید کجا قرار بگیره تا تو بهترین حالت ممکن خودش برای استفاده‌ی کاربر باشه. درواقع وظیفه‌ش اینه تا کاری کنه که یه کاربر بهترین تجربه‌رو موقع کار کردن با یه اپلیکیشن، وب سایت و… داشته باشه.
ولی UI رابط کاربری، بر فرض رنگ واتس آپ که سبزه همون UI واتس آپه یا فیسبوک بخاطر این آبیه که رنگ آبی آرامش بخشه و …. . درکل UI بیشتر تاکید رو رنگ و اینجور چیزا داره.
میزان دسترسی که شما در این صفحه یا همون فرانت اِند سایت ما یا هر سایت دیگه‌ای دارید در حدیه که میتونید حالت اجرا شده کدهای برنامه نویسی‌رو ببینید و حتی می تونید اونارو تغییر بدید ( البته به صورت محدود).
امیدوارم با مرورگر کروم این سایت و باز کرده باشین چون من دارم روی مرورگر کروم و توی محیط دسکتاپ این آموزش و میدم. به اینجا نگاه کنید:
- روی صفحه راست کلیک کنید و آخرین گزینه یعنی inspect element را بزنید.
- از طریق این صفحه باز شده شما می تونید اِلِمان ها و متون بکار رفته در صفحه رو تغییر بدید، همونطور که میبینید توی عکس عنوان صفحه و متن فهرست ها رو تغییر دادم:
- میتونید این ویدیو رو ببینید😁:
یک مثال ساده از اتصال (فرانت) Front end و Back end
جایی که شما فرم پر میکنید، نیاز داریم اطلاعاتی که شما توسط فرم پر کرده اید را دریافت و پردازش کنیم. ممکنه بتونید اسم فرم و نام تک تک input ها را تغییر بدهید ولی نمیتوانید ساختار داده ای که ما گفتیم چطور ذخیره شود را تغییر دهید. برای همین نیاز داریم در جایی به اسم پایگاه داده (Database) ذخیره کنیم. در واقع این اطلاعات را از طریق فرانت (Front) که کاربر به آن دسترسی دارد و فرم را پر میکند، میگیریم. حالا از طریق زبان های Back end، آن را در پایگاه داده ذخیره می کنیم.