Angular Signals اور Effects

Angular نے ری ایکٹیویٹی (reactivity) کو ہینڈل کرنے کے طریقے کو بدل دیا ہے۔ اب ہر چھوٹی تبدیلی کو ڈیٹیکٹ کرنے کے لیے آپ کو Zone.js کی ضرورت نہیں ہے۔ Signals Angular کو صرف UI کے ان مخصوص حصوں کو اپ ڈیٹ کرنے کی اجازت دیتے ہیں جو تبدیل ہوتے ہیں۔ یہ آپ کی ایپس کو تیز بناتا ہے اور zoneless mode کو ممکن بناتا ہے۔

Signals کیا ہیں؟

ایک signal ایک ری ایکٹیو ویلیو (reactive value) کے لیے ایک کنٹینر ہے۔ جب ویلیو تبدیل ہوتی ہے، تو Angular کو بالکل معلوم ہوتا ہے کہ ٹیمپلیٹ کے کن حصوں کو اپ ڈیٹ کرنا ہے۔

• signal(): ایک نیا signal تخلیق کرتا ہے۔ ویلیو کو تبدیل کرنے کے لیے .set() یا موجودہ ویلیو کی بنیاد پر اسے اپ ڈیٹ کرنے کے لیے .update() استعمال کریں۔
• computed(): ایک read-only signal تخلیق کرتا ہے۔ یہ اپنی ویلیو دوسرے signals سے حاصل کرتا ہے۔ Angular اسے صرف اس وقت کیلکولیٹ کرتا ہے جب آپ اسے پڑھتے ہیں اور نتیجے کو کیش (cache) کر لیتا ہے۔
• effect(): جب کوئی signal تبدیل ہوتا ہے تو کوڈ چلاتا ہے۔ اسے side effects جیسے کہ logging یا دستی DOM تبدیلیوں کے لیے استعمال کریں۔

Signals بمقابلہ RxJS کب استعمال کریں

آپ کو ان میں سے کسی ایک کا انتخاب کرنے کی ضرورت نہیں ہے۔ آپ کو مختلف کاموں کے لیے دونوں استعمال کرنے چاہئیں۔

Signals استعمال کریں:

• UI state کو برقرار رکھنے کے لیے۔
• Template rendering کو چلانے کے لیے۔
• @Input() اور @Output() کو تبدیل کرنے کے لیے۔
• Zoneless ایپس میں کام کرنے کے لیے۔

RxJS استعمال کریں:

• HTTP یا WebSockets جیسے async streams کو ہینڈل کرنے کے لیے۔
• پیچیدہ لاجک جیسے کہ debouncing یا streams کو سوئچ کرنے کے لیے۔
• ایونٹ کے متعدد تسلسل (sequences) کو یکجا کرنے کے لیے۔

آپ انہیں rxjs-interop کے ذریعے جوڑ سکتے ہیں:

• toSignal(): ایک Observable کو Signal میں تبدیل کرتا ہے۔
• toObservable(): ایک Signal کو Observable میں تبدیل کرتا ہے۔

نئی Decorator-Free APIs

Angular 17+ نے decorators کے بغیر ڈیٹا فلو کو ہینڈل کرنے کے نئے طریقے متعارف کروائے ہیں۔

• input(): پیرنٹ (parent) سے آنے والے ڈیٹا کے لیے ایک read-only signal۔
• model(): Two-way binding کے لیے ایک writable signal۔ یہ پرانے @Input() اور @Output() پیٹرن کی جگہ لیتا ہے۔
• output(): چائلڈ (child) سے پیرنٹ (parent) کو ایونٹس بھیجنے کا ایک طریقہ۔ یہ signal نہیں ہے، لیکن یہ آپ کے کوڈ کو سادہ بنا دیتا ہے۔

یہ React سے بہتر کیوں ہے

اگر آپ React جانتے ہیں، تو تصورات (concepts) ملتے جلتے ہیں لیکن عمل (execution) مختلف ہے۔

• Automatic Tracking: React میں، آپ کو ایک array میں dependencies کی فہرست دینی پڑتی ہے۔ Angular میں، سسٹم خود بخود ٹریک کرتا ہے کہ آپ کون سے signals استعمال کر رہے ہیں۔ آپ کوئی dependency بھول نہیں سکتے۔
• Precision Updates: React اکثر پورے components کو دوبارہ رینڈر (re-render) کرتا ہے۔ Angular signals صرف ان مخصوص DOM nodes کو اپ ڈیٹ کرتے ہیں جو اس ویلیو پر منحصر ہوتے ہیں۔
• No Stale Closures: جب آپ signals کو کال کرتے ہیں تو وہ ہمیشہ موجودہ (current) ویلیو فراہم کرتے ہیں۔

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