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

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

برای اینکه بدانید برنامه نویسی فرانت اند چیست و برنامه نویس Front End کیست، ابتدا باید بدانید که Front end چیست؟ ما در این مقاله، برنامه نویسی فرانت اند، موارد مورد نیاز برای یادگیری آن و تفاوت‌های برنامه نویس فرانت اند با سایر حوزه‌ها را توضیح می‌دهیم. پس در ادامه‌ی این مقاله، با وب سایت آموزش برنامه نویسی سون لرن همراه باشید تا به بررسی این موضوع بپردازیم.

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

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

فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و… ظاهر سایت را طراحی می‌کنند. اما بخش توسعه‌ی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و جاوا اسکریپت است. بخش قابل مشاهده‌ سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side می‌نامند.

بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا می‌شوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آن‌ها را مشاهده کند. فرانت اند با بخش بک اند (Backend) در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری می‌گذارد.

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

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

زبان HTML

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

زبان CSS

زبان CSS (مخفف عبارت Cascading Style Sheets) به منظور استایل دهی به اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و… ساخته شده است. در حقیقت شما اجزا و المان‌های یک سایت یا برنامه را با HTML در صفحه‌ی خود قرار می‌دهید و با استفاده از CSS شکل و ظاهر آن المان‌ها را شخصی سازی می‌کنید. پس CSS طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند. سایر اطلاعات مربوط به CSS در مقاله‌ی CSS چیست؟ آورده شده است.

زبان برنامه نویسی Javascript

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

در مقاله‌ی جاوا اسکریپت چیست؟ با ویژگی‌های این زبان برنامه نویسی بیشتر آشنا خواهید شد. همچنین نیاز است تا قبل از شروع یادگیری جاوا اسکریپت، به برخی از مفاهیم HTML و CSS مسلط باشید. این موارد را در مقاله‌ی پیش نیازهای آموزش جاوا اسکریپت توضیح دادیم.

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

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

یادگیری زبان‌های برنامه نویسی HTML ،CSS و جاوا اسکریپت

اگر می‌خواهید به یک توسعه دهنده Front-End تبدیل شوید، در مرحله اول باید بتوانید به صورت حرفه‌ای با HTML ، CSS و JavaScript کدنویسی کنید. کدنویسی فرانت اند، نسبت به سایر حوزه‌های برنامه نویسی آسان‌تر است و منابع زیادی در اینترنت وجود دارند تا روند یادگیری را سریع‌تر کنند. علاوه بر آن، برای هر مشکلی که به آن برخورد می‌کنید، یک راه حل در انجمن‌های پرسش و پاسخ پیدا می‌شود.

آشنایی با کتابخانه‌ها و فریمورک‌های فرانت اند Javascript

به دلیل استانداردهای زبان برنامه نویسی جاوا اسکریپت، می‌توان با آن پیاده سازی‌های متنوعی را انجام داد. به همین دلیل هرازگاهی یک فریمورک‌ جدید و سفارشی به مجموعه فریمورک‌های جاوا اسکریپت اضافه می‌شود. فریمورک‌های جاوا اسکریپت امکانات بسیار زیاد و پیشرفته‌ای را در اختیار طراحان فرانت اند قرار می‌دهند. از جمله این فریمورک‌ها می‌توان به Vu.js، Angular و… اشاره کرد.

آشنایی با اصول طراحی واکنش‌گرا

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

یادگیری نرم افزارهای گرافیکی مانند فتوشاپ

تصور کنید می‌خواهید یک صفحه‌ی وب را پیاده سازی کنید که پیچیدگی المان‌های آن بالا است. در این حالت بهتر است که قبل از شروع کدنویسی طرح آن را با فتوشاپ ترسیم کرده و بعد از موافقت اعضای تیم آن را پیاده سازی کنید. نرم افزارهای گرافیکی مانند Adobe xd، Figma و… در بیشتر مراحل طراحی یک رابط کاربری توسط طراحان فرانت مورد استفاده قرار می‌گیرند. پس یادگیری حداقل یکی از آن‌ها برای برنامه نویس فرانت اند الزامی است. برای آشنایی بیشتر توصیه می‌کنیم آموزش نرم افزار Figma و آموزش طراحی رابط کاربری با Adobe XD را مطالعه بفرمایید.

داشتن سلیقه و خلاقیت

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

آشنایی با اصول تجربه کاربری

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

مثالی از فرانت در دنیای واقعی

برای اینکه مفهوم Front end را بهتر درک کنید، یک فیلم سینمایی را در نظر بگیرید. ظاهر سایت همانند یک فیلم سینمایی است که در حال تماشای آن هستید. بازیگران و صحنه‌های فیلمبرداری شده اجزایی هستند که Front end را تشکیل می‌دهند و بر اساس دستورات کارگردان در مکان موردنظر خود قرار می‌گیرند و به بازیگری می‌پردازند. دستورات کارگردان، همان کدهای HTML، CSS و جاوا اسکریپت می‌باشند که رابط کاربری را ایجاد می‌کنند.

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

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

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

• 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

توجه: اگر اصطلاحات “Full Stack” یا اصطلاحات عمومی “Web Developer” در عناوین شغلی را پیدا کردید، ممکن است این کلمات توسط یک کارفرما برای توصیف نقشی به‌کار رود که مسئولیت کلیه جنبه‌های توسعه‌ی وب / برنامه‌ها را در بر می‌گیرد، یعنی هر دو بخش Backend و Front-End. پس سعی کنید که قبل از شروع کار، مسئولیت‌ها و وظایفی که به آن متعهد می‌شوید را با کارفرمای خود مشخص کنید.

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

اغلب سایت‌ها به یک برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبان‌های برنامه نویسی پیاده‌سازی کنند. بک اند یا Back-end به بخشی از یک وب سایت یا نرم افزار می‌گویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفه‌ی کنترل منطق آن را بر عهده دارد. کاربران به کدهای نوشته‌شده در بخش بک اند دسترسی ندارند و نمی‌‌توانند آن‌ها را مشاهده کنند. بخش بک اند با سرور اصلی (که سایت روی آن قرار گرفته است) و پایگاه داده سروکار دارد.

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

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

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

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

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

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

مسیر یادگیری فرانت اند چیست؟

در سال‌های اخیر، فریمورک‌های متنوعی برای برنامه نویسی وب و به خصوص بخش فرانت اند به وجود آمده و روز به ‌روز بر تعداد آن‌ها افزوده می‌شود. فریمورک‌هایی مانند بلیزر (Blazor)، انگولار (React ,Vue ,(Angular از جمله فریمورک‌های محبوب جاوا اسکریپت هستند. به همین دلیل حوزه‌های بسیاری وجود دارد که می‌توانید آن‌ها را آموخته و به برنامه نویسی فرانت اند مشغول شوید.

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

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

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