نقشه راه برنامه نویسی فرانت اند وب سایت در سال ۱۴۰۲

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

نقشه راه برنامه نویسی چیست؟

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

فرانت اند وب سایت چیست؟

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

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

در ادامه مسیر بهینه و حرفه‌ای برای تبدیل شدن به یک برنامه‌نویس فرانت‌اند را معرفی می‌کنیم. البته اوایل این مسیر، با مسیری که یک برنامه‌نویس بک‌اند می‌پیماید مشترک است چون آشنایی به کلیات و نیز چکیده‌ای از زبان‌های HTML و CSS برای همه توسعه‌دهندگان وب ضروریست.

اینترنت چگونه کار می‌کند؟

در قدم اول ما باید دانش خوبی با مفاهیم اولیه اینترنت بدست بیاوریم. یعنی بدانیم اینترنت چگونه کار می‌کند؟ در این راستا باید با مفاهیم زیر آشنا بشویم.

هاست (Host)
DNS
HTTP / HTTPS
مرورگرها و نحوه کارشان
دامنه یا دامین (Domain)

ابزارها و نرم‌افزارهای پایه برنامه‌نویسی

در گام بعدی شما باید با چهار بخش مهم آشنا بشوید:

ویرایشگر کد و متن (Code Editor / IDE)
در این رابطه نرم‌افزار VS Code به دلیل راحتی استفاده، سبکی در اجرا و رایگان بودن، محبوبیت بیشتری دارد. هرچند نرم‌افزارهای دیگری نظیر Sublime Text و Atom و حتی Vim موجود است. با این حال لیست بلندی از ویرایشگرهای کد وجود دارد که به Brackets و WebStorm هم می‌شود اشاره کرد.
مرورگرها
در رابطه با مرورگرها، میزان استفاده از کروم بیشتر از سایرین است البته بعضی‌ها با فایرفاکس احساس راحتی بیشتری می‌کنند. با این حال برای توسعه، ابزارهایی که Google Chrome در اختیارتان می‌گذارد واقعاً خیلی قوی‌تر از سایر مرورگرهاست.
کار با ترمینال
ترمینال (Terminal) یکی دیگر از ابزار تخصصی برنامه‌نویسی‌ست که توسط سیستم‌های عامل قابل اجراست. اگر با ترمینال آشنایی ندارید، همان محیط CMD یا ‌Command Prompt ویندوز را در نظر بگیرید. حالا ترمینال‌های قوی‌تر و بهتری هم برای کار با سیستم‌عامل و دستور دادن به آن موجود است که شاید برای شروع Git Bash از همه آن‌ها ساده‌تر و راحت‌تر باشد.
کار با نرم‌افزارهای طراحی
شما به عنوان برنامه‌نویس فرانت‌اند هرگز وظیفه دیزاین و طراحی سایت را برعهده ندارید و تنها موظف به پیاده‌سازی طراحی‌ها هستید. هرچند در بعضی پروژه‌ها و شرکت‌ها، این کارِ غیرحرفه‌ای دیده می‌شود و شاید جزء مهارت‌های اضافی و کمکی به حساب بیاید. با این حال منظور ما در این بخش، یادگیری کار با نرم‌افزارهای طراحی خصوصا فیگما (Figma) در حد برنامه‌نویسان است. یعنی بتوانید طراحی‌ها را داخل آن‌ها باز کرده، ابعاد، سایزها، فونت‌ها و … را از آن استخراج نمایید.

گام اصلی نقشه راه برنامه نویسی فرانت اند

حالا نوبت به بخش اصلی در راه برنامه‌نویس فرانت‌اند شدن و آشنایی و یادگیری زبان‌های HTML و CSS است.

یادگیری زبان HTML

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

Best Practices
یا همان بهترین روش کدنویسی HTML. زیرا با تگ‌ها و روش‌های مختلفی امکان ساخت یک صفحه وب هست اما قطعاً‌ هر روشی، بهینه، استاندارد یا حرفه‌ای نیست.
Semantic HTML
یا کدهای معنایی. بعضی از تگ‌های HTML معنا و مفهوم مشخصی ندارند؛ مثل div یا span. اما تگ‌هایی مثل section یا article یا header دارای مفهوم مشخصی هستند. باید سعی کنید تا جای ممکن از تگ‌های معنایی استفاده کنید.
Form و Validation
بخش مهم دیگر در زبان HTML فرم‌ها و اعتبارسنجی اولیه آن‌ها توسط خود HTML و پیش‌فرض مرورگر است.
Accessibility
بخش مهم دیگر این است که بخش‌های مختلف وب‌سایتی که نوشته می‌شود، دسترسی پذیری مناسبی داشته باشد.
SEO یا Search Engine Optimization
بحث مهم بعدی استفاده از کدهای استاندارد و تگ‌های مرتبط با SEO یا بهینه‌سازی موتورهای جستجو نظیر گوگل است.

