علیرضا
علیرضا
خواندن ۳ دقیقه·۲ سال پیش

فرانت اند : تلفیقی از منطق و خلاقیت

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

فرانت اند چیه؟

در یک وب سایت یا اپلیکیشن همه المان هایی که کاربر به صورت بصری میبینه به فرانت اند مربوط میشه

برای مثال : منوها ، تصاویر ، فرم های ورود اطلاعات و . . .

فرانت اند به دو بخش تقسیم میشه بخش اول طراحی ظاهر وب سایت که توسط طراحان با استفاده از نرم افزار های گرافیکی مثل فیگما صورت میگیره و بخش دوم توسعه وب سایت که توسط توسعه دهنده با استفاده از زبان های فرانت اند طرح مورد نظر به صورت کد قابل فهم برای مرورگر پیاده سازی میشه که در این مطلب به بخش دوم میپردازیم.


فرانت اند
فرانت اند


وظیفه فرانت اند ایجاد تعامل با کاربر و برقراری ارتباط بین مرورگر کاربر و سرور هست .

برای اینکه بهتر متوجه بشید لطفا به تصویر زیر دقت کنید ، هر اون چه میبینید شامل فرانت اند یک وبسایت میشه.


قالب وب سایت
قالب وب سایت




زبان های برنامه نویسی فرانت اند چیه؟

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

در ادامه بیشتر با این زبان ها آشنا میشیم.

  • HTML : Hyper Text Markup Language
  • CSS : Cascading Style Sheets
  • JavaScript


تفاوت زبان های فرانت اند
تفاوت زبان های فرانت اند


در واقع HTML و CSS زبان برنامه نویسی نیستند،HTML زبان نشانه گذاری و CSS زبان استایل دهی می باشد.

اما سومین مورد ما یعنی JavaScript یک زبان برنامه نویسی قدرتمند و محبوب می باشد.

با توجه به تصویر بالا اگر صفحه وب رو مانند بدن یک انسان در نظر بگیریم.

زبان نشانه گذاری HTML نقش استخوان بندی و تعریف ساختار اصلی صفحات وب ما رو به عهده داره.

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

ولی همونطور که توی تصویر میبینید ظاهر خیلی خوبی نداره حالا برای اضافه کردن زیبایی های ظاهری مثل پوست و لباس که در صفحه وب ما شامل رنگ ، اندازه و فاصله المان ها و . . . میشه به سراغ زبان استایل دهی CSS می رویم که نقش خلاقیت و ایجاد جلوه های بصری رو بر عهده داره و این دو زبان در صفحات وب هیچ جایگزین دیگری ندارند و همه صفحات وب داری کد های HTML و CSSهستند.

تا حالا به کمک این دو زبان کدنویسی ساختار کلی بدنه وب سایت رو ساختیم.

حالا قرار هست با استفاده از زبان برنامه نویسی قدرتمند JavaScript روحی در کالبد بی جان وب سایت بدمیم.

بعد از افزودن JavaScript که در واقع مغز متفکر وب سایت ما می باشد میتوانیم رفتارهایی رو برای وب سایت خود تعریف کنیم و به اون اجازه بدهیم در موقعیت های مختلف رفتار های متفاوتی را از خود نشان دهد.

برای مثال اگر کاربر روی یک المان در صفحه کلیک کرد پیغامی به او نمایش داده شود.

کاربرد اصلی JavaScript تبدیل صفحات وب ایستا به صفحات وب پویا می باشد.




توسعه دهنده فرانت اند کیه؟

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

با توجه به مواردی که توضیح دادم فهمیدن اینکه چه کسی توسعه دهنده فرانت اند هست خیلی ساده تر شده.

کسی که با استفاده از زبان های فرانت اند ، طرحی که توسط طراح رابط کاربری (User Interface) و طراح تجربه کاربری (User Experience) ارائه شده رو به صورت کد پیاده سازی کنه.

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




نقشه راه فرانت اند


نقشه راه فرانت اند
نقشه راه فرانت اند


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

در کنارش باید یاد بگیریم از ابزار هایی که توی برنامه نویسی به ما کمک میکنه مثل کد ادیتور و گیت هاب به خوبی استفاده کنیم .




فرانت اند تلفیقی از منطق و خلاقیت

تلفیقی از منطق و خلاقیت
تلفیقی از منطق و خلاقیت

ما به عنوان یک توسعه دهنده فرانت اند خوب باید مهارت استفاده از خلاقیت و منطق رو در خود پرورش دهیم.

خلاقیت برای درک جلوه های بصری طراح و پیاده سازی آن با استفاده از زبان های HTML و CSS.

و منطق برای درک ساختار زبان برنامه نویسی JavaScript ، ساختار برنامه و الگوریتم ها .




خلاصه

  • فرانت اند شامل هر آنچه که به صورت بصری در وب سایت مشاهده میکنید.
  • زبان نشانه گذاری HTML معرف ساختار کلی وب سایت.
  • زبان استایل دهی CSS افزودن جلوه های بصری به ساختار وب سایت.
  • زبان برنامه نویسی JavaScript ایجاد رفتار و پویایی برای وب سایت.
  • توسعه دهنده فرانت اند موظف به پیاده سازی طرح ها و تبدیل به کد.
برنامه نویسیفرانت اندتوسعه دهندهجاوااسکریپتکدنویسی
برنامه نویس وب ، کارشناس مهندسی کامپیوتر و همیشه در حال یادگیری ...
شاید از این پست‌ها خوشتان بیاید