Angular Signals-ഉം Effects-ഉം

Angular അതിന്റെ reactivity കൈകാര്യം ചെയ്യുന്ന രീതിയിൽ മാറ്റം വരുത്തിയിരിക്കുന്നു. ഓരോ ചെറിയ മാറ്റവും കണ്ടെത്താൻ ഇനി നിങ്ങൾക്ക് Zone.js ആവശ്യമില്ല. UI-യിൽ മാറ്റം വരുന്ന ഭാഗങ്ങൾ മാത്രം അപ്‌ഡേറ്റ് ചെയ്യാൻ Signals Angular-നെ സഹായിക്കുന്നു. ഇത് നിങ്ങളുടെ ആപ്പുകൾ വേഗതയുള്ളതാക്കുകയും zoneless mode ഉപയോഗിക്കാൻ പ്രാപ്തമാക്കുകയും ചെയ്യുന്നു.

എന്താണ് Signals?

ഒരു reactive value-യ്ക്കായുള്ള ഒരു കണ്ടെയ്നറാണ് signal. ഒരു value മാറുമ്പോൾ, ടെംപ്ലേറ്റിന്റെ ഏത് ഭാഗങ്ങളാണ് അപ്‌ഡേറ്റ് ചെയ്യേണ്ടതെന്ന് Angular-ന് കൃത്യമായി അറിയാൻ സാധിക്കും.

  • signal(): ഒരു പുതിയ signal നിർമ്മിക്കുന്നു. ഒരു value മാറ്റാൻ .set() ഉപയോഗിക്കുക, അല്ലെങ്കിൽ നിലവിലുള്ള value അടിസ്ഥാനമാക്കി മാറ്റം വരുത്താൻ .update() ഉപയോഗിക്കുക.
  • computed(): ഒരു read-only signal നിർമ്മിക്കുന്നു. ഇത് മറ്റ് signals-ൽ നിന്ന് അതിന്റെ value കണ്ടെത്തുന്നു. നിങ്ങൾ ഇത് വായിക്കുമ്പോൾ മാത്രം Angular ഇത് കണക്കാക്കുകയും ഫലം cache ചെയ്യുകയും ചെയ്യുന്നു.
  • effect(): ഒരു signal മാറുമ്പോൾ കോഡ് പ്രവർത്തിപ്പിക്കുന്നു. Logging അല്ലെങ്കിൽ manual DOM മാറ്റങ്ങൾ പോലുള്ള side effects-കൾക്കായി ഇത് ഉപയോഗിക്കാം.

എപ്പോൾ Signals ഉപയോഗിക്കണം, എപ്പോൾ RxJS ഉപയോഗിക്കണം?

ഇതിൽ ഒന്ന് മാത്രം തിരഞ്ഞെടുക്കേണ്ടതില്ല. വ്യത്യസ്ത ജോലികൾക്കായി നിങ്ങൾക്ക് ഇവ രണ്ടും ഉപയോഗിക്കാം.

Signals ഉപയോഗിക്കേണ്ടത്:

  • UI state സൂക്ഷിക്കാൻ.
  • Template rendering നിയന്ത്രിക്കാൻ.
  • @Input(), @Output() എന്നിവയ്ക്ക് പകരമായി.
  • Zoneless ആപ്പുകളിൽ പ്രവർത്തിക്കാൻ.

RxJS ഉപയോഗിക്കേണ്ടത്:

  • HTTP അല്ലെങ്കിൽ WebSockets പോലുള്ള async streams കൈകാര്യം ചെയ്യാൻ.
  • Debouncing അല്ലെങ്കിൽ switching streams പോലുള്ള സങ്കീർണ്ണമായ ലോജിക്കുകൾക്കായി.
  • ഒന്നിലധികം event sequences സംയോജിപ്പിക്കാൻ.

rxjs-interop ഉപയോഗിച്ച് ഇവയെ തമ്മിൽ ബന്ധിപ്പിക്കാം:

  • toSignal(): ഒരു Observable-നെ ഒരു Signal-ആക്കി മാറ്റുന്നു.
  • toObservable(): ഒരു Signal-നെ ഒരു Observable-ആക്കി മാറ്റുന്നു.

പുതിയ Decorator-Free APIs

Decorators ഉപയോഗിക്കാതെ ഡാറ്റാ ഫ്ലോ കൈകാര്യം ചെയ്യുന്നതിനുള്ള പുതിയ രീതികൾ Angular 17+ അവതരിപ്പിച്ചു.

  • input(): ഒരു parent-ൽ നിന്ന് വരുന്ന ഡാറ്റയ്ക്കായുള്ള read-only signal.
  • model(): Two-way binding-നായുള്ള ഒരു writable signal. ഇത് പഴയ @Input(), @Output() രീതിക്ക് പകരമായി ഉപയോഗിക്കാം.
  • output(): ഒരു child-ൽ നിന്ന് parent-ലേക്ക് events അയക്കാനുള്ള മാർഗ്ഗം. ഇതൊരു signal അല്ല, പക്ഷേ ഇത് നിങ്ങളുടെ കോഡ് ലളിതമാക്കുന്നു.

എന്തുകൊണ്ട് ഇത് React-നേക്കാൾ മികച്ചതാണ്?

നിങ്ങൾക്ക് React അറിയാമെങ്കിൽ, ഇതിലെ ആശയങ്ങൾ സമാനമാണെങ്കിലും പ്രവർത്തനരീതി വ്യത്യസ്തമാണ്.

  • Automatic Tracking: React-ൽ, നിങ്ങൾ dependencies ഒരു array-യിൽ നൽകണം. എന്നാൽ Angular-ൽ, നിങ്ങൾ ഉപയോഗിക്കുന്ന signals ഏതാണെന്ന് സിസ്റ്റം സ്വയം ട്രാക്ക് ചെയ്യുന്നു. അതിനാൽ ഒരു dependency മറന്നുപോകാൻ കഴിയില്ല.
  • Precision Updates: React പലപ്പോഴും മുഴുവൻ component-ഉം വീണ്ടും render ചെയ്യുന്നു. എന്നാൽ Angular signals, ആ value-യെ ആശ്രയിച്ചിരിക്കുന്ന പ്രത്യേക DOM nodes മാത്രം അപ്‌ഡേറ്റ് ചെയ്യുന്നു.
  • No Stale Closures: Signals വിളിക്കുമ്പോൾ അവ എപ്പോഴും നിലവിലെ value നൽകുന്നു.

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