شاید تا به حال بارها و بارها نام فرانت اند یا توسعه دهنده فرانت اند به گوشتان خورده باشد و از خودتان پرسیده باشید این عبارات به چه معنا هستند و چه کاربردی دارند؟ خب، باید به شما بگویم که این عبارات و اصطلاحات در دنیای برنامه نویسی زیاد گفته و شنیده می شوند و هر برنامه نویسی که در حوزه وب کار می کند باید این اصطلاحات را بلد باشد.
من در این مقاله سعی دارم به توضیح این موارد به صورت کاملا کاربردی و ساده و هم چنین مواردی مثل زبان ها و تکنولوژی ها، درآمد و حقوق، نقشه راه این حوزه و تفاوت برنامه نویسی فرانت اند و بک اند بپردازم. پس با من همراه باشید.
به بخشی از یک وب سایت یا وب اپلیکیشن که توسط کاربران قابل مشاهده است، Front End گفته می شود. در واقع فرانت اند کدهایی که برای کاربران غیر قابل درک و فهم است را به صورت بصری و گرافیکی به آن ها نمایش می دهد. به عبارتی دیگر تمامی مواردی که کاربر در یک وب سایت مشاهده می کند، تحت عنوان Front End شناخته می شوند. این موارد شامل متن ها، تصاویر، ویدئو ها، فرم ها و هر المان دیگری که در داخل سایت وجود دارد می شود.
به طور کلی Front End به دو بخش اصلی تقسیم می شود. 1- بخش طراحی رابط کاربری، 2- بخش توسعه و پیاده سازی رابط کاربری. در طراحی رابط کاربری یا طراحی UI، طراحان با استفاده از نرم افزار های گرافیکی از جمله فتوشاپ، ایلاستریتور، ادوبی XD، فیگما و نرم افزارهای مشابه اقدام به طراحی ظاهر سایت می کنند. در بخش توسعه رابط کاربری، برنامه نویسان و طراحان سایت، آن طرحی که طراحان UI با نرم افزارهای مذکور طراحی کرده اند را به صورت کدهای CSS، HTML و JavaScript پیاده سازی و کد نویسی می کنند. به دلیل این که کد های نوشته شده در سمت Front End در مرورگرها اجرا می شوند و کاربران آن ها را می بینند، به این بخش سمت کاربر یا Client Side نیز می گویند.
در حوزه فرانت اند، سه زبان اصلی و محوری وجود دارد که هر برنامه نویس فرانت اند باید با آن ها آشنا باشد. این زبان ها عبارت اند از: CSS ،HTML و JavaScript. البته با گذر زمان، کتابخانه ها، فریم ورک ها و تکنولوژی های مختلفی برای این زبان ها ساخته شدند که در ادامه به توضیح مختصر درباره آن ها می پردازیم.
زبان HTML در واقع یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که برای ایجاد ساختار و بدنه اصلی صفحات وب استفاده می شود. منظور از زبان نشانه گذاری این است که کدهایی که با زبان HTML نوشته شده اند، مانند یک فایل متنی هستند که اجزای آن با تگ ها از هم جدا شده اند.
زبان CSS به نوعی برادر زبان HTML به حساب می آید و به منظور استایل دهی به المان های موجود در صفحه وب مانند متن ها، عکس ها، کادر ها و... ایجاد شده است. منظور از استایل دهی المان ها این است که برنامه نویس اقدام به تغییر رنگ ها، سایزها و در کل شخصی سازی ظاهر و شکل المان هایی می کند که با زبان HTML آن ها را در صفحه وب قرار داده است. در واقع CSS این اجازه را به طراحان سایت می دهد تا مهارت ها و خلاقیت های خود را بدون محدودیت در طراحی صفحات وب سایت پیاده سازی کنند.
برنامه نویس Front End با کمک زبان جاوا اسکریپت به صفحات وب جان می بخشد و در حقیقت با استفاده از آن به پویانمایی صفحاتی که با HTML و CSS طراحی کرده است می پردازد. به عنوان مثال اگر روی یک دکمه کلیک کنیم، یک اتفاق خاص در صفحه رخ می دهد که از تغییر رنگ یک المان گرفته تا ارسال فرم به سمت سرور که تمامی این کارها توسط جاوا اسکریپت انجام می شوند.
حالا که با زبان های اصلی حوزه فرانت اند آشنا شدیم، در این بخش می خواهیم به توضیح مختصر تکنولوژی های آن ها بپردازیم. کسانی که قصد دارند وارد دنیای طراحی سایت و حوزه فرانت اند شوند باید علاوه بر سه زبان بالا با تکنولوژی های مختلفی آشنا باشند.
امروزه تکنولوژی ها و فریم ورک های مختلفی برای توسعه فرانت اند روانه بازار شده اند که امکانات بسیار زیاد و پیشرفته ای را در اختیار طراحان و برنامه نویسان سایت قرار می دهند. از جمله این فریم ورک ها می توان به Angular ،React و Vue.js که از فریم ورک های محبوب زبان جاوا اسکریپت هستند و همچنین فریم ورک هایی نظیر Bootstrap که مخصوص زبان های HTML و CSS است اشاره کرد.
برای درک بهتر مفهوم فرانت اند یک ماشین را در نظر بگیرید. ظاهر سایت مانند بخش هایی از ماشین است که ما می بینیم. رنگ ماشین، چرخ ها، چراغ ها و پنجره ها و کلا قسمت هایی از ماشین که برای ما قابل رویت هستند، Front End را تشکیل می دهند.
البته برای این که ماشین روشن شود و به حرکت دربیاید، به اجزایی مانند موتور نیاز دارد که به صورت کلی ما آن ها را نمی بینیم. کدهایی که در پس زمینه سایت اجرا می شوند مانند موتور ماشین می باشند که مربوط به بک اند هستند.
حقوق و درآمد یک برنامه نویس فرانت اند در خارج از کشور بین 65 هزار دلار تا 120 هزار دلار است و در کشور ما هم بسته به عنوان شغلی و البته شرکتی که در این حوزه فعالیت دارد از سه میلیون تومان شروع می شود و تا بالای 15 میلیون تومان نیز می رسد. عناوین و فرصت های شغلی زیادی برای افرادی که می خواهند در حوزه Front End کار کنند وجود دارد که میزان حقوق دریافتی آن ها با هم تفاوت دارد. برخی از مشاغل عبارت اند از: Front End DevOps ،Front End Web Designer ،Front End Developer و...
توجه: اگر اصطلاحاتی مانند "Full Stack" یا "Full Stack Developer" به گوشتان خورد یا در آگهی های استخدامی مشاهده کردید تعجب نکنید. "Full Stack Developer" به کسی گفته می شود که در هر دو سمت فرانت اند و بک اند مهارت دارد که طبیعتا از درآمد بالاتری برخوردار خواهد بود.
سایت ها علاوه بر برنامه نویس Front End به یک برنامه نویس Back End نیز نیاز دارند تا منطق سایت را به وسیله زبان های برنامه نویسی سمت سرور از جمله PHP و Python پیاده سازی کنند. بک اند به قسمتی از وب سایت یا وب اپلیکیشن گفته می شود که کاربران آن را نمی بینند و به عبارتی هسته و مغز یک وب سایت است. کدهای بک اند نه تنها برای کاربران قابل مشاهده نیست بلکه کاربران به آن ها دسترسی نیز ندارند. Back End با سروری که سایت روی آن قرار گرفته است و همچنین Database یا همان پایگاه داده سروکار دارد.
هنگامی که کاربر روی یکی از المان ها یا لینک های داخل سایت کلیک می کند، در اصل روی یکی از المان های فرانت اند کلیک کرده است که فرانت اند این کلیک را شناسایی کرده و درخواست خود را به سمت سرور ارسال می کند. در سمت سرور آن درخواست پردازش و اجرا می شود ( در این بخش سرور با پایگاه داده ارتباط برقرار کرده و اطلاعاتی را از آن می گیرد ) و در نهایت پاسخ سرور توسط بک اند به سمت فرانت اند برگردانده می شود و فرانت اند (مرورگر) آن را در قالب المان های گرافیکی مثل پیام متنی، تصویر و... به کاربر نشان می دهد.
همان طور که به بخش فرانت اند Client Side گفته می شود، به بخش بک اند نیز Server Side گفته می شود.
مسیر یادگیری حوزه فرانت اند به این صورت است که شما ابتدا باید مفاهیم کلی زبان های پایه یعنی HTML و CSS را یاد بگیرید و سپس به سراغ زبان برنامه نویسی جاوا اسکریپت بروید. بعد از آن باید فریم ورک بوت استرپ و هم چنین یکی از بین Angular، React و Vue.js را به دانسته های خود بیفزایید. از بین کتابخانه های موجود هم کتابخانه jQuery می تواند گزینه مناسبی برای یادگیری باشد.
