شاید شما هم جزو کسانی باشید که بارها عبارات فرانت اند و بک اند را شنیده اید ولی معنی و مفهوم آن ها را نمی دانستید. اکثر برنامه نویسان وب زمانی که به یک دیگر می رسند این سوال را از یکدیگر می پرسند که برنامه نویس بک اند هستی یا فرانت اند؟ برای اینکه بدانیم برنامه نویسی فرانت اند چیست و برنامه نویس Front End کیست؟ با  Dr.dev  همراه باشید

تعریف واژه‌ی فرانت اند

فرانت اند چیست

فرانت اند  چیست: در عبارت Front End، هماxنطور که میبینید واژه‌ی Front وجود دارد. و در انگلیسی یکی از معانی Front،‌ به معنای «جلو» می‌باشد.

با توجه به تعریفی که از این واژه دیدیم، میتوانیم در پاسخ به سوال Front End چیست بگوییم:

طراحی یا کدنویسی هر آن چیزی که مربوط به جلوی وبسایت میشود. در واقع یک طراح وب یا یک Front End Developer، کسی است که چیزی را طراحی میکند کاربر آنرا میبیند. فرانت اند کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آن ها نمایش می دهد تا بتواند به راحتی از بخش های مختلف سایت استفاده کنند.

در بخش طراحی وب، طراحان با نرم افزار های گرافیکی مانند فتوشاپ ظاهر سایت را طراحی می کنند. اما بخش توسعه رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و JavaScript است. زبان های برنامه نویسی که در فرانت به کار می روند، سمت کاربر یا Client Side می باشند. بنابراین کدهای نوشته شده در فرانت در مرورگر کاربر پردازش و اجرا می شوند

مقایسه با بک اند

بک اند در مقاله با فرانت اند

برنامه‌نویسی بک‌اند (back end) به قسمت از برنامه گفته میشه که با لایه‌ی دیتا سروکار داره که در مقابل فرانت‌اند (front end) قرار میگیره. تو برنامه‌نویسی وب، کسی که با دیتابیس و منطقِ سمتِ سرور کار میکنه میشه برنامه‌نویس بک‌اند و چیزی که شما توی مرورگر خودتون می‌بینید کار برنامه‌نویس فرانت‌اند هست. برنامه‌نویس فرانت‌اند (front-end) به قسمتی از برنامه‌نویسی گفته میشه که با اونچه که کاربر سمت مرورگرش می بینه مربوط میشه.

تفاوت برنامه نویس فرانت اند با UI Designer

طراحی کاربری

در ادامه‌ی پاسخ به سوال فرانت اند  چیست میخواهیم کمی ریز تر به این مفهوم نگاه کنیم.

اگر بخواهیم در دنیای طراحی وب کمی ریز تر و عمیق تر شویم، باز با ۲ مفهوم دیگر مواجه میشویم:

  • برنامه نویس فرانت اند یا Front End Developer
  • طراح رابط کاربری یا UI Designer (Ui مخفف User Interface میباشد)

اما طراح رابط کاربری، کار متفاوتی انجام میدهد. کسی که با عنوان UI Designer کار میکند، کارهای مربوط به کدنویسی را انجام نمیدهد و هرگز خودش دست به کد نمیشود.

بلکه یک طراح رابط کاربری، کارش طراحی گرافیک سایت در نرم افزارهایی مثل فتوشاپ (Photoshop) است. این افراد رابط کاربری و شکل ظاهری یک صفحه وب را در فتوشاپ (یا سایر نرم افزارهای مشابه مثل Sketch) طراحی میکنند و سپس فایل PSD را در اختیار آن شخصی میگذارند که کدنویسی فرانت اند را انجام میدهد و اصطلاحا فرانت اند دولوپر است.

پس کار یک UI Designer صرفا با نرم افزارهای گرافیکی‌ست و کاری با کدها ندارد، و کار یک طراح وب فرانت اند، با کد ها است و با کدنویسی میتواند صفحات وب مختلفی را طراحی کند.

 

مهارت های توسعه دهنده فرانت اند

برنامه نویسی سمت کاربر

حال که متوجه شدید که فرانت اند چیست ، در این بخش می خواهیم مهارت های توسعه دهنده فرانت اند را برای یادگیری  را بررسی کنیم. کسانی که قصد دارند طراح و توسعه دهنده فرانت اند شوند باید ویژگی ها و مهارت های مختلفی را داشته باشند. مهمترین ویژگی های یک برنامه نویسی فرانت اند عبارت است از :

  • زبان HTML : یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که به عنوان هسته و بدنه اصلی صفحات وب به حساب می آید. این زبان برای ایجاد ساختار صفحات وب استفاده می شود و اولین چیزی است که برای یادگیری فرانت اند باید بیاموزید.
  • زبان CSS : مخفف عبارت Cascading Style Sheets است که به منظور فرم دهی صفحات وب و اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و … ساخته شده است. CSS طراحان سایت را قادر می سازد که بدون محدودیت خلاقیت های خود را در طراحی صفحات سایت پیاده سازی کنند.
  • زبان برنامه نویسی Javascript : این زبان برنامه نویسی در سمت کاربر پردازش می شود. برنامه نویس فرانت اند به کمک Javascript می تواند به پویانمایی صفحاتی که با HTML و CSS طراحی کرده است بپردازد.
  • کتابخانه ها و فریم ورک های فرانت اند Javascript : فریم ورک های Javascript امکانات بسیار زیادی و پشرفته ای را در اختیار طراحان فرانت قرار می دهند. از جمله این فریمورک ها می توان به Vu.js، Angular و… اشاره کرد.
  • اصول طراحی واکنشگرا: یک رابط کاربری استاندارد باید به گونه ای باشد که در دستگاه ها و پلتفرم های مختلف، عملکرد اپلیکیشن را دچار اختلال نکند. بنابراین باید بتواند متناسب با نوع دستگاهی که در حال اجرای آن است، واکنش مناسب نشان دهد.
  • نرم افزارهای گرافیکی مانند فتوشاپ : نرم افزارهای گرافیکی مانند فتوشاپ، ایلوستریتور و… در بیشتر مراحل طراحی یک رابط کاربری توسط طراحان فرانت مورد استفاده قرار می گیرند.
  • سلیقه و خلاقیت : طراح فرانت اند باید از طرح هایی خلاقانه، کاربرپسند و چشم نواز برای ظاهر یک اپلیکیشن استفاده کند. یک طراح موفق کسی است که بتواند رابط کاربری زیبا منطق بر استانداردهای ظاهری و تجربه کاربری ایجاد کند.
  • آشنایی با اصول تجربه کاربری : توسعه دهنده فرانت باید به خوبی نیازهای کاربران را بشناسد. او باید بتواند رابط کاربری یک اپلیکیشن را به گونه ای طراحی کند که کاربران بهترین تجربه را از استفاده از آن به دست آورند.

لیستی که بالا گفتیم خیلی کلی بود و انشاالله در مورد برنامه نویسی سمت کاربری بیشتر با شما صحبت می کنیم

نطر شما در مورد برنامه نویسی سمت کاربر یا فرانت اند چیست ؟ دوست دارید  یک برنامه نویس فرانت اند شوید؟ نظرات خود را با Dr.Dev  در میان بگذرید