Angular Signals ಮತ್ತು Effects

Angular ತನ್ನ reactivity ನಿರ್ವಹಿಸುವ ವಿಧಾನವನ್ನು ಬದಲಾಯಿಸಿದೆ. ಪ್ರತಿಯೊಂದು ಸಣ್ಣ ಬದಲಾವಣೆಯನ್ನು ಪತ್ತೆಹಚ್ಚಲು ನೀವು ಇನ್ನು ಮುಂದೆ Zone.js ಅನ್ನು ಅವಲಂಬಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. Signals ಇವು UI ಯಲ್ಲಿ ಬದಲಾಗುವ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳನ್ನು ಮಾತ್ರ ಅಪ್‌ಡೇಟ್ ಮಾಡಲು Angular ಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ವೇಗವಾಗಿಸುತ್ತದೆ ಮತ್ತು 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 ಅನ್ನು ಹಿಡಿದಿಡಲು.
  • Template rendering ಅನ್ನು ನಿರ್ವಹಿಸಲು.
  • @Input() ಮತ್ತು @Output() ಅನ್ನು ಬದಲಾಯಿಸಲು.
  • Zoneless ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಲು.

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 ಬಳಸದೆ ಡೇಟಾ ಫ್ಲೋವನ್ನು ನಿರ್ವಹಿಸಲು ಹೊಸ ವಿಧಾನಗಳನ್ನು ಪರಿಚಯಿಸಿವೆ.

  • input(): ಪೇರೆಂಟ್ (parent) ಇಂದ ಬರುವ ಡೇಟಾಕ್ಕಾಗಿ ಒಂದು read-only signal.
  • model(): Two-way binding ಗಾಗಿ ಒಂದು writable signal. ಇದು ಹಳೆಯ @Input() ಮತ್ತು @Output() ಮಾದರಿಯನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.
  • output(): ಚೈಲ್ಡ್ (child) ಇಂದ ಪೇರೆಂಟ್ (parent) ಗೆ ಇವೆಂಟ್‌ಗಳನ್ನು ಕಳುಹಿಸುವ ವಿಧಾನ. ಇದು signal ಅಲ್ಲ, ಆದರೆ ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

ಇದು React ಗಿಂತ ಏಕೆ ಉತ್ತಮವಾಗಿದೆ?

ನಿಮಗೆ React ತಿಳಿದಿದ್ದರೆ, ಪರಿಕಲ್ಪನೆಗಳು (concepts) ಒಂದೇ ರೀತಿಯಲ್ಲಿರುತ್ತವೆ ಆದರೆ ಕಾರ್ಯಗತಗೊಳಿಸುವ ವಿಧಾನ (execution) ವಿಭಿನ್ನವಾಗಿರುತ್ತದೆ.

  • Automatic Tracking: React ನಲ್ಲಿ, ನೀವು dependencies ಅನ್ನು ಒಂದು array ನಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಬೇಕು. Angular ನಲ್ಲಿ, ನೀವು ಯಾವ signals ಬಳಸುತ್ತಿದ್ದೀರಿ ಎಂಬುದನ್ನು ಸಿಸ್ಟಮ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪತ್ತೆಹಚ್ಚುತ್ತದೆ. ನೀವು dependency ಅನ್ನು ಮರೆಯುವ ಸಾಧ್ಯತೆಯೇ ಇಲ್ಲ.
  • Precision Updates: React ಹೆಚ್ಚಾಗಿ ಇಡೀ components ಅನ್ನು re-render ಮಾಡುತ್ತದೆ. Angular signals ಕೇವಲ ಆ ಮೌಲ್ಯವನ್ನು ಅವಲಂಬಿಸಿರುವ ನಿರ್ದಿಷ್ಟ DOM nodes ಅನ್ನು ಮಾತ್ರ ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ.
  • No Stale Closures: ನೀವು signals ಅನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಅವು ಯಾವಾಗಲೂ ಪ್ರಸ್ತುತ ಮೌಲ್ಯವನ್ನು ನೀಡುತ್ತವೆ.

ಮೂಲ: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn