پروژه های اپن سورس جاوااسکریپت برای یادگیری

 تصویر پروژه های اپن سورس جاوااسکریپت که میتونید برای یادگیری ازشون استفاده کنید

فکر کنم بیل گیتس یه جمله داره که میگه “بهترین راه برای اینکه برنامه نویس شویم نوشتن کد و یادگرفتن از برنامه های بزرگی است که بقیه نوشتند” یا همچین چیزی. با نوشتن کد که آشنایی دارید ولی قسمت دوم یکم ترسناک به نظر میاد. “خواندن برنامه های بزرگی که بقیه نوشتن”. آیا منظورش اینه که بریم کل پروژه ری اکت رو بخونیم؟ نه. به نظر من حتی لازم نیست یه برنامه بزرگ باشه. بعضی وقتا با دیدن یه تابع کوچیک ممکنه یه جرقه تو ذهنتون ایجاد بشه و یه مبحث رو بهتر متوجه بشید.

این چیزی بود که حدود یک ماه پیش دنبالش بودم. خواندن کد های بقیه. البته امتحانات دانشگاه گند زد بهش (دلیل اینکه این مطلب رو یک ماه پیش نخوندید) ولی الان که از شرش خلاص شدم فرصت این رو دارم که دوباره برم سراغش.

بزرگ ترین سوالی که پیش میاد اینه که کد های بقیه رو از کجا پیدا کنیم؟‌ برای کسی مثل من که جایی کار نمیکنه و به پروژه های بزرگ دسترسی نداره تنها منبع گیتهاب هست. حالا چطور برنامه های خوب رو پیدا کنیم؟ این دلیلی هست که این مطلب رو دارم مینویسم. قراره یک سری پروژه بهتون معرفی کنم که تا حالا خودم یه نگاهی بهش انداختم و به نظر خوب و با کیفیت بوده. همه اونها با جاوااسکریپت یا تایپ اسکریپت نوشته شدند و بیشتر اونها مربوط به React.js و node.js هستند. و یکم هم در مورد این صحبت میکنم که چطور اونهارو بخونیم. اگه روش اشتباهی رو استفاده میکردم توی کامنت ها بهم بگید:)

clsx

  • ستاره های گیتهاب: ۲.۳ هزار
  • زبان: جاوااسکریپت

این کتابخانه یه ابزار کوچیک برای اینه که مقدار className رو به صورت شرطی ایجاد کنیم. className مربوط به React.js و هم ارز class توی html هست. این کتابخانه وابستگی خاصی به React.js هم نداره ولی خب چیزیه که خودشون نوشتن. اگر با کتابخانه emotion کار کرده باشید فکر کنم همچین چیزی داره ولی این نسخه کوچیک ترش هست.

چیزی که خیلی نظر من رو در مورد این کتابخانه جلب کرد این بود که کلا ۴۰ خط هست. فقط یه تابع. ولی این تابع به صورت بازگشتی نوشته شده و این چیزیه که به خاطرش باید به این کتابخانه نگاهی بیندازید. به شخصه هنوز با توابع بازگشتی مشکل دارم ولی خوندن این کتابخانه یکم درک بهتری بهم داد.

dogehouse

  • ستاره های گیتهاب: ۹.۲هزار
  • زبان: تایپ اسکریپت
  • فریمورک ها یا کتابخانه های اصلی فرانت اند: Next.js, tailwindcss, zustand, react query

این پروژه رو یوتیوبر محبوب من یعنی ben awad شروع کرده. dogehouse یه برنامه شبیه به کلاب هاوس هست که قرار بود جای اون رو بگیره ولی متاسفانه حدود یک ماه پیش متوقف شد چون همه شرکت های بزرگ یهو قابلیتی شبیه کلاب هاوس رو به برنامه هاشون اضافه کردند یا اینکه اعلام کردند که دارن روی همچین چیزی کار میکنند و در نتیجه این پروژه آینده ای نداشت.

به نظر من کد خیلی تر و تمیز و خوبی داره. شاید بیشترین وقتم رو صرف خوندن این پروژه کرده باشم و خیلی ازش یاد گرفتم. فرانت اند این پروژه با next.js نوشته شده. تا حالا به بک اندش نگاه نکردم چون با زبان Elixir نوشته شده که من بلد نیستم ولی اگر بلدید زمان رو از دست ندید.

spectrum

  • ستاره های گیتهاب: ۱۰ هزار
  • زبان: جاوا اسکریپت
  • فریمورک ها یا کتابخانه های اصلی فرانت اند: React.js, styled components
  • فریمورک ها یا کتابخانه های اصلی بک اند: express.js

این پروژه یه چیزی تو مایه های شبکه اجتماعی هست. ملت میتونن توش گروه بسازند و از این کارا. نکته جالب اینه که کل کد برنامه روی گیتهاب هست و این یعنی واقعی ترین مثالی که از یه برنامه واقعی میتونید پیدا کنید.

