برنامه نویسی فرانت اند یکی از مهم‌ترین و حساس‌ترین کارهاییه که یه برنامه نویس باید انجام بده! حتماً براتون پیش اومده که به سایت مورد علاقه خودتون نگاه کنین و تعجب کنین که چرا این سایت اینطوری تنظیم شده یا مثلاً چرا عملکرد دکمه‌ها موقع کلیک کردن اینطوریه!؟ آیا تا حالا شده به خودتون بگین کاش من هم میتونسم همچین کاری کنم یا این که چقدر این کار پیچیده‌ست!
باید بگم که تمام ویژگی‌های قابل مشاهده سایت از طرف کاربر، فرانت اند Front End نام داره و به تنظیم و طراحی اون برنامه نویسی فرانت اند گفته میشه.
Front End Development جز مشاغل پر تقاضاست و البته که به مهارت‌های خاصی نیاز داره و من امروز قراره براتون این مهارت‌ها رو بازگو کنم.
برنامه نویسی فرانت اند چیست؟
در حالی که طراحی وبسایت یعنی نحوه به نظر رسیدن سایت، Front-end development یعنی نحوه جایگذاری و پیاده سازی اون طراحی‌ها روی سایت!
برنامه نویس فرانت اند چه کسی است؟
برنامه نویس فرانت اند شخصیه که طراحی وب رو از طریق زبان‌های نشانه گذاری مثل CSS, HTML و JavaScript پیاده سازی میکنه. گاهی اوقات به برنامه نویس فرانت اند ، برنامه نویس سمت مشتری یا Client-Side Developer هم میگفتن، تا اون‌ها رو از توسعه دهندگان بک اند جدا کنن، که البته دیگه خیلی رایج نیست.
شما وارد هر سایتی که بشین میتونین دست و کار یه برنامه نویس فرانت اند رو تو قسمت‌هایی مثل: نوار پیمایش، طرح بندی‌های مقاله‌ها، عملکرد دکمه‌ها، تفاوت سایت دسکتاپ با سایت موبایل و غیره، ببینین.
دلتون میخواد بیشتر درباره برنامه نویسی فرانت اند بدونین؟ پس بریم سراغ بخش بعدی!
چه مهارت‌هایی برای برنامه نویسی فرانت اند لازم داریم؟
برای Front-end development میتونین از سه زبان اصلی برای کد گذاری سایت و طراحی برنامه‌های وب استفاده کنین:
- HTML
- CSS
- JavaScript
کدی که برنامه نویس فرانت اند مینویسه روی مرورگر کاربر (برخلاف برنامه نویس بک اند که کدش روی سرور وب اجرا میشه) اجرا میشه. برنامه نویسی بک اند حکم مهندسی رو داره که زیر ساخت یه شهر مثل لوله کشی فاضلاب، برق کشی، پهنه بندی و غیره رو برای برقراری شهر طراحی میکنه در حالی که برنامه نویسی فرانت اند آرایش خیابان‌ها رو طراحی میکنه و مطمئن میشه که مردم میتونن بدون دردسر از این خیابان‌ها بگذرن و به مقصدشون برسن!
البته برنامه نویسی فرانت اند شامل اطمینان از بی‌عیب بودن Front-End و این که این سایت قراره همونطوری که انتظار میره برای کاربران ظاهر بشه، هم است.
من کلی از فرم‌های استخدام برنامه نویس فرانت اند رو مشاهده کردم و یه لیستی از مهارت‌هایی که واقعا برای وبمسترها مهمه تا بتونن این وظیفه رو به عهده شخصی بذارن، تهیه کردم.
شما اگه تلاش کنین روی این موراد تسلط پیدا کنین، مطمئن باشین در آینده نزدیک به شغل رویایی خودتون میرسین!
HTML و CSS
HTML یا Hyper Text Markup Language یا زبان نشانه گذاری متن، و CSS یا Cascading Style Sheets اساسی‌ترین بلوک‌های ساختمانی برنامه نویسی وب هستند. بدون این دوتا مورد شما اصلاً نمیتونین یه سایت طراحی کنین و کلاً به عنوان برنامه نویس فرانت اند شناخته نمیشین و بَنگ؛ کارتون تمومه!!
قبل از این که مسیر حرفه‌ای برنامه نویسی فرانت اند رو شروع کنین، باید برنامه نویسی HTML و CSS رو دنبال کنین و یاد بگیرین! خبر خوب اینه که شما میتونین فقط طی چند هفته به یه دانش جامع درباره این دوتا زبان برسین و این دانش اساسی بهتون اجازه میده تا بتونین یه صفحه وب رو طراحی کنین!
jQuery
jQuery یه کتابخونه جاوا اسکریپت است که مجموعه‌ای از پلاگین ها و برنامه های افزودنی است و باعث میشه جاوا اسکریپت سریع‌تر و راحت‌تر توسعه پیدا کنه.
به جای این که نیاز داشته باشین همه چیز رو همون اول کار کد کنین، jQuery بهتون اجازه میده تا با استفاده از برنامه نویسی فرانت اند یه سری از عناصر آماده رو به پروژه اضافه کنیم، سپس هرچیزی که لازم بود رو شخصی سازی میکنین (یکی از دلایلی که دونستن جاوا اسگریپت خیلی مهمه همینه).
شما میتونین از jQuery برای چیزهایی مثل تایم شمار معکوس، فرم جستجوی خودکار و حتی مرتب سازی و تغییر اندازه خودکار گرید layout استفاده کنین.
فریمورک JavaScript
فریمورک JS (که شامل AngularJS, Backbone, Ember و ReactJS هست) به کدهای جاوا اسکریپت شما یه ساختار آماده ارائه میده. انواع مختلفی از چارچوب جاوا اسکریپت برای نیازهای مختلف وجود داره البته اون چهار مورد ذکر شده معروف‌ترینشون بودن.
این فریمورک ها واقعاً سرعت برنامه نویسی و توسعه رو با یه جامپ استارت افزایش میده و میتونه با کتابخونه jQuery برای به حداقل رسوندن میزان کدگذاری اسکرچ شما، استفاده بشه.
چارچوب فرانت اند
چارچوب های CSS و چارچوب فرانت اند (محبوب‌ترینش بوت استرپ BootStrap هست) برای CSS همون کاری رو انجام میدن که JS Framework برای جاوا اسکریپت انجام میده!
اون‌ها یه نقطه پرش برای کد گذاری سریع‌تر به شما ارائه میدن و از اون‌جایی که CSS دقیقاً با عناصر مشابهی از یه پروژه به یه پروژه دیگه شروع میشه، داشتن یه همچین فریمورکی که همه این‌ها رو براتون مشخص کنه واقعاً با ارزشه.
بیشتر لیست‌هایی که برای برنامه نویسی فرانت اند شرایط همکاری تعیین کردن، انتظار دارن که شما با این چارچوب آشنا باشین و بتونین باهاش کار کنین.
تجربه با پیش پردازنده‌های CSS
پیش پردازنده‌ها عنصر دیگه‌ای هستند که برای Front End Development لازمن و میتونین از اون برای سرعت بخشیدن به کد گذاری CSS استفاده کنین.
یه پیش پردازنده CSS قابلیت‌های بیشتری رو به CSS اضافه میکنه تا CSS رو مقیاس پذیرتر و کار با اون رو آسون‌تر کنه.
این چارچوب کد رو قبل از انتشارش تو سایت خودتون، پردازش میکنه و اون رو به یه CSS با فرمت خوب و مرورگر پسند! تبدیل میکنه!
تجاربی در زمینه API و خدمات REST برای برنامه نویسی فرانت اند
بدون این که خیلی بخوام رو این مورد تکنیکی تمرکز کنم، باید بگم REST مخفف عبارت Representational State Transfer است. به زبان عمومی این یه سبک معماریه که ارتباطات رو در شبکه‌های وب ساده میکنه و سرویس‌های REST و API سرویس‌هایی هستند که خیلی به این معماری پایبندن.
طراحی ریسپانسیو و طراحی موبایل
خیلی از افراد جهان برای سرچ و جستجوهای روزانه خودشون از موبایل استفاده میکنن و همین امر باعث شده آمار استفاده از تلفن همراه برای بازدید سایت ها افزایش پیدا کنه.
بنابراین جای هیچ تعجبی نیست که مهارت‌های طراحی ریسپانسیو و طراحی تلفن همراه برای کارفرمایان خیلی موضوع مهمی باشه. طراحی ریسپانسیو یعنی طراحی سایت به گونه‌ای باشه که اندازه اون طبق دستگاهی که کاربر برای بازدید سایت استفاده میکنه، تغییر کنه.
مثلاً وقتی سایت رو از یه صفحه بزرگ مانیتور یا یه صفحه تبلت نگاه میکنه، همون وبسایت رو منتها با تغییر اندازه مناسب مشاهده کنه و اطلاعات یا چیز خاصی رو از دست نده.
طراحی موبایل هم میتونه شامل همون طراحی ریسپانسیو باشه ولی همچنان یه سری طرح‌های جداگونه وجود داره که فقط مخصوص موبایله و شما مخصوصاً میخواین سایت رو برای کاربران تلفن همراه طراحی کنین و از سایتی که روی دسکتاپ نمایش داده میشه متفاوته. مثلاً مثل سایت بانکی که کاملاً از سیستم بانکداری انلاین که به کاربر امکانات خیلی بیشتری رو ارائه میده متفاوته.
توسعه مرورگر
مرورگرهای مدرن در نمایش مداوم سایت ها بسیار خوب هستند، اما هنوز هم تفاوت‌هایی در نحوه تفسیر کد در پشت صحنه وجود داره! تا زمانی که همه مرورگرهای مدرن با استانداردهای وب کار کنن دونستن این که چطوری هر کدوم از اون‌ها رو آماده کنین تا به روشی که شما میخواین کار کنن، یه چیز خیلی مهمه و د رحقیقت همون توسعه و پیشرفت مرورگر به حساب میاد.
سیستم مدیریت محتوا و پلتفرم های eCommerce
تقریباً همه وبسایت ها روی یه سیستم مدیریت محتوا یا CMS ساخته شده و eCommerce یه نوع خاص از همین سیستم است. محبوب‌ترین و رایج‌ترین CMS دنیا ورد پرس است که در پشت صحنه میلیون‌ها سایت قرار گرفته.
CMS های معروف دیگه شامل Joomla, Drupal و Magento است. درسته که دونستن این‌ها به شما به اندازه یه متخصص ورد پرس قدرت نمیده ولی بهتون یه زمینه‌ای میده که بین شرکت هایی که از این CMS ها استفاده میکنن، محبوبیت پیدا کنین و با برنامه نویسی فرانت اند آشنایی بیشتری پیدا کنین.
تست کردن و اشکال زدایی
این یه واقعیت زندگی برای برنامه نویسی فرانت اند است: اشکالات همیشه و همه جا رخ میده. پس دونستن مراحل عیب یابی و اشکال زدایی خیلی مهمه.
Unit Testing فرآیند آزمایش بلوک های تکی از کد منبع است (دستور العملی که به سایت میگه چطوری باید کار کنه) و چارچوب‌های تست یونیت روش و ساختار خاصی رو برای انجام این کار فراهم میکنه.
یکی دیگه از متداول‌ترین تست‌ها، تست UI است (همچنین تست پذیرش، تست مرورگر یا تست عملکرد هم نامیده میشه) که در اون شما بررسی میکنین که آیا وقتی که کاربر داره اقدامی رو انجام میده، سایت همونطوری که باید کار میکنه یا خیر!
اشکال زدایی به سادگی تمام خطاهای کار رو پیدا میکنه و متوجه میشین که چرا و چگونه این اتفاقات افتاده و دنبال راه حلی برای رفعشون میگردین.
Git و نسخه کنترل سیستم
سیستم‌های کنترل نسخه بهتون امکان میدن تا تغییراتی که در طول زمان برای کد نویسی ایجاد شده رو پیگیری کنین و در صورت خراب کردن چیزی بهتون امکان که به نسخه اولش برگردین. مثلاً فرض کنین شما افزونه jQuery رو نصب میکنین و ناگهان نیمی از کدهای دیگه خودتون ور خراب میکنین! به جای این که مجبور شین به صورت دستی رفع اشکال کنین، با استفاده از این ابزار میتونین به نسخه اول کار برگردین و دوباره از اول با یه راه حل جدید چیزی که میخواین رو امتحان کنین.
Git پر استفاده‌ترین این سیستم‌هاست و دونستن راجع به این ابزار یکی از مهارت‌های لازم برای انجام برنامه نویسی فرانت اند به حساب میاد.
مهارت حل مسئله
اگه یه مورد مشترک برای همه برنامه نویسان فرانت اند وجود داشته باشه، بدون این که لازم باش کسی تو فرم تقاضا درمورد حرفی بزنه، اون مهارت حل مسئله‌ست!
این که شما بدونین چطوری به بهترین نحو باید طرحی رو پیاده کرد، اشکالات به وجود اومده چطوری رفع میشن و یا این که چطوری میتونین با کد پایان فرانت اند و کد آغار بک اند کار کنین، توسعه حل مسئله خلاق است.
فرض کنین شما کار رو تا اتنها پیش بردین و الان برای یه سری کد اضافه‌تر میخواین ببینین که سایت چه عملکردی داره ولی یهو یه سری ویژگی‌ها کار نمیکنن و مشکلی پیش میاد، حالا یه برنامه نویس فرانت اند خفن باید سریعاً بتونه همه چیز رو جفت و جور کنه و متوجه بشه که ایراد کار از کجاست در واقع باید به این مشکلات به چشم یه معما نگاه کنه نه یه فاجعه وحشتناک!
البته اگه قراره تو برنامه نویسی فرانت اند کارتون عالی باشه باید بتونین همه این مشکلات رو پیش بینی کنین و سعی کنین از بروزشون جلوگیری کنین.
بعد از یادگیری مهارت‌ها در برنامه نویسی فرانت اند چه اتفاقی میفته؟
اگه برنامه نویسی فرانت اند براتون خیلی جذابه ولی همش سر در گمین که از کجا باید شروع کنین، بهتره بهتون بگم از هرجایی که متخصصان پیشنهاد میدن شروع کنین :)))
برای شروع سراغ دوره‌هایی برین که پایه شما رو محکم میکنن و بهتون امکان میدن تا از ابتدایی‌ترین و جزئی‌ترین مهارت‌ها به سمت پیچیده‌ترین و سخت‌ترینشون حرکت کنین. بهتره شروع مهارت‌ها با یادگیری HTML و CSS باشه.
سلام بسیار ممنون از مقاله خوبتون در زمینه برنامه نویسی فرانت