فرانت اند (Front End) چیست؟ قسمت اول

فرانت اند  Front End

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

به نظر می‌رسد این روزها همه به نحوی با دنیای دیجیتال و آنلاین سروکار دارند! اینترنت نه تنها ارتباط بین کاربران و افراد مختلف را از روش‌های مختلف مانند شبکه‌های اجماعی، ایمیل، وبسایت و... تسهیل می‌کند بلکه منبع بسیار وسیع نیز برای یافتن اطلاعات گوناگون است. اما این مسئله تنها به اینجا ختم نمی‌شود و کارهای گوناگون دیگری را نیز برای ما آسان می‌کند؛ کارهایی مانند: پرداخت قبوض، کارهای بانکی، انتقال اطلاعات، مدیریت وسایل الکترونیکی(با استفاده از اینترنت اشیاء) و بسیاری کارهای دیگر. این فناوری بسیار کاربردی و محبوب آنقدر در میان کاربران جایگاه ویژه‌ای پیدا کرده‌است که بسیاری از کاربران به اطلاعات موجود در آن به راحتی اعتماد می‌کنند، یا بهتر است بگوییم به منبع قابل اعتمادی بین افراد تبدیل شده‌است.
هر اپلیکیشن آنلاین (منظور از اپلیکیشن در این مقاله تمامی برنامه‌های تحت وب مانند برنامه‌های موبایل، وبسایت و غیره است) دارای بخشی تعاملی با کاربران است که کاربران می‌تواند از طریق این قسمت‌ها با اپلیکیشن، ادمین، تیم پشتیبانی یا بخش‌های دیگر(بستگی به میزان دسترسی دارد که سازندگان برنامه در اختیار کاربران قرار می‌دهند) در ارتباط باشند. برای مثال هنگامی که وارد یک وبسایت می‌شوید، ممکن است با یک صفحه خوشامدگویی روبه رو شوید و پس از آن می‌توانیم به قسمت‌های مختلف دیگر مانند: منو، ارتباط با پشتیبانی، قسمت فروش و قسمت‌های مختلف دیگر بروید. زیبایی بخش تعاملی با مشتری و سهولت کار با آن بستگی به تیم سازنده و میزان حرفه‌ای بودن آن‌ها دارد که به تمامی آن‌ها اصطلاح فرانت اند(Front end) اتلاق می‌شود. به زبان ساده‌تر، با استفاده از فرانت اند قسمت قابل مشاهده از یک برنامه تحت وب (یا همان رابط کاربری) را می‌توان پیاده‌سازی کرد.
در ادامه ابتدا باهم به بررسی دقیق‌تر فرانت اند و سپس به این‌که چگونه می‌توان به یک برنامه نویس فرانت تبدیل شد، خواهیم‌پرداخت.

منظور از توسعه دهنده فرانت اند(Front end developer) چیست؟

یک توسعه دهنده فرنت اند، که با عنوان توسعه دهنده فرانت اند وب(Front end web developer) نیز شناخته می‌شود، یک فرد کارشناس و حرفه‌ای در زمینه پیاده‌سازی طراحی رابط کاربری از طریق کدنویسی است. این رابط کاربری چیزی است که کاربران آن را می‌بینند و با آن تعامل دارند و هرچه برنامه‌نویس فرانت اند حرفه‌ای تری آن را پیاده‌سازی کرده باشد، کارایی و کاربر پسندی بیشتری را شاهد خواهیم‌بود. برنامه نویس فرانت اند پیاده‌سازی رابط کاربری را از طریق کدنویسی با HTML، CSS انجام می‌دهد و با استفاده جاوا اسکریپت عملگرهای آن را کدنویسی می‌کند. در حال حاضر فریم ورک‌های مختلفی برای بالا رفتن سرعت کار و کارایی بهتر وبسایت اراءه شده‌اند که خواهان بسیاری را نیز دارند. از جمله این فریم ورک‌ها می‌توان به ری اکت جی اس(React.js) و نکست جی اس(Next.js) اشاره کرد. اما لحظه‌ای صبر کنید! قبل از ادامه بحثمان بر روی فرانت اند بهتر است تفاوت میان توسعه دهندگان فرانت اند، بک اند(Back end) و یک توسعه دهنده فول استک(Full stack) را به صورت کاملاً مختصر بشناسیم:
۱) فرانت اند: مسئول قسمت‌هایی از برنامه یا وبسایت است که کاربران می‌بینند و با آن تعامل دارند.
۲) بک اند: مسئول پیاده‌سازی زیر ساخت‌ها، پایگاه داده‌ها و به طورکلی هرچیزی است که سمت سرور رندر می‌شود.
۳) فول استک: ترکیبی از هر دو توسعه دهنده فرانت و بک اند است و می‌تواند کار هر دو توسعه دهنده را به تنهایی انجام دهد.
در گذشته بین وظایف برنامه نویسان فرانت و بک خط و مرزی مشخصی وجود داشت؛ اما امروزه بسیاری از محاسبات از طریق فرانت انجام می‌شود و تعامل این دو بخش بسیار بیشتر از قبل شده است(برای اطلاعات بیشتر و نحوه رندر شدن داده‌ها در بخش سرور و کلاینت بهتر است مروری به قسمت هفتم مقاله Next.js داشته باشید). به عنوان گزینه بهتر توسعه دهندگان فول استک وجود دارند که افرادی بسیاری حرفه‌ای با سابقه کار بالا هستند و در برخی موارد نیز سابقه مدیریت پروژه را نیز به عهده داشته‌اند و در بخش‌های مختلف مانند: سیستم‌های کامپیوتری، پیکربندی، پیاده‌سازی و نگهداری پروژه مهارت بالایی دارند؛ اما قاعدتا یافتن و کار با این افراد ساده نیست و معمولاً مبالغ بسیار بالایی را جهت همکاری درخواست می‌کنند! 