یادگیری زبان CSS

گام مهم بعدی، یادگیری زبان CSS است که وظیفه استایل‌دهی و رنگ و لعاب دادن به کدهای خام HTML را دارد. اگر CSS نبود، همه سایت‌ها شمایلی مثل متن‌های داخل Notepad را داشتند و نه بیشتر.

آنچه باید در زبان CSS یاد بگیریم:

مبانی
فلکس‌باکس – راهنمای کامل آموزش Flexbox در CSS
گرید – راهنمای کامل آموزش Grid در CSS
tarnsition و animation
طراحی واکنش‌گرا یا ریسپانسیو
پیش‌پردازنده‌های CSS نظیر SASS
سی‌اس‌اس مدرن مثل Styled Components
فریم‌ورک‌های CSS نظیر Tailwind CSS و Bootstrap

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

اگر می‌خواهید با حداقل‌های مورد نیاز در زبان‌های برنامه‌نویسی فرانت‌اند سایت آشنا بشوید، دوره رایگان آموزش سریع و پروژه‌محور برنامه‌نویسی سایت ما را از دست ندهید:

آموزش سریع و پروژه‌محور برنامه‌نویسی سایت

یادگیری زبان برنامه‌نویسی JavaScript

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

یادگیری سینتکس (نحو و دستورات) پایه‌ای
دستکاری DOM یا همان Document Object Model
Fetch API و ارسال و دریافت غیرهم‌زمان اطلاعات از سرور
JSON فرمت مورد علاقه برنامه‌نویسان در تبادل اطلاعات
ES۶ یا ECMAScript 2015 که قابلیت‌های جدیدی به جاوااسکریپت اضافه کرد
یادگیری تایپ‌اسکریپت (این مرحله را می‌توانید بعدتر هم انجام بدهید.)

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

ابزارهای دیگر

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

مدیریت پکیج

هرچه پروژه وب‌سایت ما بزرگ و بزرگ‌تر می‌شود، به کتابخانه‌ها و اصطلاحاً پکیج‌های بیشتری احتیاج پیدا می‌کند که نصب، نگهداری و استفاده از آن‌ها در ابعاد بزرگ، واقعاً سخت خواهد شد. اینجا، جایی‌ست که Package Manager ها یا ابزارهای مدیریت بسته‌های نرم‌افزاری نظیر npm و yarn به کمک پروژه ما می‌آیند. قبل از شروع یادگیری کتابخانه ری‌اکت جاوااسکریپت، باید آشنایی اولیه‌ای با این ابزار (npm پیشنهاد می‌شود) داشته باشید.

ابزارهای ساخت

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

اجرا کننده وظیفه Task Runners

کار Task Runnerها اجرا کردن دستوراتی برای ساخت و دسته‌بندی فایل‌هاست.

فرمت‌کننده‌ها Prettier – Linter

کارشان مرتب‌کردن و تمیزکردن کد است و باعث استانداردسازی کد ما می‌شوند.

ماژول سازی Module Bandler

به کمک بسته‌بندها نظیر Webpack کدها و تصاویر و… دسته‌بندی می‌شوند.

یادگیری گیت (تکنولوژی Git و سرویس GitHub)

با این که این مرحله می‌تواند کمی پس و پیش شود اما حذف شدنی نیست! پس حتماً در برنامه خود یادگیری‌اش را بگنجانید.

این که گیت چیست و چه کار می‌کند نیاز به توضیح مفصلی دارد که در این مقاله نمی‌گنجد ولی به صورت خلاصه، وظیفه کنترل ورژن کد ما را دارد و می‌توان به وسیله Git نسخه‌های مختلف کد را مدیریت کرد. همچنین برای انجام کار گروهی (چه به صورت حضوری چه به صورت کار تیمی ریموت و دورکاری) کاربرد دارد.

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

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

