Angular Signals आणि Effects

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 बदलते तेव्हा कोड रन करते. लॉगिंग (logging) किंवा मॅन्युअल DOM बदलांसारख्या side effects साठी याचा वापर करा.

Signals विरुद्ध RxJS कधी वापरावे?

तुम्हाला यापैकी एक निवडण्याची गरज नाही. वेगवेगळ्या कामांसाठी तुम्ही दोन्ही वापरले पाहिजेत.

Signals वापरा:

• UI state साठवण्यासाठी.
• टेम्पलेट रेंडरिंगसाठी.
• @Input() आणि @Output() बदलण्यासाठी.
• zoneless ॲप्समध्ये काम करण्यासाठी.

RxJS वापरा:

• HTTP किंवा WebSockets सारख्या async streams हाताळण्यासाठी.
• debouncing किंवा streams स्विच करणे यांसारख्या जटिल लॉजिकसाठी.
• अनेक इव्हेंट सिक्वेन्स एकत्र करण्यासाठी.

तुम्ही rxjs-interop वापरून त्यांना जोडू शकता:

• toSignal(): Observable चे Signal मध्ये रूपांतर करते.
• toObservable(): Signal चे Observable मध्ये रूपांतर करते.

नवीन Decorator-Free APIs

Angular 17+ मध्ये डेकोरेटर्स (decorators) न वापरता डेटा फ्लो हाताळण्याचे नवीन मार्ग सादर करण्यात आले आहेत.

• input(): पेरेंटकडून येणाऱ्या डेटासाठी एक read-only signal.
• model(): Two-way binding साठी एक writable signal. हे जुन्या @Input() आणि @Output() पॅटर्नची जागा घेते.
• output(): चाइल्डकडून पेरेंटला इव्हेंट्स पाठवण्याचा एक मार्ग. हे signal नाही, परंतु ते तुमचा कोड सोपा करते.

हे React पेक्षा चांगले का आहे?

जर तुम्हाला React माहित असेल, तर संकल्पना (concepts) सारख्याच आहेत पण अंमलबजावणी (execution) वेगळी आहे.

• Automatic Tracking: React मध्ये, तुम्हाला डिपेंडेंसीज (dependencies) एका array मध्ये लिहाव्या लागतात. Angular मध्ये, सिस्टिम तुम्ही कोणते signals वापरता हे आपोआप ट्रॅक करते. तुम्ही कोणतीही डिपेंडेंसी विसरू शकत नाही.
• Precision Updates: React अनेकदा संपूर्ण कंपोनंट्स पुन्हा रेंडर (re-render) करते. Angular signals फक्त त्या विशिष्ट DOM नोड्सना अपडेट करतात जे त्या व्हॅल्यूवर अवलंबून आहेत.
• No Stale Closures: जेव्हा तुम्ही signals कॉल करता, तेव्हा ते नेहमी सध्याची (current) व्हॅल्यू प्रदान करतात.

स्रोत: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn