فرانت اند چیست : برنامه نویسی Front End چیست؟

کنجکاو هستید که برنامه نویسی front-end چیست؟ شاید شما هم از آن دسته افرادی باشید که بارها واژه های front-end و backend را شنیده اید اما معنی آنها را نمی دانید. اکثر برنامه نویسان وب از یکدیگر می پرسند: آیا شما یک برنامه نویس بک اند هستید یا یک برنامه نویس فرانت اند؟

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

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

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

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

زبان های برنامه نویسی front-end چیست؟

امروزه می‌توانید به زبان‌های برنامه‌نویسی UI بسیاری برنامه‌نویسی کنید، اما سه زبان مهم و مهمی که برای هر برنامه‌نویس رابط کاربری ضروری است عبارتند از HTML، CSS و جاوا اسکریپت. با گذشت زمان، هر یک از این سه قسمت دارای نسخه های مختلف به زبان های جدید بود. به عنوان مثال، TypeScript به عنوان یک نسخه توسعه یافته جاوا اسکریپت ایجاد شده است و هنگام کدنویسی با برخی از فریم ورک ها مانند Angular استفاده می شود. در زیر به بررسی این زبان های برنامه نویسی رابط کاربری خواهیم پرداخت.

HTML را انتخاب کنید

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

مجموعه css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برای اینکه مفهوم 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. پس سعی کنید که قبل از شروع کار، مسئولیت‌ها و وظایفی که به آن متعهد می‌شوید را با کارفرمای خود مشخص کنید.