ابزار توسعه مرورگر (Browser Dev Tools) که همان بخش inspect و سایر تب‌های دیگر پنجره مذکور در مرورگر است.
افزونه‌های ویرایشگر کد یا IDE نظیر VS Code که کدنویسی را برای ما آسان‌تر و سریع‌تر می‌کند.
ابزار Emmet که برای سرعت‌بخشی به کدنویسی HTML به کار می‌رود تا زمان اصلی را روی مسائل مهم‌تر بگذاریم و درگیر باز و بسته کردن تگ‌ها نشویم.
Axios که کتابخانه‌ای برای درخواست ‌(request)‌ به صورت غیرهم‌زمان Async است و به جای Ajax و fetch می‌توان از آن استفاده نمود.

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

حالا پس از پشت سر گذاشتن این مسیر نسبتا طولانی، زمان ورود به فریم‌ورک‌های جاوااسکریپت است. با این که React (ری‌اکت‌) کتابخانه است و خصوصیات فریم‌ورک را ندارد؛ اما در بنچ‌مارک‌ها جزو دسته‌بندی فریم‌ورک‌های جاوااسکریپت قرار می‌گیرد.

در این لیست فریم‌ورک‌های دیگر نظیر Vue و Angular هم به چشم می‌خورد که بهترین راه برای انتخاب فریم‌ورک جهت یادگیری، یک نگاه به سایت‌های کاریابی‌ست و این که ببینید با توجه به شرایط خودتان، کدام گزینه مناسب‌تر، پردرآمدتر است و خواهان بیشتری دارد.

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

مدیریت وضعیت یا state

وقتی پروژه کوچک باشد، مدیریت وضعیت یا state همه اجزای برنامه راحت است و نیاز به ساز و کار عجیبی ندارد. مثلاً می‌دانیم منوی کناری صفحه باز است یا بسته. یا این که اطلاعات یک جدول از سرور دریافت شده است یا باید برای دریافت مجدد آن اقدام کرد.

اما وقتی پروژه بزرگ می‌شود، نگه‌داری و مدیریت همه این وضعیت‌ها به شدت دشوار خواهد شد. برای این کار ابزار و کتابخانه‌های متنوعی ارائه شده است. مثلا برای React از Context API یا Redux می‌شود استفاده نمود و برای ویو از Vuex یا برای فریم‌ورک انگولار از Services. پس یادگیری هر یک از این‌ها با توجه به فریم‌ورک جاوااسکریپتی که کار می‌کنید، در گام بعدی و پروژه‌های حرفه‌ای ناگزیر است.

مهارت‌های تکمیلی

مهارت‌های تکمیلی این حوزه، بعد از فائق آمدن بر مراحل قبلی، عبارت‌اند از:

تکنولوژی Server Side Rendering (SSR) یا رندر شدن سمت سرور

می‌دانید که فریم‌ورک‌های جاوااسکریپت نظیر React و… همگی در سمت کلاینت (Client) یا همان مرورگر کاربر رندر (نمایش) می‌شوند و یک بار کدها از سرور دریافت شده و بر اساس نیاز کاربر، محتوای آن بروزرسانی می‌گردد. یعنی کد همه کامپوننت‌ها از قبل دانلود شده و با کلیک‌های کاربر، بازسازی و بازنمایی می‌شوند. هرچند اطلاعاتی نیز به صورت ایجکس و async یعنی غیرهم‌زمان از سرور دریافت و نمایش داده می‌شود. اما برخلاف فریم‌ورک‌هایی مثل Laravel و Django که هر صفحه به طور کامل از سمت سرور، رندر شده به کاربر می‌رسد، اگر بخواهیم این کار را در فریم‌ورک‌های فرانت‌اند انجام بدهیم باید از Nuxt.js برای ویو و Next.js برای ری‌اکت استفاده کنیم.

تکنولوژی سایت‌ساز‌های ایستا یا Static Site Generators

این تکنولوژی‌ها هم برای راحت‌تر کردن کار با فریم‌ورک‌ها و نیز ساخت سایت‌هایی که لزوماً بک‌اند خاصی هم ممکن است نداشته باشند، استفاده می‌شود. که از معروف‌ترین آن‌ها می‌توان به Gatsby و Next.js و Nuxt.js اشاره نمود.

ادامه راه بی‌نهایت...

در ادامه این راه که هیچ وقت یادگیری در آن متوقف نمی‌شود، می‌توانید سراغ Progressive Web Apps (PWA) یا همان «وب‌اپلیکیشن پیش‌رونده» و نیز یادگیری JAMstack (JavaScript API Markup Stack) بروید.