اگر با حوزه برنامه نویسی به خصوص برنامه نویسی وب آشنا باشید احتمالا برای شما هم پیش آمده که عنوان شغلی فرانت اند را شنیده باشید. در این مقاله با هم بررسی می‌کنیم که برنامه نویسی فرانت‌اند چیست و زوایای مختلف این شاخه برنامه نویسی به چه صورت است تا بتوانید با این شاخه بیشتر آشنا شوید و مسیر شغلی خود را انتخاب کنید.
برنامه نویسی Front End چیست؟
هر وب سایتی که شما از آن بازدید می‌کنید شامل دو قسمت اصلی فرانت‌اند و بک‌اند است. هر چیزی که شما به عنوان یک کاربر در ظاهر سایت در مرورگر خود می‌بینید را فرانت اند (Front-End) می‌گویند. در عمل پوسته اصلی سایت که شامل رنگ‌ها، فونت‌ها، انیمیشن‌ها، چینش قسمت‌های مختلف و قسمت‌های قابل تعامل با وب سایت (مانند فرم‌ها)، زیر مجموعه‌ای از حوزه برنامه نویسی فرانت اند است که یک توسعه دهنده فرانت اند آن را توسعه می‌دهد و کد نویسی می‌کند. پس می‌توان گفت قسمتی که کاربر وب سایت آن را به صورت چشمی می‌بیند و با آن تعامل برقرار می‌کند فرانت اند سایت می‌باشد و پلی میان کاربر با قسمت بک اند می‌باشد
زبان‌های برنامه نویسی Front end کدامند؟
مسیر برنامه نویسی فرانت اگرچه به عنوان شاخه‌ای از برنامه نویسی یاد می‌شود که یادگیری آن به نسبت راحت‌تر از دیگر شاخه‌ها هست اما زبان‌ها و تکنولوژی‌های بسیار متنوعی در شکل‌‌گیری ظاهر یک وب سایت دخیل هستند که هر روز در حال گسترش هستند و از این رو تبدیل شدن به یک برنامه نویس فرانت اند را طولانی‌تر کرده اند. اما تمام وب سایت‌هایی که شما هر روزه بازدید می‌کنید حتما شامل ۳ زبان اصلی و اساسی هستند. برای اینکه تفاوت این ۳ زبان را به درستی یاد بگیرید یک ساختمان را فرض کنید. این ساختمان شامل ۳ جز است:
۱. HTML
این قسمت مانند اسکلت و چارچوب یک وب سایت می‌باشد که ساختار قرارگیری قسمت‌های مختلف یک صفحه مانند متن‌ها، تصاویر، فرم‌ها و … را مشخص می‌کند. همانند یک ساختمان که نیاز به اسکلت و چارچوب اولیه دارد html نیز این وظیفه را برای یک وب سایت ایفا می‌کند. این زبان عملا جزوی از زبان‌های برنامه نویسی به حساب نمی‌آید و زیر مجموعه‌ای از زبان‌های برچسبی می‌باشد. در این قسمت می‌توانید نمونه‌ای از ساختار یک html را مشاهده کنید.
<section>
<h2>عنوان یک قسمت</h2>
<p> متن نمایش داده در یک پاراگراف که شامل نوشته‌ها است <a href=”othersite.com”>لینک به صفحه دیگر<a/>
</p>
</section>
<section>
<h2>عنوان یک قسمت</h2>
<p> متن نمایش داده در یک پاراگراف که شامل نوشته‌ها است <a href=”othersite.com”>لینک به صفحه دیگر<a/>
</p>
</section>
همانطور که در این نمونه مشاهده می‌کنید این زبان با استفاده از تگ‌های مانند h2 ،p ،section ،a ساختار صفحه و ترتیب نمایش را مشخص می‌کند.
۲. Css
شما با استفاده از Css می‌توانید ظاهر سایت خود را تغییر دهید و رنگ‌ها، فونت‌ها و اندازه‌ها را برای قسمت‌های مختلف یک html مشخص کنید. اگر به مثال ساختمان برگردیم عملا Css به ما کمک می‌کند که اسکلت خام و بی روح یک ساختمان را با رنگ کردن دیوارها، گذاشتن درهای چوبی و استفاده از چراغ‌ها، زیبا کنیم. برای درک بهتر در همین صفحه‌ای که شما در حال مطالعه هستید برخی از جملات بزرگتر و ضخیم‌تر نمایش داده شده‌اند که این کار را با Css انجام داده‌ایم.
۳. Javascript
جاوا اسکریپت که به اختصار به آن JS هم گفته می‌شود یکی از زبان‌های برنامه نویسی است که در ابتدا تمرکز آن بر روی توسعه وب سایت‌ها بود اما اکنون به عنوان یک زبان برنامه نویسی قوی در بسیاری از حوزه‌های دیگر مثل بک‌اند، موبایل و حتی هوش مصنوعی استفاده می‌شود. در حوزه طراحی وب سایت، این زبان برنامه نویسی کمک می‌کند که صفحات یک وب سایت، پویا و اصطلاحا interactive باشند بدین معنی که با رفتار کاربر واکنش‌ها و عملیات‌هایی را انجام می‌دهند؛ برای مثال با کلیک کردن روی منوی یک وب سایت زیر منوهای آن را نشان می‌دهد یا با کلیک کردن کاربر روی ارسال یک فرم تمام ورودی‌ها را بررسی می‌کند و در صورت وجود خطا به شما پیغام مناسب نمایش می‌دهد. در مثال ساختمان می‌توان زدن یک کلید برق که باعث روشن شدن چراغ می‌شود و یا زدن دکمه آسانسور که باعث جابجایی آسانسور می‌شود را مثال زد.
تخصص‌های مورد نیاز برای تبدیل شدن به یک برنامه نویس فرانت‌اند چیست؟
در گذشته نه چندان دور شما با یادگیری ۳ حوزه قبلی که اشاره شد می‌توانستید به یک برنامه نویس Front End تبدیل شوید اما با پیشرفت تکنولوژی و اهمیت داشتن وب سایت‌های سریع و قابل اطمینان (از لحاظ عملکرد)، یک توسعه دهنده فرانت اند نیاز است تخصص‌های بیشتری را یاد بگیرد و با ادغام آنها یک وب سایت جذاب برای مخاطبان ایجاد کند.
۱. یادگیری زبان‌های اصلی و پایه
یادگیری Html ،Css و Javascript جزیی جدایی ناپذیر از ایجاد یک وب سایت می‌باشد که باید در هر ۳ این حوزه تسلط کافی را داشته باشید تا بتوانید یک ساختار درست و ظاهری زیبا ایجاد کنید.
۲. یادگیری کتابخانه‌ها و فریم‌ورک‌ها
نوشتن یک وب سایت بهینه نیازمند استفاده از کدهایی است که دیگران توسعه داده‌اند و شما باید نحوه کار و استفاده و مهمتر از همه، ادغام آنها را یاد بگیرید تا بتوانید وب سایت‌های پیچیده و بزرگ را با بهترین کیفیت و سرعت پیاده سازی کنید. این کتابخانه و فریم ورک‌ها به شما کمک می‌کنند که بتوانید از امکانات بسیار زیاد و پیشرفته آنها استفاده کنید و نیازی نباشد که از ابتدا بسیاری از موارد را کد نویسی کنید. از نمونه این کتابخانه‌ها و فریم ورک‌ها می‌توان به Sass, Tailwind, React, Vue js, Angular و… اشاره کرد. نکته مهم اینکه شما بر اساس نیاز هر وب سایت باید بتوانید ترکیب درستی از ابزارها را انتخاب و استفاده کنید و لزوما برنامه نویسی یک وب سایت شامل استفاده از تمام این ابزارها نمی‌باشد.
۳. طراحی واکنش گرا (Responsive)
طراحی واکنش گرا یا ریسپانسیو بدین معنی است که ساختار کد نویسی شما باید به صورتی باشد که وب سایت نهایی ایجاد شده در ابعاد مانیتورهای متفاوت و دستگاه‌های متفاوت مانند لپتاپ‌ها، تبلت‌ها و گوشی‌های موبایل به درستی نمایش داده شود و بهم ریختگی و اختلالی در اندازه‌های مختلف صفحه نمایش وجود نداشته باشد. وجود مشکل در رابط کاربری و ظاهر یک سایت می‌تواند تاثیر بسیار منفی و مستقیمی در ارتباط کاربر با آن وب سایت ایجاد کند و لطمه‌های جبران ناپذیری را به یک بیزینس وارد کند.
۴. ورژن کنترل (Version Control)
در طول پیاده سازی یک وب سایت تغییرات بسیار زیادی رخ می‌دهد و شما به عنوان یک برنامه نویس فرانت اند باید بتوانید نسخه‌های مختلف کد خود را مدیریت کنید. برای اینکار ابزارهای متفاوتی مانند GIT,Subvision و… وجود دارند که به شما کمک می‌کنند و باید استفاده از آنها را به درستی یاد بگیرید.
۵. بهینه سازی وب سایت
شما به عنوان یک توسعه دهنده فرانت اند باید توانایی بهینه سازی و بروز نگه داری فرانت سایت را یاد بگیرید تا بتوانید وب سایت را به صورتی پیاده سازی کنید که کاربران در کمترین زمان ممکن صفحه وب را مشاهده کنند و تجربه خوشایندی از کار با وب سایت داشته باشند.
۶. کار با ابزارهای طراحی گرافیکی
اشتباه نکنید شما به عنوان یک برنامه‌نویس نیازی نیست که نحوه طراحی ظاهری یک وب سایت را به صورت مستقیم یاد بگیرید چرا که این قسمت از کار وظیفه یک طراح رابط کاربری (UI) می‌باشد که در ادامه این مقاله توضیح داده‌ایم. اما به عنوان یک برنامه نویس زمانی که طرح نهایی در اختیار شما قرار بگیرد باید بتوانید با ابزارهایی مثل figma, adobe xd و… این طرح را تحلیل کرده و تبدیل به کد کنید.
۷. داشتن خلاقیت بصری
اگرچه گفته شد که به عنوان یک توسعه دهنده فرانت اند نیازی نیست که در حوزه طراحی رابط کاربری تسلط داشته باشید اما داشتن خلاقیت بصری و سلیقه می‌تواند در این مسیر بسیار به شما کمک کند. نکته بسیار مهم در این مورد داشتن علاقه به انجام کارهای بصری می‌باشد تا علاوه بر انجام پروژه‌ها از کار خود نیز لذت ببرید.
۸. قدرت ارتباط گیری
به عنوان یک توسعه دهنده فرانت اند از یک طرف شما ارتباط بسیار نزدیکی با برنامه نویس بک‌اند و از طرف دیگر با طراح رابط کاربری دارید. در این بین وجود اختلاف و تغییر در قسمت‌های مختلف جز جدایی ناپذیری از این حوزه است از این رو علاوه بر قدرت ارتباط گیری برای همکاری موثر باید صبوری را نیز به خوبی تمرین کنید.
چگونه مسیر برنامه نویسی فرانت‌اند را شروع کنم؟
اگر با توجه به مطالبی که در این مقاله گفته شد تمایل دارید که در حوزه برنامه نویسی فرانت‌اند مشغول به کار کنید می‌بایست مباحثی که در بالا گفته شده را به صورت کامل یاد بگیرید. سریع‌ترین و مطمئن‌ترین روش پیشنهادی ما شرکت در بوت کمپ برنامه نویسی فرانت‌اند ناواکس کالج می باشد که با هدف بازار کار ایران و خارج از کشور( مهاجرت و درآمد دلاری ) برگزار می‌شود.
