فرانت اند Front-End چیست و چه کاربردی دارد؟

اگر در برنامه نویسی تازه کار هستید، ممکن است اصطلاح Front End Development را شنیده باشید. اما به چه معنا است؟


در این مقاله، من توضیح خواهم داد که فرانت اند چیست، به چه مهارت هایی برای تبدیل شدن به یک توسعه دهنده Front End نیاز دارید و نکاتی برای یافتن شغل.

Front End Development چیست؟

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

بیایید نگاهی به صفحه اصلی freeCodeCamp بیاندازیم.


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

توسعه دهندگان فرانت اند همچنین باید مطمئن شوند که وب سایت در همه دستگاه ها (تلفن، تبلت و صفحه نمایش رایانه) خوب به نظر می رسد.

برای تبدیل شدن به یک توسعه دهنده فرانت اند به چه مهارت هایی نیاز دارید؟

سه زبان اصلی که باید به خوبی بدانید HTML، CSS و جاوا اسکریپت هستند. از آنجا می توانید روی چارچوب ها، کتابخانه ها و سایر ابزارهای مفید تمرکز کنید.

HTML

HTML مخفف HyperText Markup Language است. HTML محتوای صفحه را مانند دکمه ها، پیوندها، سرفصل ها، پاراگراف ها و لیست ها نمایش می دهد.

شما نباید از HTML برای یک ظاهر طراحی استفاده کنید. CSS برای همین است.

من پیشنهاد می کنم برای شروع یادگیری اصول اولیه، چالش های HTML freeCodeCamp را مرور کنید.

CSS

CSS مخفف عبارت Cascading Style Sheets است. CSS مسئول سبک صفحه وب شما از جمله رنگ ها، طرح بندی ها و انیمیشن ها است.

دوره طراحی وب پاسخگوی freeCodeCamp اصول اولیه CSS، طراحی واکنشگرا و دسترسی را به شما آموزش می دهد. طراحی ریسپانسیو برای ایجاد وب سایت هایی که در همه دستگاه ها خوب به نظر می رسند ضروری است.

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

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

جاوا اسکریپت

جاوا اسکریپت به کاربران اجازه می دهد تا با صفحه وب ارتباط برقرار کنند. نمونه هایی از جاوا اسکریپت را می توان تقریباً در هر صفحه وب از جمله صفحه اصلی freeCodeCamp یافت.

به عنوان مثال، وقتی روی دکمه Menu در بالای صفحه کلیک می کنم، یک لیست کشویی از گزینه ها باز می شود. هر بار که روی آن دکمه کلیک می کنم، بین باز و بسته شدن منو به عقب و جلو می رود.

جاوا اسکریپت را می توان در بازی های آنلاین، صفحات وب، برنامه های موبایل و موارد دیگر استفاده کرد.

برای شروع یادگیری جاوا اسکریپت، می توانید دوره آموزشی الگوریتم ها و ساختارهای داده جاوا اسکریپت FreeCodeCamp را بگذرانید. از آنجا، می توانید از 40 پروژه جاوا اسکریپت من برای مبتدیان شروع به ساخت پروژه کنید.

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

مهارت های مورد نیاز یک طراح فرانت اند به شرح زیر است:

• اچ تی ام ال (HTML)
• سی اس اس (CSS)
• جاوا اسکریپت (Javascript)
• فریمورک ها یا کتابخانه های جاوا اسکریپت مانند جی کوئری
• فریمورک های CSSمانند Bootstrap
• پردازنده های CSS مثل Sass یا Less
• طراحی وب Responsive یا واکنش گرا
• نرم افزارهای گرافیکی مثل  فتوشاپ

درآمد و حقوق برنامه نویس فرانت اند چقدر است؟

درآمد یک توسعه دهنده  Front-End در جهان بین 65 هزار دلار تا 110 هزار دلار است و در کشور ما از سه میلیون تومان شروع می‌شود و بسته به عنوان شغل تا بالای ده میلیون تومان نیز می‌رسد. عناوین زیادی برای افرادی که در حوزه‌ی فرانت اند کار می‌کنند، وجود دارد. این مشاغل بسته به وظیفه‌ای که دارند، در میزان حقوق دریافتی هم تفاوت دارند. برخی از مشاغل مهم فرانت اند عبارتند از:

