سفر یک برنامه‌نویس وب؛ از ساختن یک خانه ساده تا شهری که انگار انتها ندارد!🏡

عکس اخر متن فراموش نشود 😁

یادم می‌آید اوایل مسیر یادگیری برنامه‌نویسی، وقتی برای اولین بار با دنیای توسعه وب آشنا شدم، همه‌چیز خیلی ساده و هیجان‌انگیز به نظر می‌رسید.

فکر می‌کردم قرار است چند زبان برنامه‌نویسی یاد بگیرم، کمی کدنویسی کنم و در نهایت بتوانم وب‌سایت‌های جذابی بسازم.

اما هرچه جلوتر رفتم، متوجه شدم داستان کمی پیچیده‌تر از چیزی است که در ابتدا تصور می‌کردم!

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

تصور کنید قرار است از صفر یک خانه بسازیم. 🏡

مرحله اول: HTML؛ ساختن اسکلت خانه

همه‌چیز از اینجا شروع می‌شود.

قبل از اینکه به رنگ دیوارها، پنجره‌های زیبا یا چراغ‌های خانه فکر کنیم، باید ساختار اصلی آن را بسازیم.

در دنیای وب، HTML دقیقاً همین کار را انجام می‌دهد.

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

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

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

با خودمان می‌گوییم:

«خب! بالاخره اولین وب‌سایتم رو ساختم! چه حس خوبی!» 😍

اما صبر کنید؛ هنوز اول راه هستیم!

مرحله دوم: CSS؛ وقتی خانه کم‌کم زیبا می‌شود

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

اینجاست که CSS وارد ماجرا می‌شود.

CSS به ما کمک می‌کند ظاهر وب‌سایتمان را طراحی کنیم.

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

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

ناگهان همان ساختار ساده قبلی تبدیل به یک خانه زیبا می‌شود!

اینجا معمولاً احساس می‌کنیم واقعاً داریم به یک توسعه‌دهنده وب تبدیل می‌شویم.

با خودمان می‌گوییم:

«وای! چقدر راحت می‌شه با کدنویسی چیزهای قشنگ ساخت!» ✨

البته هنوز یک مشکل وجود دارد...

خانه ما زیباست، اما چندان زنده نیست!

مرحله سوم: JavaScript؛ خانه‌ای که بالاخره جان می‌گیرد!

حالا وقت آن رسیده که خانه را از حالت ایستا خارج کنیم.

تصور کنید وارد خانه می‌شوید، اما هیچ چراغی روشن نمی‌شود، درها واکنشی نشان نمی‌دهند و هیچ‌چیزی تغییر نمی‌کند.

اینجاست که JavaScript وارد داستان می‌شود.

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

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

حالا خانه ما فقط زیبا نیست؛ چراغ‌هایش روشن می‌شوند، درهایش باز می‌شوند و می‌توانیم با بخش‌های مختلف آن تعامل داشته باشیم.

در این مرحله احتمالاً احساس می‌کنیم دیگر همه‌چیز را یاد گرفته‌ایم!

«HTML رو بلدم، CSS رو بلدم، JavaScript هم یاد گرفتم. دیگه چی می‌مونه؟» 😎

اما دنیای توسعه وب هنوز سورپرایزهای زیادی برایمان دارد!

مرحله چهارم: React؛ وقتی یک خانه را به یک محله بزرگ تبدیل می‌کنیم!

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

اما تصور کنید قرار است به‌جای یک خانه، یک محله بزرگ با ده‌ها یا صدها خانه بسازیم.

آیا منطقی است برای هر خانه تمام مراحل را از ابتدا تکرار کنیم؟

قطعاً نه!

اینجاست که React به کمک ما می‌آید.

React به ما کمک می‌کند رابط کاربری را به بخش‌های کوچک‌تر و قابل استفاده مجدد به نام Component تقسیم کنیم.

مثلاً یک دکمه، نوار جست‌وجو، کارت محصول، منوی سایت یا حتی کل بخش هدر می‌تواند یک کامپوننت مستقل باشد.

