Zone.js کیا ہے اور "zoneless" Angular سے کیا مراد ہے؟

Question

Accepted Answer

**Zone.js** ایک library ہے جو Angular نے تاریخی طور پر **یہ جاننے کے لیے** استعمال کی ہے کہ **کب change detection چلانی ہے**۔ یہ browser کے async APIs کو patch کرتا ہے تاکہ Angular خودکار طور پر کسی بھی event کا پتہ لگا سکے جو state کو تبدیل کر سکتی ہے۔ **Zoneless** Angular اس dependency کو ہٹاتا ہے، بجائے اس کے signals اور explicit notifications پر انحصار کرتا ہے۔

## 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 کی "خودکار" updates کے پیچھے کا "جادو" ہے: آپ ایک property کو HTTP response یا click کے بعد تبدیل کرتے ہیں، اور view بس update ہو جاتا ہے — کیونکہ 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 یہ نہیں بتا سکتا کہ *کیا* تبدیل ہوا، یہ بہت سی events پر ایک مکمل change-detection pass trigger کرتا ہے — بڑی applications کے لیے غیر موثر۔

## Zoneless Angular (signals-based)

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

Zoneless mode میں، Angular patched async APIs پر منحصر نہیں ہے۔ بجائے اس کے، change detection **واضح طور پر** trigger ہوتی ہے — بنیادی طور پر **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** سے چلایا جانا، ایک بڑی architectural تبدیلی ہے: یہ updates کو fine-grained اور واضح بناتا ہے، bundle کو سکیڑتا ہے، اور کارکردگی کو بہتر بناتا ہے۔

دونوں کو سمجھنا — کہ Zone.js کیوں موجود تھا اور اس کی جگہ کیا لے رہا ہے — تیزی سے اہم ہو رہا ہے کیونکہ Angular ایک signals-based، zoneless future کی طرف بڑھ رہا ہے جو default کے طور پر ہے۔