Angular Signals এবং Effects
Angular তার reactivity হ্যান্ডেল করার পদ্ধতি পরিবর্তন করেছে। প্রতিটি ছোট পরিবর্তন শনাক্ত করার জন্য এখন আর আপনার Zone.js-এর প্রয়োজন নেই। Signals Angular-কে শুধুমাত্র UI-এর সেই নির্দিষ্ট অংশগুলো আপডেট করতে সাহায্য করে যা পরিবর্তিত হয়। এটি আপনার অ্যাপগুলোকে আরও দ্রুত করে তোলে এবং zoneless mode ব্যবহারের সুবিধা দেয়।
Signals কী?
Signal হলো একটি reactive value-এর কন্টেইনার। যখন value পরিবর্তিত হয়, Angular ঠিক জানে টেমপ্লেটের কোন অংশগুলো আপডেট করতে হবে।
signal(): একটি নতুন signal তৈরি করে। একটি value প্রতিস্থাপন করতে.set()অথবা বর্তমান value-এর ওপর ভিত্তি করে পরিবর্তন করতে.update()ব্যবহার করুন।computed(): একটি read-only signal তৈরি করে। এটি অন্যান্য signal থেকে এর value গ্রহণ করে। Angular এটি শুধুমাত্র তখনই গণনা করে যখন আপনি এটি পড়েন এবং ফলাফলটি ক্যাশ (cache) করে রাখে।effect(): যখন একটি signal পরিবর্তিত হয় তখন এটি কোড রান করে। লগিং বা ম্যানুয়াল DOM পরিবর্তনের মতো side effects-এর জন্য এটি ব্যবহার করুন।
কখন Signals এবং কখন RxJS ব্যবহার করবেন
আপনাকে যেকোনো একটি বেছে নিতে হবে না। বিভিন্ন কাজের জন্য আপনার উভয়ই ব্যবহার করা উচিত।
Signals ব্যবহার করুন:
- UI state ধরে রাখার জন্য।
- Template rendering পরিচালনা করার জন্য।
@Input()এবং@Output()-এর বিকল্প হিসেবে।- Zoneless অ্যাপে কাজ করার জন্য।
RxJS ব্যবহার করুন:
- HTTP বা WebSockets-এর মতো async stream হ্যান্ডেল করার জন্য।
- Debouncing বা stream switching-এর মতো জটিল লজিকের জন্য।
- একাধিক event sequence একত্রিত করার জন্য।
আপনি rxjs-interop ব্যবহার করে এদের মধ্যে সংযোগ স্থাপন করতে পারেন:
toSignal(): একটি Observable-কে Signal-এ রূপান্তর করে।toObservable(): একটি Signal-কে Observable-এ রূপান্তর করে।
নতুন Decorator-Free API সমূহ
Angular 17+ ডেকোরেটর (decorator) ব্যবহার না করেই ডেটা ফ্লো হ্যান্ডেল করার নতুন পদ্ধতি প্রবর্তন করেছে।
input(): প্যারেন্ট থেকে আসা ডেটার জন্য একটি read-only signal।model(): Two-way binding-এর জন্য একটি writable signal। এটি পুরনো@Input()এবং@Output()প্যাটার্নকে প্রতিস্থাপন করে।output(): চাইল্ড থেকে প্যারেন্টে ইভেন্ট পাঠানোর একটি উপায়। এটি কোনো signal নয়, তবে এটি আপনার কোডকে সহজ করে তোলে।
কেন এটি React-এর চেয়ে উন্নত
আপনি যদি React জানেন, তবে ধারণাগুলো একই রকম হলেও এর কার্যপদ্ধতি ভিন্ন।
- Automatic Tracking: React-এ আপনাকে একটি array-তে dependencies তালিকাভুক্ত করতে হয়। Angular-এ সিস্টেম স্বয়ংক্রিয়ভাবে ট্র্যাক করে আপনি কোন signal ব্যবহার করছেন। ফলে আপনি কোনো dependency ভুলে যেতে পারেন না।
- Precision Updates: React প্রায়শই পুরো component পুনরায় রেন্ডার (re-render) করে। Angular signals শুধুমাত্র সেই নির্দিষ্ট DOM node-গুলো আপডেট করে যা ওই value-র ওপর নির্ভরশীল।
- No Stale Closures: Signal কল করার সময় এটি সবসময় বর্তমান (current) value প্রদান করে।
উৎস: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn