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

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

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

مطلب پیش‌رو بیشتر شبیه به یک چک لیست می‌باشد تا یک مقاله.

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

۱- زبان برنامه‌نویسی خود را بشناسید

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

بیشتر مردم زبان‌های برنامه‌نویسی را با زبان مادری خود اشتباه گرفته‌اند.

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

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

 این‌ها یادداشت‌های من هستند:

۱-Types:‌ بیاموزید که JS چگونه کد‌نویسی می‌شود و انواع مختلف دسترسی و استفاده از حافظه‌ و ذخیره داده‌ها را هم درک کنید و هم به حافظه بسپارید.  

۲-Scopes & Closures: اینکه متغیرها و تکه کد شما در یک تابع چگونه می‌تواند با سایر تکه کد‌های دیگر در محدوده خارجی و یا دامنه‌ای دیگر ارتباط برقرار کند.

۳- Hoisting: این عملگر در زبان جاوااسکریپت راه حل‌هایی به روشی منظم و بسیار منحصر به فرد را برای خواندن و اجرای کد‌تان ارائه می‌دهد، شما حتما باید این عملگر را بلد باشید.

۴-‌OOP  در ‌JS‌: چگونه JS طی سال‌های اخیر با ارائه راهکارهایی برای توانمندسازی مهندسان جهت استفاده از پارادایم معروف برنامه نویسی توسعه یافته است.

۵- :Async JS هدف شما به عنوان یک توسعه دهنده، ساخت برنامه های پویا، تک صفحه ای، ویا برنامه‌های real-time است، این را بدانید که شما باید تدریجاً یاد‌ بگیرید که چگونه کدی بنویسید که کاری را انجام دهد و بعد از منتظر ماندن به سراغ شروع کاری دیگر برود.

ابتدا توابع Callback  را پوشش‌دهید، سپس به سراغ بخش ‌Promiseها بروید، و با استفاده از راه حل‌های async-await از آن لذت ببرید و شاید هم با توابع ژنراتور بیشتر آشنا شوید‌، و همه‌ این عناوین را در گیرنده داده‌ها با درخواست های XHR ترکیب کنید‌، منتظر دریافت داده‌ها باشید و از آنها برای به روزرسانی محتوای HTML خود استفاده کنید و بر روی آن عملیات لازم انجام دهید.

6- توابع Array مرتبه بالاتر:  به جای استفاده از حلقه ها و استفاده از شرط های موجود آن برای هدف قرار‌دادن عناصر array، چرا از "map، find، filter، reduce" استفاده نکنیم، اینها همه عملکردهای مفیدی هستند که یک روز به عنوان یک توسعه دهنده JS ماهر هیچ وقت از آنها عبور نخواهید کرد.

7-چگونگی ارتباط js با مرورگر: استفاده از آبجکت‌های جهانی مانند پنجره، اسناد و چگونگی دسترسی به عناصر html و همچنینevents  و actionهایی که ایجاد می‌شود.

8-Object Destructuring و Spread Operator: بسیار می‌توانند مفید باشند، به خصوص زمانی که شما باید به بخشی از ساختار داده‌ای یا حالت عادی دسترسی داشته باشید و یا تغییر غیر‌مستقیم عملگرها.

۲- گیت، یک سیستم کنترل نسخه

همه ما با استفاده از سیستم های تحویل‌کد خوب و تثبیت شده، چندین محیط را کنترل می کنیم: تولید، مرحله‌ بندی و ...

بنابراین، شما واقعاً باید به دستورات (git checkout، checkout -b، git merge) و انواع دیگر دستورات گیت، اطمینان داشته باشید. ممکن است لازم باشد کاری را که انجام داده‌اید برگردانید، یک مورد دیگر را تنظیم کنید، و همچنین نیازی به سایر روشهای اصلی تعامل با همکارانتان برای افزودن ویژگی‌های فوق‌العاده به کد بیس‌تان نیست.

۳- به یک فریم‌ورک یا کتابخانه راضی نباشید

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

۴- در یادگیری مباحث Backend بخیل نباشید

با توجه به اینکه در API‌ها دیتای جمع‌آوری شده توسط کاربر در نتیجه به بک‌اند تحویل داده می‌شود، شما باید در مورد نحوه طراحی سیستم ارائه شده اطلاعاتی را کسب کنید، نه به صورت کامل و دقیق، بلکه فقط اطلاعاتی در مورد ERD یا "نمودارهای رابطه‌ای" و نحوه مدل‌ها و شکل‌گیری آن‌ها داشته باشید. برای نمونه، مثلا برای بک‌اند یک شبکه اجتماعی : رابطه پست‌ها و کامنت‌های کاربرانی که با یکدیگر صحبت می‌کنند با پایگاه داده را بشناسید. همچنین ساختار SQL را به طور اساسی بیاموزید. می‌توانید فقط عملیات CRUD را امتحان کنید، به اینصورت که "مدلی را که در یک جدول ایجاد کنید، در ادامه یک record اضافه کنید، آن را بخوانید، آپدیت‌اش کنید و در اخر حذف‌اش کنید". یادتان باشد که به جستجو همه این اصطلاحات بپردازید!

۵- به Module Bundler‌ها عادت کنید

Webpack، Parcel و سایر ابزارهایی که از اکوسیستم node و npm برای توسعه‌دادن و تقویت فریم‌ورک استفاده می‌شوند، با کاوش به روش درختی مسیر فایل‌های شما را ردیابی می‌کنند تا شما به index.js اصلی خود دسترسی پیدا کنید. همچنین دانستن این موضوع مهم است که چطور به آسانی فقط با استفاده از یک فایل html،   cssو یک تکه کد js، کد‌تان را به مجموعه‌ای کلاسیک از فایل‌های مورد نیاز تبدیل می‌کنید.

۶- ابزار کاری خود را شخصی‌سازی کنید

ویرایشگر متن و یا ترمینال‌تان باید به شما کمک کند تا بتوانید بر روند توسعه و همچنین شاخه‌های Git خود کنترل داشته باشید.

برای مثال: استفاده از پسوند Gitlens در VSCode به شما کمک می کند تا بدانید توسط چه کسی و چه زمانی کد تغییر کرده‌ است.

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

در آخر واقعا امیدوارم که نکات این مقاله برای شما مفید بوده باشد.

منبع