قدم‌به‌قدم تا توسعه فرانت‌اند: مهارت‌های پایه

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

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

اگر در پایان این مطلب به یادگیری یک‌جای همه این تکنولوژی‌ها علاقمند شدید، سری به دوره «آموزش پروژه‌محور طراحی وب (Front-End) کوئرا کالج» بزنید. در این دوره صفر تا صد مفاهیم jQuery ،JavaScript Bootstrap ،CSS ،HTML و Ajax را با تمرین‌ها و پروژه‌های کاربردی می‌آموزید و فرصت این را دارید که برای استخدام در اسنپ‌فود و اسنپ به مصاحبه دعوت شوید.

مهارت اول: HTML

برای قدم گذاشتن در وادی توسعه وب، اولین چیزی که باید یاد بگیرید HTML است. HTML یک زبان نشانه‌گذاری (Markup Language) استاندارد است که با آن صفحات وب را می‌سازند. زبان نشانه‌گذاری به زبانی گفته می‌شود که از تگ‌های به‌خصوص برای مشخص کردن بخش‌های مختلف متن استفاده می‌کند. وقتی به یک زبان نشانه‌گذاری می‌نویسیم، به خواننده نشان می‌دهیم که متن‌مان با یک نوشته معمولی در وُرد فرق دارد. HTML اولین ابزار در توشهٔ فرانت‌اندِ شما است و ساده‌ترین چیزی است که برای توسعه وبسایت نیاز دارید. در گذر سال‌ها، HTML حسابی رشد کرده و امروز جدیدترین نسخه آن HTML 5 است.

مهارت دوم: CSS

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

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

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

پیش‌پردازنده‌های CSS

سی‌اس‌اس خیلی خوب است، اما محدودیت‌هایی دارد. مثلا یک مشکل آن این است که نمی‌شود در آن متغیرها و تابع‌ها را تعریف کرد یا جمع و تفریق انجام داد. این کمبودها زمانی روی اعصاب آدم راه می‌روند که پروژه بزرگ باشد و کدها مدام بیشتر و بیشتر شوند. آن وقت می‌بینید برای تغییر هر چیز جزئی‌ای باید ساعت‌ها خودتان را با نوشتن کدهای تکراری شکنجه کنید. مثلا اگر بخواهید رنگ آبی قسمت‌های مختلف سایت را تغییر بدهید، باید همه Hex Valueها (کدهای رنگی) را تک‌به‌تک پیدا و عوض کنید! پیش‌پردازنده‌های CSS آمده‌اند تا وقت و حوصله‌تان را از چنگال مشکلات CSS نجات بدهند و زندگی‌ را برای شما ساده‌تر ‌کنند.

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

سَس (Sass)، لِس (Less)، پست‌سی‌اس‌اس (PostCSS) و استایلس (Stylus) همگی پیش‌پردازنده‌های محبوبی هستند. اما اگر من می‌خواستم فقط یکی از آن‌ها را انتخاب کنم، قطعا انتخابم Sass است(لیستی از آموزش‌های آنلاین سَس). اخیرا PostCSS هم خیلی دارد محبوب می‌شود. فکر خوبی است که بعد از یاد گرفتن Sass، سراغ آن هم بروید.

مهارت سوم: جاوا اسکریپت (JavaScript)

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

جاوا اسکریپت منطق و عملکردهای وبسایت را می‌سازد. Featureهای پیچیده‌ و تعاملی (Interactive) مثل صدا و ویدیو، بازی، امکانات اسکرول کردن و انیمیشن‌های صفحه همه حاصل جاوا اسکریپت است.

با رشد CSS، امکان ساختن خیلی از این Feature‌ها هم دارد به آن اضافه می‌شود؛ با این حال هنوز راه زیادی مانده است. همانطور که نظرسنجی‌های سال ۲۰۱۸ و ۲۰۱۹ استک‌اورفلو نشان می‌دهد، جاوا اسکریپت فعلا محبوب‌ترین زبان برنامه‌نویسی است. این یعنی حالا حالا‌ها از دور خارج نمی‌شود و برای توسعه فرانت‌اند، باید آن را خوب و عمیق یاد بگیرید.

مهارت چهارم: کتابخانه‌ها و فریم‌ورک‌های جاوا اسکریپت

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

کتابخانه‌ها و فریم‌ورک‌های جاوا اسکریپت (و همینطور CSS)، مجموعه‌ای از فایل‌ها به این زبان‌ها هستند که کارکردهای پراستفاده را در اختیار شما می‌گذارند. مثال بزنم؛ اگر خواستید کارکرد لاگین یا سرچ‌کردن را به سایت‌تان اضافه کنید، لازم نیست از اول برایشان کد بنویسید. خیلی راحت، می‌توانید فایلِ کدِ عملکرد را از کتابخانه بگیرید، آن هم با کدهای تمیز و مرتب! اجتماع بزرگی از توسعه‌دهندگان مدام دارند این فریم‌ورک‌ها را توسعه می‌دهند و همه به پیشرفت همدیگر کمک می‌کنند.

اکثر اوقات انتخاب و مسلط‌شدن به یکی از فریم‌ورک‌ها کافی است و نیاز نیست از این شاخه به آن شاخه بپرید. سه فریم‌ورک برتری که خوب است به یاد گرفتن‌شان فکر کنید، این‌ها هستند: ری‌اکت (React)، انگولار (Angular) و ویو (Vue).

۱. ری‌اکت

محبوب‌ترین کتابخانه جاوا اسکریپت در حال حاضر، ری‌اکت است که بیش از ۱۲۰ هزار ستاره در گیت‌هاب گرفته است. ری‌اکت را فیسبوک اوپن سورس کرده و امروزه اجتماع بزرگی از توسعه‌دهنده‌ها روی آن کار می‌کنند. این روزها بسیاری از اپلیکیشن‌های وب مدرن را با ری‌اکت می‌سازند.

۲. انگولار

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

اگر دوست داشتید این دو فریم‌ورک را با هم مقایسه کنید، با خواندن این پست می‌توانید تفاوت‌هایشان را بفهمید.

۳. ویو

فریم‌ورک Vue.js، تازه‌واردِ بازار است. ویو هم از انگولار الگو گرفته است و هم از ری‌اکت، اما خیلی سبک‌تر از آن‌ها است و به همین دلیل اخیرا طرفدارهای زیادی پیدا کرده است.

اگر می‌خواهید ویو را با ری‌اکت مقایسه کنید، این پست گزینه خوبی است. مستندسازی رسمی Vue.js خیلی مرتب و منظم ساخته شده و بسیار به‌دردبخور است.

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

به یادگیری برنامه‌نویسی فرانت‌اند علاقمند شدید؟ برای ثبت نام در دوره فرانت‌اند کوئرا کالج کلیک کنید.

ترجمه، اقتباس و تخلیص از:

"5 Essential Skills Every Front End Developer Must Learn in 2019" by Adhithi Ravichandran @Programmingwithmosh

"The 10 Skills You Need to Land Your First Front End Developer Job" by Scott Morris @ Skillcrush

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