Zone.js म्हणजे काय आणि "zoneless" Angular चा अर्थ काय आहे?

Question

Accepted Answer

**Zone.js** एक लायब्ररी आहे जी Angular ने ऐतिहासिकदृष्ट्या **बदल शोधणे कधी चलवायचे हे जाणण्यासाठी** वापरली आहे. ते ब्राउজरचे असिंक्रोनस API पॅच करते जेणेकरून Angular कोणतीही घटना आपोआप शोधू शकते जी स्थिती बदलू शकते. **Zoneless** Angular हे अवलंबित्व काढून टाकते, त्याऐवजी सिग्नल आणि स्पष्ट सूचना वापरते.

## What Zone.js does

```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 प्रतिक्रिया किंवा क्लिकनंतर एक मालमत्ता बदलता आणि दृश्य फक्त अपडेट होते — कारण Zone.js ने Angular ला सांगितले की एक असिंक्रोनस घटना पूर्ण झाली.

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

## The downsides of 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 काय बदलले हे सांगू शकत नाही, ते अनेक घटनांवर संपूर्ण बदल-शोधन पास ट्रिगर करते — मोठ्या अॅप्सचे लिए अकार्यक्षम.

## Zoneless Angular (signals-based)

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

zoneless मोडमध्ये, Angular पॅच केलेल्या असिंक्रोनस API वर अवलंबून नाहीत. त्याऐवजी, बदल शोधणे **स्पष्टपणे** ट्रिगर होते — मुख्यत्वे **सिग्नलद्वारे** (जे Angular ला सूचित करते की त्यांचे मूल्य कधी बदलते), तसेच `async` पाइप, घटना, आणि `markForCheck()`.

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

## Benefits of going 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 च्या दीर्घकालीन "स्वयंचलित" बदल शोधण्याचे व्याख्या करते — आणि त्याची किंमत (बंडल आकार, विस्तृत/अपूर्ण तपासणी).

**Zoneless** मध्ये जाणे, **सिग्नलद्वारे** संचालित, एक मोठा आर्किटेक्चरल बदल आहे: हे अपडेट्स सूक्ष्म आणि स्पष्ट बनवते, बंडल सकेल करते, आणि कार्यक्षमता सुधारते.

दोन्ही समजणे — Zone.js का अस्तित्वात होते आणि त्याची जागा काय घेते — हे अधिकाधिक महत्वाचे होत आहे कारण Angular सिग्नल-आधारित, zoneless भविष्य डिफॉल्ट म्हणून दिशा देत आहे.