بعد می‌توانیم همان کامپوننت‌ها را در قسمت‌های مختلف پروژه دوباره استفاده کنیم.

علاوه بر این، با مفاهیمی مثل Props و State می‌توانیم اطلاعات را بین کامپوننت‌ها مدیریت کنیم و رابط کاربری پویا بسازیم.

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

اینجا احتمالاً با اعتمادبه‌نفس بیشتری می‌گوییم:

«خب، فکر کنم دیگه دارم توسعه وب رو می‌فهمم!» 😂

اما درست در همین لحظه، یک مرحله جدید از راه می‌رسد...:)))))))))))))))))))))

مرحله پنجم: Next.js؛ وقتی متوجه می‌شویم ساختن خانه فقط بخشی از ماجرا بوده! 😭

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

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

اینجا دیگر فقط ظاهر ساختمان‌ها یا نحوه تعامل آن‌ها مهم نیست.

باید به زیرساخت‌ها، مسیرهای ارتباطی، مدیریت منابع، امنیت، سرعت و نحوه دسترسی کاربران هم فکر کنیم.

Next.js دقیقاً در همین نقطه وارد مسیر یادگیری ما می‌شود.

Next.js یک فریم‌ورک مبتنی بر React است که امکانات و ابزارهای بیشتری برای ساخت اپلیکیشن‌های وب در اختیارمان قرار می‌دهد.

مفاهیمی مثل Routing، Server Components، Client Components، Rendering، Data Fetching، Route Handlers، بهینه‌سازی تصاویر و موارد دیگر وارد بازی می‌شوند.

حالا باید چیزهایی را یاد بگیریم که شاید در مراحل قبلی اصلاً به آن‌ها فکر نکرده بودیم!

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

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

«صبر کن... من که فکر می‌کردم برنامه‌نویسی وب رو یاد گرفتم! پس این همه چیز دیگه چیه؟!» 😂

و این داستان هنوز ادامه دارد...

نکته جالب اینجاست که حتی بعد از یادگیری HTML، CSS، JavaScript، React و Next.js هم مسیر تمام نمی‌شود.

بعد از آن ممکن است سراغ TypeScript برویم، با Node.js و Express وارد دنیای Backend شویم، پایگاه داده یاد بگیریم، با APIها کار کنیم، مفاهیم احراز هویت و امنیت را بشناسیم و در نهایت با ابزارهای مختلف پروژه‌هایمان را به مرحله انتشار برسانیم.

هر مرحله دریچه‌ای به یک دنیای جدید باز می‌کند.

گاهی این حجم از اطلاعات واقعاً هیجان‌انگیز است و گاهی هم می‌تواند کمی ترسناک باشد.

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

اما فکر می‌کنم یکی از مهم‌ترین درس‌هایی که در مسیر یادگیری برنامه‌نویسی می‌توانیم بگیریم این است:

قرار نیست همه‌چیز را یک‌باره یاد بگیریم.

قرار نیست با یادگیری یک فریم‌ورک، دیگر هیچ سؤال بی‌جوابی نداشته باشیم.

حتی توسعه‌دهندگان باتجربه هم هر روز با مسائل جدیدی روبه‌رو می‌شوند، مستندات می‌خوانند، چیزهای جدید یاد می‌گیرند و گاهی مجبور می‌شوند دوباره به سراغ مفاهیمی بروند که فکر می‌کردند کاملاً بلد هستند.

شاید زیبایی دنیای برنامه‌نویسی دقیقاً همین باشد؛ اینکه همیشه چیزی برای کشف کردن وجود دارد.

من هنوز در مسیر یادگیری هستم و هر بار که با یک مفهوم جدید روبه‌رو می‌شوم، بیشتر متوجه می‌شوم که این مسیر چقدر گسترده است.

اما شاید به‌جای اینکه از تمام چیزهایی که بلد نیستیم بترسیم، بهتر باشد از چیزهایی که تا امروز یاد گرفته‌ایم لذت ببریم و قدم‌به‌قدم جلو برویم. ❤️