آیا تا به‌حال به طراحی سایت مورد علاقه خود دقت کرده‌اید؟ شاید از اینکه چگونه ساخته شده و نحوه عملکرد دکمه‌ها هنگام کلیک کردن، تعجب کرده باشید.
شاید با خودتان فکر کرده‌اید «چقدر پیچیده است!» یا «کاش من هم می‌توانستم چنین کاری انجام دهم.»
تمام این ویژگی‌های قابل مشاهده توسط توسعه‌دهنده فرانت‌اند (front end) ساخته می‌شود.
اگر بخواهیم یک تعریف کوتاه و سریع از نقش توسعه‌دهنده فرانت‌اند داشته باشیم، باید بگوییم که می‌دانیم طراحی وب در واقع نمای سایت را نشان می‌دهد. در این میان توسعه‌دهنده فرانت‌اند کسی است که این طراحی را به واقعیت تبدیل می‌کند و آن را به اجرا در می‌آورد.
توسعه‌دهنده فرانت‌اند چه کسی است؟
توسعه‌دهنده فرانت‌اند کسی است که طراحی وب را از طریق زبان‌های کدنویسی مانند HTML، CSS و JavaScript پیاده می‌کند.
هرچند که چندان مرسوم نیست، اما گاهی توسعهدهندگان فرانت‌اند را توسعه دهندگان سمت کاربر نیز می‌نامند تا بتوانند آنها را از توسعهدهندگان بک‌اند (back end) متمایز کنند.
شما به هر سایتی که سر بزنید، می‌توانید کار توسعه‌دهنده فرانت‌اند را همه‌جای سایت از جمله در نوار پیمایش، پیکربندی صفحات و ... ببینید.
شاید شما هم به شغل توسعه وب علاقه‌مند باشید ولی نمی‌دانید از کجا شروع کنید. ما در این مقاله برخی مهارت‌های کلیدی لازم برای توسعهدهندگان فرانت‌اند را مطرح می‌کنیم. دانستن این موارد به شما در شروع مسیر حرفه‌ای توسعه وب کمک زیادی می‌کند.
توسعهدهندگان فرانت‌اند چه مهارت‌هایی دارند؟
توسعهدهندگان فرانت‌اند از سه زبان اصلی کد نویسی برای کد زدن و پیاده‌سازی طرح سایت استفاده میکنند:
یک: HTML
دو: CSS
سه: JavaScript
کدی که آنها می‌نویسند، در داخل مرورگر کاربر اجرا می‌شود. (برخلاف توسعه‌دهنده بک‌اند که کد‌هایش بر روی سرور وب اجرا می‌شود.)
به این مثال توجه کنید: توسعهدهندگان بک‌اند مهندسانی هستند که سیستم‌های اساسی یک شهر مانند برق، آب و فاضلاب را ایجاد میکنند. این در حالی است که توسعه‌دهنده فرانت‌اند دسترسی بیرونی به این سیستم‌ها را برای مردم فراهم می‌کند.
من تلاش کردم تا بفهمم کدام مهارت‌ها در میان فهرست شغلی توسعهدهندگان فرانت‌اند بیشترین تقاضا را دارد. در نتیجه این تلاش‌ها، متوجه شدم که برای برنامه‌نویسی سمت فرانت‌اند را ابتدا باید با مهارت‌هایی مانند HTML و CSS شروع کنید. سپس به سراغ مهارت‌های پیچیده‌تری مانند JavaScript و Git بروید.
یک: HTML و CSS
این دو اساسی‌ترین بلوک‌های ساختاری کدنویسی در وب هستند. بدون HTML و CSS امکان ندارد بتوانید سایتی ایجاد کنید و تمام چیزی که می‌بینید یک متن ساده و بدون شکل در یک صفحه خالی است. در واقع بدون HTML حتی نمی‌توانید تصاویر را اضافه کنید.
خبر خوب درباره HTML و CSS این است که فقط در عرض چند هفته می‌توانید هر دو را به خوبی یاد بگیرید. بهتر از آن اینکه با دانستن این دو به تنهایی می‌توانید یک سایت ساده بسازید.
دو: Javascript
جاوا اسکریپت به شما امکانی می‌دهد تا یک تابع بیشتر به سایت خود اضافه کنید و قابلیت‌های کاربردی بیشتری داشته باشید. در ساده‌ترین حالت، می‌توانید از جاوا اسکریپت برای ایجاد و کنترل موارد کلیدی مانند آپدیت نقشه‌ها در زمان واقعی، فیلم‌های تعاملی و بازی آنلاین استفاده کنید. سایت‌هایی مانند پینترست از جاوا اسکریپت برای آسان کردن رابط کاربری استفاده میکنند. (در واقع به لطف جاوا اسکریپت، با هر بار پین کردن یک عکس، صفحه از اول بارگیری نمی‌شود.)
جاوا اسکریپت محبوب‌ترین زبان برنامه‌نویسی در جهان است، بنابراین بد نیست که بدون در نظر گرفتن برنامه‌های شغلی خودتان، یادگیری آن را هم در فهرست یادگیری قرار دهید.
سه: jQuery
جی‌کوئری کتابخانه جاوا اسکریپت است. مجموعه‌ای از پلاگین‌ها (plugins) و اکستنشن‌ها (extensions) که امکان توسعه با جاوا اسکریپت را ساده‌تر و سریع‌تر می‌کند. جی‌کوئری به توسعهدهندگان فرانت اند اجازه می‌دهد به‌جای نوشتن کد هرچیزی، از المنت‌های (elements) آماده برای پروژه استفاده کرده و در صورت نیاز آن را شخصی‌سازی کنند. شما می‌توانید از جی‌کوئری برای چیزهایی مانند تایمر شمارش معکوس، فرم جستجوی خودکار و تغییر پیکربندی صفحات به‌صورت خودکار استفاده کنید.
فریم‌ورک‌های جاوا اسکریپت
فریم‌ورک‌های جاوا اسکریپت (شامل آنگولار جی‌اس (AngularJS)، بک‌بون (Backbone)، امبر (Ember) و ری‌اکت جی‌اس (ReactJS)) ساختارهای آماده برای کدهای جاوا اسکریپت به شما ارائه می‌دهند. انواع مختلفی از فریم‌ورک‌های جاوا اسکریپتی برای نیازهای متفاوت وجود دارد، اما این چهار فریم‌ورک، محبوب‌ترین‌ها در میان توسعهدهندگان هستند. این فریم‌ورک‌ها شما را یک مرحله جلو می‌اندازند و واقعا سرعت توسعه را افزایش می‌دهند. همچنین می‌توان با استفاده از کتابخانه‌هایی مانند جی‌کوئری، کد نویسی را به حداقل رساند.
فریم‌ورک‌های فرانت‌اند
نقش فریم‌ورک‌های فرانت‌اند (محبوب‌ترین آنها بوت‌استرپ (Bootstrap) است) برای CSS درست همان نقشی است که فریم‌ورک‌های جاوا اسکریپت برای آن ایفا میکنند. آنها نقطه پرش شما برای کد زدن سریع‌تر هستند. از آنجایی که CSS معمولا با المنت‌های مشابهی شروع می‌شود، استفاده از فریم‌ورک می‌تواند به شما کمک زیادی کند.
تجربه کار با پیش‌پردازنده‌های CSS
پیش‌پردازنده‌‌ها گونه‌ای دیگر از المنت‌ها هستند که توسعه‌دهنده فرانت‌اند می‌تواند با استفاده از آن سرعت کدنویسی در CSS را افزایش دهد. یک پیش‌پردازنده CSS یک قابلیت اضافی است که کار بر روی قابلیت‌های CSS را آسان‌تر می‌کند، چرا که می‌تواند پیش از انتشار کد، آنها را پردازش کند. SASS و LESS دو نمونه از محبوب‌ترین پیش‌پردازنده‌های CSS هستند.
تجربه کار با سرویس‌های RESTful و API
در اصطلاح عام، REST یک معماری سبک است که ارتباطات شبکه‌ای در وب را ساده می‌کند. RESTful و API سرویس‌های مبتنی بر وب به شمار می‌آیند که به این معماری پایبند هستند.
به‌عنوان مثال، شما برنامه‌ای می‌نویسید که اکانت شبکه‌های اجتماعی همه دوستانتان را نمایش دهد تا بتوانید برای آنها درخواست دوستی بفرستید. برای این کار شما باید از RESTful API فیسبوک یا توییتر استفاده کنید تا بتوانید فهرست دوستانتان را بخوانید و داده‌های لازم را برگردانید. روند کلی برای استفاده از خدمات API یکسان است و فقط نوع داده‌های برگشتی متفاوت است.
اگرچه این موضوع کمی پیچیده و فنی به‌نظر می‌رسد، اما مجموعه‌ای ساده از دستورالعمل‌ها و شیوه‌های رایج است. بنابراین یاد می‌گیرید چگونه با یک سرویس وب ارتباط برقرار کنید.
طراحی ریسپانسیو و موبایل
در ایالات متحده آمریکا، بیشتر افراد از طریق موبایل به اینترنت مراجعه میکنند، بنابراین عجیب نیست که مهارت‌های طراحی ریسپانسیو (Responsive) برای کارفرمایان بسیار مهم باشد. طراحی ریسپانسیو یعنی طراحی سایت و گاهی عملکرد و محتوای آن بر اساس اندازه صفحه و دستگاهی که شخص از آن استفاده می‌کند، تغییر کند.
به‌عنوان مثال، وقتی وب‌سایتی را با استفاده از مانیتور بزرگ رایانه رومیزی باز می‌کنید، کاربر می‌تواند چندین ستون ببیند و با کمک ماوس و کیبورد از ویژگی‌های مختلف سایت استفاده کند. در گوشی تلفن همراه، همان سایت با استفاده از یک ستون بهینه‌سازی شده برای تعامل لمسی ظاهر می‌شود و دیگر خبری از ستون‌های مختلف نیست.
طراحی موبایل باید علاوه بر ریسپانسیو بودن، شامل طرح‌های اختصاصی موبایلی نیز باشد. گاهی می‌خواهید چیزی که کاربر در زمان بازدید از سایت شما بر روی رایانه تجربه می‌کند با زمان بازدید به کمک موبایل متفاوت باشد، در این موارد منطقی است که سایت در حالت موبایلی کاملا متفاوت باشد.
به‌عنوان مثال یک وب‌سایت بانکی با قابلیت بانکداری آنلاین از یک سایت جداگانه برای تلفن‌همراه استفاده می‌کند. این به کاربران اجازه می‌دهد مواردی مانند نزدیکترین شعبه و نمای کلی را ببینند.
توسعه مرورگر
مرورگرهای مدرن در نمایش مداوم وب‌سایت‌ها بسیار خوب عمل میکنند اما هنوز هم تفاوت‌هایی در نحوه تفسیر کد در پشت صحنه وجود دارد. تا زمانی که همه مرورگرهای مدرن با استانداردهای وب کار میکنند، دانستن اینکه چگونه هریک از آنها به شکلی که شما می‌خواهید، کار میکنند یک مهارت مهم است.
سیستم مدیریت محتوا و بستر تجارت الکترونیک
بیشتر وب‌سایت‌ها بر یک سیستم مدیریت محتوا CMS ساخته شده‌اند. محبوب‌ترین CMS در سراسر جهان وردپرس است و تقریبا شصت درصد از وب‌سایت‌های مبتنی بر CMS از آن استفاده میکنند. (از جمله Skillcrush)
دیگر سیستم‌های مدیریت محتوا محبوب جهان دروپال (Drupal)، جوملا (Joomla) و مگنتو (Magento) است. البته تسلط به این سیستم‌های مدیریت محتوا به اندازه وردپرس پرطرفدار نیست اما باز هم برای طراحی سایت‌های بسیاری از شرکت‌ها مطلوب هستند.
آزمایش و اشکال‌زدایی (Debugging)
وجود باگ، یک واقعیت در زندگی توسعهدهندگان فرانت‌اند است.
آشنایی با مراحل آزمایش و اشکال‌زدایی بسیار مهم است. آزمایش در واقع فرآیند بررسی بلوک‌های تکی از کد منبع (دستورالعمل‌هایی که به وب‌سایت می‌گوید چگونه کار کند) و بررسی چارچوب‌ها با کمک روش‌های خاص است.
یکی از روش‌های متداول آزمایش، بررسی UI است که به آن آزمایش پذیرش یا آزمایش مرورگر نیز گفته می‌شود و طی آن شما اطمینان می‌یابید که کاربر در هنگام کار چه چیزی می‌بیند. شرکت‌های مختلف، راه‌‌حل‌های متفاوتی برای آزمایش و اشکال‌زدایی دارند.
گیت و سیستم‌های کنترل نسخه
گیت و سیستم‌های کنترل نسخه به شما این امکان را می‌دهند که در طول کد زدن، تغییرات ایجاد شده را پیگیری کنید. آنها همچنین فرآیند برگشت و اصلاح را آسان‌تر میکنند. بنابراین اگر بخواهید افزونه جی‌کوئری سفارشی را اضافه کنید و ناگهان نیمی از کدهای دیگر خراب شود، به‌جای آنکه ناچار به رفع اشکال دستی و بازنویسی باشید، دوباره به نسخه قبلی بازمی‌گردید و این بار یک راه متفاوت را امتحان می‌کنید. دانستن گیت برای هر توسعه‌دهنده‌ای الزامی است و یک مهارت حیاتی به شمار می‌آید.
نکته پایانی: مهارت حل مسئله
اگر یک مهارت برای همه توسعهدهندگان فرانت‌اند لازم باشد، آن مهارت حل مسئله است. اینکه بفهمید چگونه باید به بهترین نحو یک طرح را پیاده کنید، اشکال‌زدایی انجام دهید و چگونه آن را اجرا کنید، همگی به مهارت حل مسئله باز می‌گردد. در توسعه همه‌چیز درباره حل مسئله به‌شیوه خلاق است.
ترجمه آزاد: EXACTLY WHAT YOU NEED TO KNOW TO BECOME A FRONT END DEVELOPER IN 2020
