Zone.js কি এবং "zoneless" Angular মানে কি?

Question

Accepted Answer

**Zone.js** একটি লাইব্রেরি যা Angular ঐতিহাসিকভাবে **কখন change detection চালাতে হবে** তা জানার জন্য ব্যবহার করেছে। এটি ব্রাউজার async API গুলিকে প্যাচ করে যাতে Angular স্বয়ংক্রিয়ভাবে যেকোনো ইভেন্ট সনাক্ত করতে পারে যা অবস্থা পরিবর্তন করতে পারে। **Zoneless** Angular এই নির্ভরতা সরিয়ে দেয়, এর পরিবর্তে signals এবং স্পষ্ট বিজ্ঞপ্তির উপর নির্ভর করে।

## Zone.js কি করে

```text
Zone.js monkey-patches async APIs: setTimeout, addEventListener, Promise,
XHR/fetch, etc. When any of them fires, Zone.js notifies Angular →
Angular runs change detection automatically.
```

এটি Angular এর স্বয়ংক্রিয় আপডেটের পিছনে "জাদু": আপনি একটি HTTP response বা click এর পরে একটি property পরিবর্তন করেন, এবং ভিউ শুধু আপডেট হয় — কারণ Zone.js Angular কে বলেছে যে একটি async event সম্পন্ন হয়েছে।

```ts
// you write this, and the view updates automatically — thanks to Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js triggers CD
```

## Zone.js এর নেতিবাচক দিক

```text
✗ Overhead — patches everything, and triggers CD broadly (checks the whole tree)
✗ ~100KB added to the bundle
✗ Imprecise — runs change detection even when nothing relevant changed
✗ Can be confusing with third-party code that runs outside Angular's zone
```

কারণ Zone.js বলতে পারে না *কি* পরিবর্তন হয়েছে, এটি অনেক ইভেন্টে একটি সম্পূর্ণ change-detection পাস ট্রিগার করে — বড় অ্যাপ্লিকেশনের জন্য অক্ষম।

## Zoneless Angular (signals-based)

```ts
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()], // no Zone.js
});
```

Zoneless মোডে, Angular প্যাচ করা async API গুলির উপর নির্ভর করে না। পরিবর্তে, change detection **স্পষ্টভাবে** ট্রিগার হয় — প্রাথমিকভাবে **signals** এর মাধ্যমে (যা Angular কে সঠিকভাবে জানায় যখন তাদের value পরিবর্তন হয়), সাথে `async` pipe, events, এবং `markForCheck()`।

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // the signal tells Angular what changed → fine-grained update
```

## Zoneless যাওয়ার সুবিধা

```text
✓ Smaller bundle (drop ~100KB Zone.js)
✓ Better performance — fine-grained, precise updates (only what depends on changed signals)
✓ Cleaner integration with non-Angular code
✓ Simpler debugging (no zone-related stack noise)
```

## এটি কেন গুরুত্বপূর্ণ

Zone.js Angular এর দীর্ঘস্থায়ী "স্বয়ংক্রিয়" change detection ব্যাখ্যা করে — এবং এর খরচ (bundle size, ব্যাপক/অনুমানমূলক checking)।

**Zoneless** এ চলে যাওয়া, **signals** দ্বারা চালিত, একটি প্রধান আর্কিটেকচারাল পরিবর্তন: এটি আপডেটগুলিকে fine-grained এবং স্পষ্ট করে তোলে, bundle সঙ্কুচিত করে, এবং পারফরম্যান্স উন্নত করে।

উভয়ই বোঝা — কেন Zone.js ছিল এবং কি এর জায়গা নেয় — ক্রমবর্ধমান গুরুত্বপূর্ণ হয়ে উঠছে কারণ Angular একটি signals-based, zoneless ভবিষ্যতের দিকে নির্দেশনা করছে যা ডিফল্ট হিসাবে।