Angular Signals மற்றும் Effects

Angular தனது reactivity கையாளுதலை மாற்றியுள்ளது. ஒவ்வொரு சிறிய மாற்றத்தையும் கண்டறிய இனி உங்களுக்கு Zone.js தேவையில்லை. Signals மூலம், UI-இல் மாறும் குறிப்பிட்ட பகுதிகளை மட்டும் Angular புதுப்பிக்க முடியும். இது உங்கள் செயலிகளை (apps) வேகமாக்குகிறது மற்றும் zoneless mode-ஐ சாத்தியமாக்குகிறது.

Signals என்றால் என்ன?

ஒரு signal என்பது ஒரு reactive மதிப்பிற்கான கொள்கலன் (container) ஆகும். மதிப்பு மாறும்போது, template-இன் எந்தப் பகுதிகளைப் புதுப்பிக்க வேண்டும் என்பதை Angular துல்லியமாகத் தெரிந்துகொள்ளும்.

• signal(): ஒரு புதிய signal-ஐ உருவாக்குகிறது. ஒரு மதிப்பை மாற்ற .set() அல்லது தற்போதைய மதிப்பின் அடிப்படையில் ஒரு மதிப்பை மாற்ற .update() ஆகியவற்றைப் பயன்படுத்தவும்.
• computed(): ஒரு read-only signal-ஐ உருவாக்குகிறது. இது மற்ற signals மூலம் தனது மதிப்பைத் பெறுகிறது. நீங்கள் இதை வாசிக்கும்போது மட்டுமே Angular இதை கணக்கிட்டு, அதன் முடிவைச் சேமித்து (cache) வைக்கும்.
• effect(): ஒரு signal மாறும்போது குறியீட்டை (code) இயக்கும். logging அல்லது manual DOM மாற்றங்கள் போன்ற side effects-களுக்கு இதைப் பயன்படுத்தவும்.

Signals மற்றும் RxJS: எப்போது எதைப் பயன்படுத்த வேண்டும்?

நீங்கள் இரண்டில் ஒன்றை மட்டும் தேர்ந்தெடுக்க வேண்டிய அவசியமில்லை. வெவ்வேறு பணிகளுக்காக இரண்டையும் பயன்படுத்த வேண்டும்.

Signals-ஐப் பயன்படுத்த:

• UI state-ஐத் தக்கவைக்க.
• template rendering-ஐ இயக்க.
• @Input() மற்றும் @Output() ஆகியவற்றிற்கு மாற்றாக.
• zoneless apps-களில் வேலை செய்ய.

RxJS-ஐப் பயன்படுத்த:

• HTTP அல்லது WebSockets போன்ற async streams-களைக் கையாள.
• debouncing அல்லது switching streams போன்ற சிக்கலான தர்க்கங்களுக்கு (complex logic).
• பல event sequences-களை இணைக்க.

rxjs-interop மூலம் இவற்றை இணைக்கலாம்:

• toSignal(): ஒரு Observable-ஐ Signal-ஆக மாற்றுகிறது.
• toObservable(): ஒரு Signal-ஐ Observable-ஆக மாற்றுகிறது.

புதிய Decorator-Free APIs

Angular 17+ பதிப்புகள், decorators பயன்படுத்தாமல் தரவு ஓட்டத்தை (data flow) கையாள புதிய வழிகளை அறிமுகப்படுத்தியுள்ளன.

• input(): ஒரு parent-லிருந்து வரும் தரவிற்கான read-only signal.
• model(): two-way binding-க்கான ஒரு writable signal. இது பழைய @Input() மற்றும் @Output() முறையை மாற்றுகிறது.
• output(): ஒரு child-லிருந்து parent-க்கு events-களை அனுப்பும் வழி. இது ஒரு signal அல்ல, ஆனால் இது உங்கள் குறியீட்டை எளிமையாக்குகிறது.

இது ஏன் React-ஐ விட சிறந்தது?

உங்களுக்கு React தெரிந்தால், இதன் கருத்துக்கள் (concepts) கிட்டத்தட்ட ஒரே மாதிரியாக இருக்கும், ஆனால் செயல்படும் விதம் மாறுபடும்.

• Automatic Tracking: React-இல், நீங்கள் dependencies-களை ஒரு array-இல் பட்டியலிட வேண்டும். Angular-இல், நீங்கள் எந்த signals-களைப் பயன்படுத்துகிறீர்கள் என்பதைத் தானாகவே கணினி கண்காணிக்கும். இதனால் நீங்கள் ஒரு dependency-ஐ மறக்க வாய்ப்பில்லை.
• Precision Updates: React பெரும்பாலும் முழு component-களையும் மீண்டும் render செய்யும். Angular signals, அந்த மதிப்பைச் சார்ந்திருக்கும் குறிப்பிட்ட DOM nodes-களை மட்டுமே புதுப்பிக்கும்.
• No Stale Closures: Signals-ஐ நீங்கள் அழைக்கும்போது, அவை எப்போதும் தற்போதைய மதிப்பையே வழங்கும்.

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