فرانت اند (Front End) چیست؟

  • ارائه توسط تیم محتوا
  • تاریخ انتشار 4 سال پیش
  • دسته آموزشی
  • تعداد نظرات ۰ نظر

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

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

فرانت‌اند یا  Front Endچیست؟

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

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

برنامه‌نویس‌های فرانت‌اند دو کار انجام می‌دهند. یکی از این کارها طراحی ظاهر وب‌سایت با استفاده از نرم افزارهای گرافیکی مثل فتوشاپ است و کار دیگر آن‌ها پیاده‌سازی این ظاهر طراحی شده با استفاده از کدهاست. یک برنامه‌نویس فرانت‌اند باید به موارد زیر تسلط داشته باشد.

زبان HTML: HTML مخفف عبارت Hyper Text Markup Language ، ابزاری است که با استفاده از تگ‌ها قالب کلی وب‌سایت را می‌سازد. در حقیقت HTML اسکلت یک وب‌سایت را می‌سازد. با استفاده از این زبان جای قرارگیری هرکدام از منوها، صداها، عکس‌ها و ... را مشخص می‌کند اما برای زیباسازی کاری نمی‌کند.

زبان  CSS: CSS  مخفف  Cascade Style Sheetsمکمل HTML است. برنامه‌نویس فرانت‌اند با استفاده از CSS می‌تواند استایل مورد نظر خود را روی وب‌سایت پیاده کند. CSS به عنوان یک Style Sheet Languge ظاهری زیباتر به وب‌سایت خود می‌دهد.

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

کتابخانه‌ها و فریم ورک‌های فرانت‌اند: فریم ورک مجموعه ای از کتابخانه‌های مربوط به برنامه‌نویسی است که به توسعه دهنده کمک می‌کند تا کدی که لازم است بسیار طولانی نوشته شود کوتاه بنویسد. برای مثال Jquary یکی از کتابخانه‌های جاوااسکریت است که با استفاده از افزونه‌های آن می‌توانید توسعه وب‌سایت را سریع تر انجام دهید. بوت استرپ از کتابخانه‌های CSS نیز مثال دیگری در این مورد است.

طراحی قالب واکنش‌گرا  (Responsive Web Design): طراحی واکنشی یا پاسخ گرا به این معناست که طراحی وب‌سایت به گونه ای باشد که در هر صفحه نمایشی با هر ابعادی به درستی نشان داده شود.

نرم افزارهای گرافیکی مانند فتوشاپ: یک توسعه دهنده فرانت باید با استفاده از نرم افزارهای گرافیکی مانند فتوشاپ طراحی وب‌سایت را انجام دهد. از این رو یکی از مهارت‌هایی که یک توسعه دهنده این فرانت باید داشته باشد استفاده از نرم افزارهای گرافیکی مانند فتوشاپ و ایلوستریتور است. البته در اغلب موارد کدها را توسعه دهنده فرانت‌اند می‌نویسد و کارهای طراحی و گرافیکی را UI Designer انجام می‌دهد. در واقع UI Designer کاری با کدنویسی ندارد.

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

دیباگ کردن: توسعه دهند فرانت‌اند باید بتواند اشکالات ایجاد شده در کدنویسی را بیابد. برای این کار می‌توان از فریم ورک تست یا UI تست استفاده کند. به این خطایابی دیباگ گفته می شود.

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

منابع

https://skillcrush.com/

https://frontendmasters.com/

نظر دهید

با استفاده از فرم نظردهی زیر به بهبود خدمات کمک کنید.
متن پیام الزامی است!