نقش‌ها و مسئولیت‌های یک برنامه نویس فرانت اند:

اگر مسئولیت‌های یک برنامه نویس فرانت در ذهنتان همچنان مانند یک علامت سوال است، می‌توانیم بگوییم لیست وظایف آن‌ها به شرح زیر است:
۱) پیاده‌سازی طراحی و ساختار صفحه وب
۲) توسعه فیچرها(Features) برای افزایش رضایتمندی از تجربه کاربری کاربران
۳) ایجاد تعادل بین طراحی و عملگرا(Functional) بودن
۴) پیاده سازی هرچه زیباتر و دقیق‌تر حالت ریسپانسیو(Responsive) برای استفاده تبلت‌ها و گوشی‌های همراه
۵) ساخت کدهایی با قابلیت استفاده مجدد(Reusable) برای راحتی کار در پروژه‌های بعدی و همچنین راحت‌تر شدن رفع خطاها(Debug)
۶) بهینه‌سازی صفحات وب برای دریافت بهترین سرعت و مقیاس‌پذیری هرچه بیشتر پروژه
۷) در نظر داشتن نام تجاری در زمان پیاده‌سازی طراحی
۸) بهینه‌سازی سئو سایت در بخش کدنویسی(به طورکلی مبحث سئو شامل دو بخش کدنویسی و محتوا می‌شود که هر یک از آن‌ها توسط خزنده‌های مختلف گوگل بررسی می‌شوند، برای اطلاعات بیشتر به مقاله الگوریتم های گوگل مراجع کنید)

مهارت‌های یک توسعه دهنده فرانت اند:

از آنجایی که وجهه یک برنامه نویس فرانت اند در دنیای توسعه وبسایت و اپلیکیشن مانند یک راک استار است! پس تنها چیزی که نیاز دارد یک جعبه ابزار(Toolbox) مجهز و کارآمد است. بنابراین مهارت‌هایی که یک توسعه دهنده فرانت را می‌توانند در مسیر پیشرفتش یاری کنند عبارتند از:
۱) داشتن مدرک مهندسی کامپیوتر یا گذراندن دوره‌های آموزشی مرتبط
۲) تسلط در زمینه‌های کدنویسی مانند آشنایی کامل با HTML، CSS، JavaScript و... 
۳) آشنایی با فریم ورک‌های کارآمد و نحوه استفاده از آن‌ها بصورت کاربردی
۴) آشنایی نسبی با فرآیندهایی که سمت سرور اتفاق می‌افتد
۵) داشتن ذوق هنری و آشنایی نسبی با مباحث طراحی(UI، UX و...)
۶) شناخت اصول سئو
۷) مهارت حل مسئله و ارائه راه کارهای مختلف
۸) داشتن مهارت لازم در کار گروهی و برقراری ارتباط با اعضای تیم

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

بر طبق وبسایت‌های آماری مختلف مانند Builtin، Kinsta، Talent و... میانگین درآمد یک برنامه نویس فرانت اند در کشورهای توسعه‌یافته مانند آمریکا، چیزی ما بین ۸۰هزار الی 120هزار دلار در سال است. میزان این مبلغ بسته به شرکت محل کار و همچنین سطح تجربه و استعداد هر فرد دارد و ممکن است در برخی موارد برنامه نویسان جوان و کم تجربه مبالغ پایین‌تری نیز دریافت کنند.

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