در یک وب سایت یا اپلیکیشن همه المان هایی که کاربر به صورت بصری میبینه به فرانت اند مربوط میشه
برای مثال : منوها ، تصاویر ، فرم های ورود اطلاعات و . . .
فرانت اند به دو بخش تقسیم میشه بخش اول طراحی ظاهر وب سایت که توسط طراحان با استفاده از نرم افزار های گرافیکی مثل فیگما صورت میگیره و بخش دوم توسعه وب سایت که توسط توسعه دهنده با استفاده از زبان های فرانت اند طرح مورد نظر به صورت کد قابل فهم برای مرورگر پیاده سازی میشه که در این مطلب به بخش دوم میپردازیم.
وظیفه فرانت اند ایجاد تعامل با کاربر و برقراری ارتباط بین مرورگر کاربر و سرور هست .
برای اینکه بهتر متوجه بشید لطفا به تصویر زیر دقت کنید ، هر اون چه میبینید شامل فرانت اند یک وبسایت میشه.
به صورت کلی فرانت اند شامل زبان های زیر میشه که هر کدوم دریای از مباحث مختلف رو درون خودشون دارند
در ادامه بیشتر با این زبان ها آشنا میشیم.
در واقع HTML و CSS زبان برنامه نویسی نیستند،HTML زبان نشانه گذاری و CSS زبان استایل دهی می باشد.
اما سومین مورد ما یعنی JavaScript یک زبان برنامه نویسی قدرتمند و محبوب می باشد.
با توجه به تصویر بالا اگر صفحه وب رو مانند بدن یک انسان در نظر بگیریم.
زبان نشانه گذاری HTML نقش استخوان بندی و تعریف ساختار اصلی صفحات وب ما رو به عهده داره.
برای مثال به مرورگر بفهمانیم محتوای ما به صورت متن یا لیست نمایش داده شود.
ولی همونطور که توی تصویر میبینید ظاهر خیلی خوبی نداره حالا برای اضافه کردن زیبایی های ظاهری مثل پوست و لباس که در صفحه وب ما شامل رنگ ، اندازه و فاصله المان ها و . . . میشه به سراغ زبان استایل دهی CSS می رویم که نقش خلاقیت و ایجاد جلوه های بصری رو بر عهده داره و این دو زبان در صفحات وب هیچ جایگزین دیگری ندارند و همه صفحات وب داری کد های HTML و CSSهستند.
تا حالا به کمک این دو زبان کدنویسی ساختار کلی بدنه وب سایت رو ساختیم.
حالا قرار هست با استفاده از زبان برنامه نویسی قدرتمند JavaScript روحی در کالبد بی جان وب سایت بدمیم.
بعد از افزودن JavaScript که در واقع مغز متفکر وب سایت ما می باشد میتوانیم رفتارهایی رو برای وب سایت خود تعریف کنیم و به اون اجازه بدهیم در موقعیت های مختلف رفتار های متفاوتی را از خود نشان دهد.
برای مثال اگر کاربر روی یک المان در صفحه کلیک کرد پیغامی به او نمایش داده شود.
کاربرد اصلی JavaScript تبدیل صفحات وب ایستا به صفحات وب پویا می باشد.
با توجه به مواردی که توضیح دادم فهمیدن اینکه چه کسی توسعه دهنده فرانت اند هست خیلی ساده تر شده.
کسی که با استفاده از زبان های فرانت اند ، طرحی که توسط طراح رابط کاربری (User Interface) و طراح تجربه کاربری (User Experience) ارائه شده رو به صورت کد پیاده سازی کنه.
برای تبدیل شدن به یک برنامه نویس فرانت اند خوب نیاز به مهارت های دیگری هم داریم که در ادامه به صورت مختصر به آن ها اشاره خواهم کرد با من همراه باشید.
پس از یادگیری مفاهیم اصلی زبان های فرانت اند باید به سراغ یادگیری کتابخانه ها که در ساده تر کردن کدها و فریم ورک ها که در تعریف چهارچوب کدنویسی برای رسیدن به هدفی مشخص به ما کمک میکنند بریم.
در کنارش باید یاد بگیریم از ابزار هایی که توی برنامه نویسی به ما کمک میکنه مثل کد ادیتور و گیت هاب به خوبی استفاده کنیم .
ما به عنوان یک توسعه دهنده فرانت اند خوب باید مهارت استفاده از خلاقیت و منطق رو در خود پرورش دهیم.
خلاقیت برای درک جلوه های بصری طراح و پیاده سازی آن با استفاده از زبان های HTML و CSS.
و منطق برای درک ساختار زبان برنامه نویسی JavaScript ، ساختار برنامه و الگوریتم ها .