• Front-End Developer
• Front-End Engineer (با نام مستعار JavaScript Developer یا Full Stack JavaScript Developer)
• CSS / HTML Developer
• Front-End Designer Web
• توسعه دهنده / مهندس UI (User Interface)
• Mobile / Tablet Front-End Developer
• Front-End Expert SEO
• Front-End DevOps
• Test-End Testing / Q

برای کسب اطلاعات بیشتر بهتر است وارد سایت های مانند جاب ویژن یا جابینجا شده و عبارت برنامه نویسی فرانت اند را بزنید.

تفاوت برنامه نویس فرانت اند و طراح رابط کاربری (Ui) چیست؟

همانطور که در بخش‌های قبل گفتیم، فرانت اند از دو بخش طراحی و توسعه‌ی رابط کاربری تشکیل شده است. به بخش طراحی تجربه‌ی کاربری (User Experience) یا به اصطلاح UX گفته می‌شود.

UX مشخص می‌کند که تعامل کاربر با یک نرم افزار یا یک وب سایت چگونه باید باشد. بخش توسعه‌ی رابط کاربری (User Interface) هم UI نامیده می‌شود. UI بر این نکته تمرکز دارد که این ارتباط یا همان رابط کاربری، چگونه به نمایش گذاشته می‌شود.

پس طراحان UX مشخص می‌کنند که طراحی صفحات شامل چه المان‌هایی باشد (مثلا صفحه‌ی مورد نظر نیاز به دکمه دارد یا خیر) در حالی که تیم UI روی ظاهر و پیاده سازی این المان‌ها کار می‌کند. این دو در کنار هم، بخش فرانت اند را تشکیل می‌دهند.

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

اما اگر به عنوان یک طراح رابط کاربری مشغول به کار شدید، درمورد طراحی المان‌ها تعهدی ندارید. هرچند که همیشه کمی آشنایی با UX، کار شما را به عنوان برنامه نویس سرعت می‌بخشد و از اضافه کاری جلوگیری می‌کند.

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

سایت های زیادی وجود دارد که میتوانید برای یادگیری و آموزش از این سایت ها به صورت آنلاین استفاده کنید؛ دوره های اینترنتی رایگان و پولی وچود دارد که باید بدانید برای آموزش و درک بهتر باید از دوره های حرفه ای استفاده کنید ولی اگر یک شخص مبتدی هستید



در نتیجه 


در این مقاله سعی شد به صورت کامل به بحث برنامه نویسی فرانت اند بپردازیم، در این مقاله دانستیم فرانت اند چست، چه مزیت هایی دارد، به جه مهارت هایی برای یادگیری آن نیازی داریم و...

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


سوالات متداول

1. برایِ یادگیریِ فرانت اند از کجا شروع کنیم؟

بهترین راه برایِ یادگیریِ فرانت اند، شروع باِ زبان هایِ HTML و CSS است. پس ازِ یادگیریِ این دو زبان، می توانید بهِ سراغِ یادگیریِ زبانِ جاوا اسکریپت بروید.

2. چه فریم ورکی برایِ فرانت اند مناسب است؟

انتخابِ فریم ورک بهِ نیازها و سلیقه ی شما بستگی دارد. برخی ازِ فریم ورک هایِ محبوبِ فرانت اند عبارتند از: React، Angular و Vue.js.

 

3. برایِ تبدیل شدن بهِ یک برنامه نویسِ فرانت اند موفق چه مهارت هایی لازم است؟

علاوه برِ تسلط بهِ زبان هایِ برنامه نویسیِ فرانت اند، مهارت هایِ دیگری مانندِ خلاقیت، نوآوری، تواناییِ حلِ مسئله و ... نیز برایِ موفقیت درِ این زمینه لازم است.

4. چه تفاوتی بینِ فرانت اند و بک اند وجود دارد؟

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

5. برایِ یادگیریِ فرانت اند چقدر زمان لازم است؟

زمانِ لازم برایِ یادگیریِ فرانت اند بهِ عواملی مانندِ تلاش، پشتکار و استعدادِ شما بستگی دارد. به طورِ کلی، می توانید باِ چند ماه تلاش و مطالعه، بهِ سطحِ قابل قبولی درِ این زمینه برسید.

ادامه مطالب