در اپ انگولار از Signal استفاده کنیم یا RxJS ؟

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

این مقاله مقایسه کاملی از کتابخانه های Signal (کتابخانه جدید) و RxJS (کتابخانه قدرتمند قدیمی) ارائه داده و کمک میکنه که توسعه دهنده انگولار بتونه تا با قدرت و تسلط بیشتری تصمیم بگیره که بین کتابخانه های Signal و RxJS کدوم رو انتخاب کنه.

در این مقاله چکیده نقاط ضعف و قدرت و موارد استفاده هر کتابخانه بررسی میشه.

کتابخانه RxJS

کتابخانه RxJS سالها سنگ بنای مدیریت جریان دیتا (data stream) در اپلیکیشن های انگولار بوده. این کتابخانه دیتاهای Asynchronous رو مدیریت میکنه.

یه نگاهی به نقاط قوت RxJS بندازیم:

• مجموعه ابزارهای کامل و متنوعی رو برای مدیریت جریان داده های پیچیده ارائه میده
• برای دیتاهای Asynchronous عالیه
• برای مدیریت event ها عالیه
• امکان کنسل کردن subscription داره

نقاط ضعف کتابخانه RxJS عبارتند از:

• نیاز به یادگیری زیاد و عمیق داره
• اگر subscription ها درست مدیریت نشوند، ممکنه باعث memory leak بشه
• برای سناریوهای ساده بیش از حد توانمنده

بهترین ابزاره برای:

• ریکوئست های http
• مدیریت event های پیچیده
• ترکیب کردن جریان های دیتا

کتابخانه Angular Signal

ابزار سیگنال در واقع یک wrapper هست دور یک مقدار (value) که تغییرات اون مقدار رو به اطلاع مصرف کننده ها (consumers) میرسونه. این ابزار هر نوع مقداری رو پشتیبانی میکنه ، از مقادیر primitive تا آبجکت های پیچیده.

نقاط قوت Angular Signal:

• سادگی در پیاده سازی و مدل سازی
• بازدهی عالی در دیتاهای Synchronous
• امکان ادغام با change detection سنتی انگولار
• کاهش پیچیدگی ها و مشکلات عجیب

نقاط ضعف Angular Signal:

• مجموعه امکانات کم نسبت به کتابخانه RxJS
• از پایه برای دیتاهای Synchronous طراحی شده
• جدیدتره و اکوسیستمش در حال توسعه است

بهترین ابزاره برای:

• مدیریت وضعیت دیتاهای در سطح کامپوننت
• کنترل دیتاهای جانبی یا نتایج محاسبات
• اپلیکیشن هایی که سرعت عمل بسیار بالایی نیاز دارند
• تولید کد ساده و خوانا بدون پیچیدگی خاصی

برای همین بهتره:

• از Angular Signal برای مدیریت دیتاهای سطح کامپوننت استفاده کنیم
• از RxJS برای مدیریت ریکوئست ها ، event ها و دیتاهای Asynchronous

امکانات toSignal و toObservable برای ادغام این دو ابزار قدرتمند

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

مثال زیر نمونه خوبیه:

شناسه کاربر (userId) یک دیتای سطح کامپوننته که تغییرش باعث ارسال ریکوئست به سرور و دریافت اطلاعات اون کاربر میشه. بنابر این مقدارش با یک سیگنال wrap میشه.

ابزار toSignal به ما امکان میده که مقدار خروجی یک Observable رو با یک سیگنال wrap کنیم. پس ما نتیجه ریکوئست دریافت اطلاعات کاربر رو در یک سیگنال بنام userSignal نگه میداریم.

در واقع اطلاعات کاربر به صورت یک متغیر در سطح کامپوننت نگه داشته میشه.

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

بنابر این با صدا کردن تابع updateUser و در صورت تغییر userId:

• مقدار userId در سطح کامپوننت تغییر میکنه.
• ریکوئست برای اطلاعات کاربر جدید ارسال میشه
• ننتیجه ش در یک signal بنام userSignal در سطح کامپوننت نگه داشته میشه
• با تغییر userSignal ، دیتای جانبی postCount در کامپوننت تغییر میکنه

نتیجه نهایی

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

مقاله های مرتبط:

آشنایی با انگولار سیگنال ، فیچر جذاب نسخه ۱۶

انواع Subject در RxJS

آشنایی با کتابخانه RxJS

امیدوارم از این مقاله لذت ببرید و براتون مفید باشه.

اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)

لینک اصلی مقاله

موفق باشید