فرانت‌اند دولوپر کیست و چه وظایفی دارد؟

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

فرانت‌اند دولوپر کیست؟

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

• (HTML (HyperText Markup Language: زبان استاندارد نشانه‌گذاری که برای ایجاد ساختار و چیدمان صفحات وب استفاده می‌شود.
• (CSS (Cascading Style Sheets: زبان استایل‌دهی که برای کنترل نحوه نمایش، قالب‌بندی و ظاهر صفحات وب، از جمله رنگ‌ها، فونت‌ها و چیدمان عناصر، مورد استفاده قرار می‌گیرد.
• جاوااسکریپت: زبان برنامه‌نویسی‌ای که به توسعه‌دهندگان اجازه می‌دهد قابلیت‌های تعاملی، انیمیشن‌ها و سایر عناصر پویا را به وب‌سایت‌ها و اپلیکیشن‌های تحت وب اضافه کنند.

برای آشنایی بیشتر با مباحث مورد استفاده در شغل فرانت‌اند دولوپر و تقویت مهارت‌هایتان شرکت در دوره فرانت‌اند دانشکار را به شما پیشنهاد می‌دهیم.

زبان‌ها و فناوری‌های مورد نیاز فرانت‌اند دولوپر

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

HTML، CSS و جاوااسکریپت

توسعه‌دهنده فرانت‌اند با استفاده از فناوری‌های وب مانند HTML، CSS، مدل شیءگرای سند (DOM) و جاوااسکریپت، معماری وب‌سایت‌ها و اپلیکیشن‌ها را طراحی و آن‌ها را پیاده‌سازی می‌کند. این محصولات ممکن است مستقیما روی پلتفرم وب باز اجرا شوند یا به‌عنوان ورودی فرایند کامپایل برای محیط‌های غیروب، مانند React Native، مورد استفاده قرار گیرند.

افراد معمولا با یادگیری HTML، CSS و جاوااسکریپت وارد حوزه توسعه فرانت‌اند می‌شوند. این فناوری‌ها اغلب در مرورگرهای وب اجرا می‌شوند، اما می‌توانند در مرورگرهای بدون رابط گرافیکی یا Headless Browser نیز اجرا شوند یا به‌عنوان ورودی فرایند کامپایل برای محیط‌های اجرایی بومی مورد استفاده قرار گیرند.

مرورگرهای وب؛ رایج‌ترین محیط اجرا

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

• Chrome
• Safari
• Microsoft Edge
• Firefox

مرورگرهای بدون رابط گرافیکی

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

• Headless Chromium
• Zombie
• SlimerJS

وب‌ویوها

وب‌ویو یا WebView قابلیتی است که در یک اپلیکیشن لوکال و روی سیستم‌عامل دستگاه، برای نمایش و اجرای صفحات وب استفاده می‌شود. می‌توان وب‌ویو را شبیه یک iframe یا یک تب مستقل از مرورگر در نظر گرفت که داخل یک اپلیکیشن بومی اجراشده روی دستگاه‌هایی مانند گوشی‌های iOS و Android یا رایانه‌های ویندوزی قرار گرفته است. رایج‌ترین راهکارها برای توسعه اپلیکیشن‌های مبتنی‌بر وب‌ویو عبارت‌اند از:

• Electron: برای ساخت اپلیکیشن‌های دسکتاپ استفاده می‌شود.
• Tauri.js
• Cordova: برای ساخت اپلیکیشن‌های بومی تلفن همراه و تبلت استفاده می‌شود.
• NW.js: برای توسعه اپلیکیشن‌های دسکتاپ مورد استفاده قرار می‌گیرد.

ساخت اپلیکیشن بومی با فناوری‌های وب

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

• Flutter
• React Native

نقش فرانت‌اند دولوپر

توسعه‌دهنده فرانت‌اند که در گذشته گاهی توسعه‌دهنده سمت کاربر یا Client-Side Developer نیز نامیده می‌شد، در اصل کدی را تولید می‌کند که از سرور وب به دستگاه کاربر ارسال می‌شود تا رابط کاربری شکل بگیرد.

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

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

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

محیط‌های برنامه‌نویسی فرانت‌اند دولوپر

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

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

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

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

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

• Electron
• NW.js
• Neutralino.js
• DeskGap

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

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

• Flutter
• NativeScript
• React Native؛ اپلیکیشن Instagram برای iOS و Android با استفاده از React Native توسعه داده شده است.
• Tabris.js

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

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

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

• زبان نشانه‌گذاری ابرمتن یا HTML
• شیوه‌نامه‌های آبشاری یا CSS
• نشانی یکنواخت منبع یا URL
• پروتکل انتقال ابرمتن یا HTTP
• زبان برنامه‌نویسی JavaScript یا ECMAScript 262
• قالب تبادل داده JSON
• مدل شیءگرای سند یا DOM
• رابط‌های برنامه‌نویسی وب یا Web APIها
• دستورالعمل‌های دسترس‌پذیری محتوای وب یا WCAG
• استاندارد برنامه‌های اینترنتی غنی و دسترس‌پذیر یا ARIA

علاوه‌بر فناوری‌هایی که پیش‌تر معرفی شدند، یک توسعه‌دهنده فرانت‌اند ممکن است در یک یا چند مورد از حوزه‌های زیر نیز مهارت داشته باشد:

سیستم‌های مدیریت محتوا یا CMS	Node.js	آزمایش سازگاری میان مرورگرهای مختلف	آزمایش سازگاری میان پلتفرم‌های مختلف
تست واحد	دست‌کاری DOM، برای مثال با jQuery	گرافیک برداری مقیاس‌پذیر یا SVG	ساخت انیمیشن با CSS
آزمایش عملکرد در دستگاه‌های مختلف	بهینه‌سازی عملکرد وب در دستگاه‌های همراه	عبارت‌های منظم یا Regular Expressions	نمودارها و گراف‌ها
دسترس‌پذیری وب و WAI-ARIA	تست بار	میکرودیتا و میکروفرمت‌ها	مجموعه‌ابزارهای رابط کاربری
بهینه‌سازی برای موتورهای جست‌وجو یا SEO	تست عملکرد	ابزارهای اجرای وظایف، ابزارهای ساخت و ابزارهای خودکارسازی فرایندها	آزمایش کیفیت کد
طراحی تعامل یا رابط کاربری	بهبود تدریجی و کاهش تدریجی قابلیت‌ها	طراحی وب واکنش‌گرا	آزمایش پوشش کد
تجربه کاربری	سیستم‌های کنترل نسخه، مانند Git	برنامه‌نویسی شی‌گرا	تحلیل پیچیدگی کد
کاربردپذیری	الگوهای معماری MVC، MVVM و MV*	معماری اپلیکیشن	تست یکپارچه‌سازی
سیستم‌های تجارت الکترونیکی	برنامه‌نویسی تابعی	ماژول‌ها	خط فرمان یا CLI
سیستم‌های پورتال	قالب‌های داده مانند JSON و XML	ابزارهای مدیریت وابستگی‌ها	راهبردهای قالب‌سازی
طراحی وایرفریم	رابط‌های برنامه‌نویسی داده، مانند RESTful API	مدیران بسته	موتورهای قالب
چیدمان و گریدبندی با CSS	استفاده و بارگذاری فونت‌های وب	ساخت انیمیشن با جاوااسکریپت	پلیکیشن‌های تک‌صفحه‌ای
	امنیت وب و مرورگر	ابزارهای توسعه‌دهندگان مرورگر

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

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

این شکاف تا حد زیادی پس از ورود JavaScript به حوزه بک‌اند ایجاد شد. توسعه‌دهندگان بک‌اند به‌مرور با ابزارهایی مانند Node.js و MongoDB شروع به ساخت بخش‌های سمت سرور با JavaScript کردند و در نهایت، بسیاری از این مهندسان وارد حوزه فرانت‌اند شدند. جنبه مثبت این تحول، شکل‌گیری نوعی رنسانس در دنیای فرانت‌اند و JavaScript بود. تقریبا همه‌چیز پیشرفت کرد؛ از ابزارها، فریم‌ورک‌ها و کتابخانه‌ها گرفته تا مدیران بسته، CSS و خود زبان JavaScript. البته این پیشرفت‌ها بیش از همه به سود افرادی بود که از قبل تسلط مناسبی بر زبان برنامه‌نویسی JavaScript داشتند.

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

هم‌زمان با این تغییرات، طی چند سال گذشته استفاده از معماری کلاینت سنگین یا Thick Client برای ساخت وب‌سایت‌ها و اپلیکیشن‌های تحت وب افزایش یافته است. اپلیکیشن‌های تک‌صفحه‌ای یا SPA نمونه‌ای از این معماری هستند.

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

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

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

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

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

عناوین شغلی مختلف برای توسعه‌دهنده فرانت‌اند

در یک سمت، برنامه‌نویسانی قرار دارند که تمرکز اصلی آن‌ها بر JavaScript است و برای محیط‌های اجرایی فرانت‌اند کدنویسی می‌کنند. این افراد معمولا دانش علوم کامپیوتر و سابقه توسعه نرم‌افزار دارند و ممکن است HTML و CSS را از طریق ابزارها و لایه‌های انتزاعی مانند JSX و CSS-in-JS به کار بگیرند. در سمت دیگر، توسعه‌دهندگانی قرار دارند که شاید تحصیلات رسمی در علوم کامپیوتر ندارند و تمرکز اصلی آن‌ها بر HTML، CSS و استفاده از جاوااسکریپت برای طراحی و پیاده‌سازی رابط کاربری است.

هنگام ورود به حوزه فرانت‌اند یا بررسی موقعیت‌های شغلی آن، این تفاوت را به‌وضوح مشاهده خواهید کرد. اصطلاح توسعه‌دهنده فرانت‌اند بدون استفاده از واژه‌های تکمیلی که نوع تخصص فرد را مشخص کنند، در حال تبدیل شدن به عنوانی بسیار کلی و مبهم است. در ادامه، رایج‌ترین عنوان‌های شغلی حوزه فرانت‌اند و تعریف هرکدام را بررسی می‌کنیم. البته باید توجه داشت که عنوان‌های شغلی همیشه تعریف دقیق و یکسانی ندارند. عمومی‌ترین و پرکاربردترین عنوان‌ها در این حوزه «توسعه‌دهنده فرانت‌اند» و «مهندس فرانت‌اند» هستند. وجود واژه‌هایی مانند Front-End، Client-Side، Web UI، HTML، CSS یا جاوااسکریپت در عنوان یک موقعیت شغلی نشان می‌دهد که فرد باید تا حدی دانش و تجربه حرفه‌ای در زمینه HTML، CSS، DOM و جاوااسکریپت داشته باشد.

• توسعه‌دهنده یا مهندس فرانت‌اند: این عنوان که در گذشته با نام توسعه‌دهنده سمت کاربر یا Client-Side Developer نیز شناخته می‌شد، یک عنوان عمومی برای توسعه‌دهندگانی است که در زمینه HTML، CSS، DOM و JavaScript مهارت دارند و می‌توانند این فناوری‌ها را در بستر وب، شامل URLها، HTTP، مرورگرها و Web APIها، به کار بگیرند.
• توسعه‌دهنده یا مهندس اپلیکیشن جاوااسکریپت: این عنوان معمولا برای توسعه‌دهنده‌ای استفاده می‌شود که پیش‌زمینه مهندسی یا علوم کامپیوتر دارد و از این دانش برای کار با فناوری‌های فرانت‌اند استفاده می‌کند. چنین موقعیت‌هایی معمولا به دانش علوم کامپیوتر و چندین سال تجربه توسعه نرم‌افزار نیاز دارند. وقتی عبارت JavaScript Application در عنوان شغلی دیده می‌شود، معمولا انتظار می‌رود فرد یک توسعه‌دهنده پیشرفته جاوااسکریپت باشد و مهارت بالایی در برنامه‌نویسی، توسعه نرم‌افزار و ساخت اپلیکیشن داشته باشد. به بیان دیگر، فرد باید چندین سال تجربه ساخت اپلیکیشن‌های نرم‌افزاری فرانت‌اند داشته باشد. همچنین وجود واژه‌هایی مانند Engineer، جاوااسکریپت یا فول‌استک عنوان شغلی ممکن است نشان‌دهنده نیاز به آشنایی با جاوااسکریپت سمت سرور و فناوری‌هایی مانند Node.js و MongoDB باشد.
• توسعه‌دهنده یا مهندس عملکرد فرانت‌اند: این عنوان برای مهندسان اپلیکیشن جاوااسکریپت یا توسعه‌دهندگان رابط کاربری به کار می‌رود که تمرکز اصلی آن‌ها بر عملکرد جاوااسکریپت، سرعت اجرای کد و بهینه‌سازی محیط‌های اجرایی آن است.
• توسعه‌دهنده HTML و CSS: این عنوان به توسعه‌دهنده‌ای اشاره دارد که در HTML و CSS مهارت دارد، اما لزوما دانش گسترده‌ای درباره JavaScript یا توسعه اپلیکیشن‌های نرم‌افزاری ندارد.
• طراح وب فرانت‌اند: وجود واژه دیزاینر در عنوان شغلی معمولا نشان می‌دهد که فرد علاوه‌بر مهارت‌های فرانت‌اند، مانند HTML و CSS، در زمینه‌های حرفه‌ای طراحی مانند طراحی بصری و طراحی تعامل نیز تخصص دارد.
• توسعه‌دهنده یا مهندس رابط کاربری: وجود عبارت Interface یا UI در عنوان شغلی معمولا نشان می‌دهد که فرد علاوه بر مهارت‌های توسعه یا مهندسی فرانت‌اند، باید با اصول طراحی تعامل و طراحی رابط کاربری نیز آشنا باشد.
• توسعه‌دهنده یا مهندس فرانت‌اند موبایل و تبلت: وجود واژه موبایل یا تبلت در عنوان شغلی نشان می‌دهد که توسعه‌دهنده در ساخت رابط‌های کاربری برای دستگاه‌های موبایل یا تبلت تجربه دارد. این رابط‌ها ممکن است به‌صورت بومی، برای مثال با React Native، یا در بستر وب و داخل مرورگر اجرا شوند.
• متخصص سئوی فرانت‌اند: وجود عبارت SEO در عنوان شغلی نشان می‌دهد که توسعه‌دهنده تجربه گسترده‌ای در پیاده‌سازی فناوری‌های فرانت‌اند متناسب با راهبردهای بهینه‌سازی برای موتورهای جست‌وجو دارد.
• متخصص دسترس‌پذیری فرانت‌اند: وجود واژه Accessibility در عنوان شغلی نشان می‌دهد که توسعه‌دهنده تجربه زیادی در طراحی و پیاده‌سازی رابط‌هایی دارد که از الزامات و استانداردهای دسترس‌پذیری وب پشتیبانی می‌کنند.
• مهندس عملیات توسعه فرانت‌اند: وجود عبارت دواپس در عنوان شغلی معمولا نشان می‌دهد که فرد در زمینه فرایندهای توسعه نرم‌افزار، همکاری میان توسعه‌دهندگان، ابزارهای توسعه، یکپارچه‌سازی، استقرار، خودکارسازی و کنترل کیفیت تجربه گسترده‌ای دارد.
• مهندس تست یا تضمین کیفیت فرانت‌اند: وجود عبارت Testing یا QA در عنوان شغلی نشان می‌دهد که توسعه‌دهنده در آزمایش و مدیریت کیفیت نرم‌افزار تجربه دارد. این حوزه می‌تواند شامل تست دستی، تست واحد، تست عملکردی، تست یکپارچه‌سازی، تست کاربری و تست A/B باشد. هرکدام از این عنوان‌های شغلی ممکن است با سطح‌هایی مانند Junior، Mid-Level، Senior، Lead، Director یا Principal همراه شوند تا میزان تجربه، مسئولیت و جایگاه سازمانی فرد را مشخص کنند.

مشاغل مرتبط با فرانت‌دولوپر

توسعه‌دهنده فرانت‌اند در یک تیم توسعه وب فعالیت می‌کند که اعضای آن نقش‌های زیر را بر عهده دارند:

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

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

• استراتژیست‌های سئو
• مهندسان عملیات توسعه یا دواپس
• مهندسان عملکرد و بهینه‌سازی
• توسعه‌دهندگان API
• مدیران پایگاه داده یا DBA
• مهندسان تضمین کیفیت و تسترها

چالش‌های شغلی توسعه‌دهندگان فرانت‌اند

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

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

توسعه‌دهندگان فرانت‌اند علاوه بر تسلط بر HTML، CSS و جاوااسکریپت، باید با زبان‌ها، قالب‌ها و فناوری‌های مشتق‌شده از آن‌ها مانند JSX، Markdown، Sass، Flow، Immutable.js، TypeScript و Reason نیز آشنا باشند. آن‌ها همچنین با مسائل پیچیده‌ای مانند نمایش صحیح فونت‌ها، بهینه‌سازی برای موتورهای جست‌وجو، استانداردهای دسترس‌پذیری، امنیت وب مانند SSL، OAuth2 و XSS، بهینه‌سازی تصاویر، عملکرد شبکه، ایمیل‌های HTML، سرعت مرورگر، عملکرد JavaScript، نحوه رندر HTML، CSS و DOM و تفاوت میان محیط‌های اجرایی JavaScript سروکار دارند.

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

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

منبع: frontendmasters.com