آپارات در حال حاضر دومین سایت پر ترافیک ایران بعد از گوگله و الان در حال پوشیدن لباس جدیدشه و اینبار تیم ری‌اکت صباایده این لباس رو براش دوختن. من محمد حسن پورقناد به عنوان یک عضو خیلی کوچک از این تیم، میخوام تو این نوشته در مورد لباس جدید آپارات توضیح بدم.
اگه سایت آپارات رو یک انسان در نظر بگیریم، کار ما اینه که برای این انسان یک لباسی بدوزیم که اندازه اش باشه، بشه سریع پوشیدش و ظاهر زیبایی داشته باشه. لباس جدید آپارات با React و Typescript و Redux-saga و Styled-components و چیزهای دیگه دوخته شده. لباس جدید آپارات الان از طریق این لینک قابل دیدنه ولی خیلی تازه است و هنوز کامل دوخته نشده :))
یک بخش خیلی کوچک از این لباس لودینگ و نحوه لود شدن صفحات سایته. هربار که مثلا یک ریکوئست از صفحه ویدیو در آپارات به سرور ارسال میشه در بالای صفحه یک لودینگ رد میشه که ما اسمش رو گذاشتیم ProgressBar.
درواقع یک کامپوننت خیلی ساده است که با React نوشته شده. این لودینگ طبیعتا نیاز داره که در یک نقطه‌ای شروع کنه و در یک نقطه‌ای تموم بشه. یکم بیشتر در مورد لودینگ ها توضیح بدم. مثلا وقتی یک بازی میخواییم روی کامپیوتر نصب کنیم وقتی که شروع میکنه به نصب کردن یک نوار سبز به ما نشون میده و میگه که مثلا تا الان 10درصد بازی نصب شده. ولی اینو از کجا میفهمه؟ لحظه‌ای که شما شروع به نصب اون بازی می‌کنید زمان دقیقش یا همون unix timestamp رو از شما میگیره. پس یعنی لحظه دقیقی که شما شروع به این کار کردید رو میدونه. برای اینکه بتونه اون لودینگ رو دقیق به شما نشون بده نیاز داره که لحظه دقیق تموم شدن اون کار رو هم بدونه ولی "لحظه دقیق تموم شدن اون کار" خیلی وقت‌ها مشخص نیست. پس نیازه که یک سری معیارها در نظر گرفته بشه که "لحظه دقیق تموم شدن اون کار" به دست بیاد. مثلا برای همون بازی کامپیوتری سازنده بازی میدونه که حجم دقیق فایل‌هایی که میخواد روی کامپیوتر شما کپی کنه چقدره. میدونه که رم و cpu و هارد کامپیوتر شما چیه و چندین معیار دیگه هم میتونه در نظر بگیره که "لحظه دقیق تموم شدن نصب برنامه" رو به دست بیاره.
لودینگ آپارات هم با همچین ذهنیتی نوشته شده. لحظه‌ای که مثلا یک ریکوئست از صفحه ویدیو آپارات به سرور ارسال میشه تا لحظه‌ای که صفحه کامل لود بشه طبیعتا یک مدت زمانی طول میکشه. آپارات شصت میلیون کاربر یکتا داره و به صورت میانگین یک صفحه ویدیو آپارات حدود دو ثانیه طول میکشه که لود بشه (First Contentful Paint)، پس ما یک انیمیشن دو ثانیه ای میخواییم که بتوینم هر جا خواستیم شروعش کنیم و هرجا خواستیم تمومش کنیم.
انیمیشن لودینگ که خیلی زیاد هست و مثلا اینجا کلی نمونه‌های مختلف هست. ما برای آپارات انیمیشن لودینگ مخصوص خودمون رو نوشتیم که خیلی ساده است و بالای سایت یک نوار قرمز رنگه که پر میشه. برای اینکه بخواییم هروقت خواستیم لودینگ رو شروع کنیم از document.dispatchEvent استفاده کردیم و برای اینکه بخواییم بفهمیم کی باید انیمیشن رو شروع کنیم از document.addEventListener استفاده کردیم. ریداکس هم تو پروژه بود و می‌شد با اون هم این کارو کرد ولی گفتم خب این خیلی راحتتره که، چرا این همه ریداکس و داستان هاش رو استفاده کنم برای همچین چیز ساده‌ای؟ :)) درواقع ما فقط نیاز داشتیم که بفهمیم دقیقا چه لحظه‌ای لودینگ باید شروع بشه و دقیقا چه لحظه‌ای باید تموم بشه. ریداکس برای این کار پیچیدگی های خاص خودش رو داشت. ما تقریبا بر اساس اصل YAGNI عمل کردیم و چیزی رو که نیاز نداشتیم استفاده نکردیم :))
کامپوننت ProgressBar قراره به زودی تو گیت‌هاب صباایده منتشر بشه و برای همه قابل دسترس باشه. احتمالا در آینده کامپوننت‌های بیشتری از آپارات به صورت اوپن‌سورس منتشر میشه و خیلی خوشحال میشیم اگه به کد ما نگاه کنید و خیلی بیشتر خوشحال میشیم اگه pull request برامون بفرستید.
