Angular Signals and Effects

غيرت Angular طريقة تعاملها مع التفاعلية (reactivity). لم تعد بحاجة إلى Zone.js لاكتشاف كل تغيير صغير. تتيح الـ Signals لـ Angular تحديث أجزاء محددة فقط من واجهة المستخدم (UI) التي تتغير. هذا يجعل تطبيقاتك أسرع ويُمكّن وضع الـ zoneless.

What are Signals?

الـ signal عبارة عن حاوية لقيمة تفاعلية. عندما تتغير القيمة، تعرف Angular بالضبط أي أجزاء من القالب (template) يجب تحديثها.

  • signal(): تُنشئ signal جديداً. استخدم .set() لاستبدال قيمة أو .update() لتغيير قيمة بناءً على القيمة الحالية.
  • computed(): تُنشئ signal للقراءة فقط. وهي تشتق قيمتها من signals أخرى. تقوم Angular بحساب هذه القيمة فقط عند قراءتها وتخزن النتيجة مؤقتاً (cache).
  • effect(): تقوم بتشغيل كود عند تغير الـ signal. استخدم هذا للتأثيرات الجانبية (side effects) مثل تسجيل السجلات (logging) أو تغييرات DOM اليدوية.

When to use Signals vs RxJS

لست بحاجة للاختيار بينهما. يجب عليك استخدام كليهما لمهام مختلفة.

Use Signals for:

  • الاحتفاظ بحالة واجهة المستخدم (UI state).
  • التحكم في عملية عرض القوالب (template rendering).
  • استبدال @Input() و @Output().
  • العمل في تطبيقات الـ zoneless.

Use RxJS for:

  • التعامل مع التدفقات غير المتزامنة (async streams) مثل HTTP أو WebSockets.
  • المنطق المعقد مثل الـ debouncing أو تبديل التدفقات (switching streams).
  • دمج تسلسلات أحداث متعددة.

يمكنك الربط بينهما باستخدام rxjs-interop:

  • toSignal(): تحويل Observable إلى Signal.
  • toObservable(): تحويل Signal إلى Observable.

New Decorator-Free APIs

قدمت Angular 17+ طرقاً جديدة للتعامل مع تدفق البيانات دون استخدام الـ decorators.

  • input(): signal للقراءة فقط للبيانات القادمة من المكون الأب (parent).
  • model(): signal قابل للكتابة للربط ثنائي الاتجاه (two-way binding). وهي تحل محل نمط @Input() و @Output() القديم.
  • output(): طريقة لإرسال الأحداث من المكون الابن (child) إلى المكون الأب (parent). هي ليست signal، ولكنها تبسط الكود الخاص بك.

Why this is better than React

إذا كنت تعرف React، فإن المفاهيم متشابهة ولكن التنفيذ مختلف.

  • Automatic Tracking: في React، يجب عليك إدراج التبعيات (dependencies) في مصفوفة. في Angular، يتتبع النظام الـ signals التي تستخدمها تلقائياً. لا يمكنك نسيان أي تبعية.
  • Precision Updates: غالباً ما تقوم React بإعادة عرض المكونات بالكامل. أما Angular signals فتقوم بتحديث عقد DOM المحددة التي تعتمد على القيمة فقط.
  • No Stale Closures: توفر الـ Signals دائماً القيمة الحالية عند استدعائها.

Source: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn