Zone.js అంటే ఏమిటి మరియు "zoneless" Angular అంటే ఏమిటి?

Question

Accepted Answer

**Zone.js** అనేది Angular చారిత్రికంగా **ఎప్పుడు మార్పు గుర్తింపు చేయాలో తెలుసుకోవడానికి** ఉపయోగించిన లైబ్రరీ. ఇది బ్రౌజర్ అసింక్రోనస్ API‌లను ప్యాచ్ చేస్తుంది కాబట్టి Angular స్వయంచాలకంగా స్థితిని మార్చే ఏదైనా ఈవెంట్‌ను గుర్తించగలదు. **Zonless** Angular ఈ ఆధారపడటను తీసివేస్తుంది, బదులుగా సిగ్నల్‌లు మరియు స్పష్ట నోటిఫికేషన్‌ల ఆధారపడుతుంది.

## 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 ప్రతిక్రియ లేదా క్లిక్ తర్వాత సম్పత్తిని మారుస్తారు, మరియు వీక్ష్యం కేవలం అప్‌డేట్ చేయబడుతుంది — ఎందుకంటే 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
```

## 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 *ఏమి* మార్పు జరిగిందో చెప్పలేనందున, ఇది అనేక ఈవెంట్‌లలో పూర్తి మార్పు-గుర్తింపు పాసను ట్రిగర్ చేస్తుంది — పెద్ద అప్‌లికేషన్‌ల కోసం అసమర్థ.

## Zonless Angular (సిగ్నల్‌-ఆధారిత)

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

Zonless మోడ్‌లో, 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
```

## Zonless కి వెళ్లే లాభాలు

```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 యొక్క దీర్ఘకాలిక "స్వయంచాలక" మార్పు గుర్తింపును వివరిస్తుంది — మరియు దాని ఖర్చు (బండిల్ సైజ్, విస్తృత/అస్పష్ట చెక్కింग్).

**Zonless‌కి** కదలిక, **సిగ్నల్‌ల ద్వారా** పవర్‌ఆప్ చేయబడినది, ఒక ప్రధాన ఆర్కిటెక్చర్ మార్పు: ఇది అప్‌డేట్‌లను చిన్న-పరిమాణం మరియు స్పష్టంగా చేస్తుంది, బండిల్‌ను కుదిపుతుంది, మరియు పనితీరును మెరుగుపరుస్తుంది.

రెండూ అర్థం చేసుకోవడం — Zone.js ఎందుకు ఉనికిలో ఉంది మరియు ఏది దానిని భర్తీ చేస్తుంది — Angular సిగ్నల్‌-ఆధారిత, zonless భవిష్యత్తం కి డిఫాల్ట్‌గా స్టీర్ చేస్తున్నందున ఎక్కువ ముఖ్యమైనది.