من بیشتر بک اندش رو خوندم که خیلی خیلی تمیز بود و نظرم رو جلب کرد. البته با یه دیتابیس عجیب که اسمش رو نشنیده بودم کار میکنن ولی مهم نیست. در ضمن چون یک شبکه اجتماعی هست امنیت توش جایگاه مهمی داره و خوندن این بخش های بک اند شاید براتون جالب باشه.

فرانت اند هم با React.js نوشته شده. زیاد باهاش ارتباط برقرار نکردم ولی اگر دنبال یه مثال برای styled components میگردید نمونه خوبیه.

Ghost

  • ستاره های گیتهاب: ۳۷.۹ هزار
  • زبان: جاوا اسکریپت
  • فریمورک ها یا کتابخانه های اصلی بک اند: express.js

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

این پروژه نسبت به بقیه چیز هایی که معرفی کردم خیلی بزرگتر هست و شاید خوندنش یکم سخت باشه. من فقط بک اندش رو خوندم که با express نوشته شده. خیلی باهاش ارتباط برقرار نکردم ولی به عنوان یه پروژه بزرگ خوندن کدش خالی از لطف نیست.


یک سری پروژه دیگه رو هم خوندم ولی به نظرم زیاد جالب نبودند و به جای اینکه چیزی بهتون یاد بده بیشتر گیجتون میکنه. ولی یک سری پروژه هست که قصد دارم در آینده بخونمشون و به نظرم خیلی جالب باشند.

پروژه هایی که قصد خوندنشون رو دارم

zustand

یک کتابخانه مدیریت state ری اکت که خیلی محبوبه و خیلی هم کوچیکه! یه ویدیو توی یوتیوب پیدا کردم که این پروژه رو میخوند. شاید خودم هم با همون فیلم شروع کردم.

دلیل اینکه این کتابخانه رو میخوام بخونم اینه که میخوام بدونم چطوری باید state رو مدیریت کرد. چطوری از ترکیب useState و useEffect و useRef و این چیزا باید استفاده کرد. میدونید که چی میگم. در نتیجه وقت هایی که نمیخوام از اینجور کتابخانه ها استفاده کنم میتونم بهتر state رو مدیریت کنم.

react-hot-toast

یه کتابخانه برای ساخت نوتیفیکیشن در ری اکت که خیلی از طراحی خوبش شنیدم. امیدوارم با خوندن این پروژه یکم درک بهتری از Portal ها توی ری اکت به دست بیارم چون اخیرا یکم باهاشون گلاویز شدم.

اگر چیز جدیدی یادم اومد بعدا اضافه میکنم:)

من چطور پروژه های گیتهاب رو میخونم

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

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

به نظرم مهم ترین چیز هایی که از خوندم چند پروژه بالا یاد گرفتم اینها هستند: ساختار پوشه ها، نحوه مدیریت ‌route ها توی api و نحوه مدیریت و تقسیم بندی کامپوننت ها توی ری اکت هست.

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

اول دنبال یه نقطه شروع بگردید. مثلا توی یه پروژه که با Next.js نوشته شده نقطه شروع فایل index.js توی پوشه pages هست. بلاخره هر فریمورکی یه نقطه شروع داره. اون رو پیدا کنید و از اونجا شروع کنید. از اونجا به بعد باید به شکل زیگزاگی برید جلو. مثلا اگر یه تابع رو دیدید که چند جا تکرار شده بود یه نگاه بهش بندازید ببینید چیکار میکنه. شاید توی اون تابع هم یه تابع مهم دیگه باشه. سر فرصت همش رو ببینید. هر کدوم که فکر میکنید چیزی برای یادگیری داره. ولی در نهایت برگردید به همون نقطه شروع و ادامش رو بخونید.

خیلی پیش میاد که شاهد چیز هایی هستید که تا حالا ندیدید. از اونها میتونید بگذرید. بیشتر روی بخش هایی تمرکز کنید که بلدید و خودتون رو با اون پروژه مقایسه کنید و ببینید که اون کار رو قبلا درست انجام میدادید یا نه.

بد نیست که بعضی وقتا یادداشت برداری کنید. مثلا اسم کتابخانه ای که توی اون پروژه استفاده شده و به نظرتون جالب هست رو یادداشت کنید. من خودم خیلی کتابخانه جالب پیدا کردم.

خوندن پروژه های بقیه یکی از بهترین کار هایی بود که تا حالا انجام دادم. امیدوارم تونسته باشم توی این راه کمکتون بکنم. اگر از این مطلب خوشتون اومد لایکش کنید تا بقیه راحت تر پیداش کنند.

  1. اولین نفری باشید که دیدگاه خود را ثبت می کند!
« 4 تا از کاربردی ترین مخازن گیت هاب برای برنامه نویسان
۵ ریپوزیتوری آموزشی گیتهاب برای همه توسعه دهندگان وب »