Zone.js શું છે અને "zoneless" Angular નો અર્થ શું છે?

Question

Accepted Answer

**Zone.js** એક લાઇબ્રેરી છે જેનો Angular ઐતિહાસિક રીતે **કب change detection ચલાવવું તે જાણવા** માટે ઉપયોગ કર્યો છે. તે બ્રાઉઝર async APIs ને patch કરે છે જેથી 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 પ્રતિક્રિયા અથવા ક્લિક બાદ એક મિલકત બદલો, અને દૃશ્ય માત્ર અપડેટ થાય જાય છે — કારણ કે Zone.js એ Angular ને કહ્યું કે async ઇવેન્ટ પૂર્ણ થયો.

```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 pass ને ટ્રિગર કરે છે — મોટી apps માટે અક્ષમ.

## Zoneless Angular (signals-આધારિત)

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

Zoneless મોડમાં, Angular patched async APIs પર આધાર રાખતું નથી. તેના બદલે, change detection **સ્પષ્ટપણે** ટ્રિગર થાય છે — મુખ્યત્વે **signals** દ્વારા (જે Angular ને સતર્ક કરે છે જ્યારે તેમનું મૂલ્ય બદલાય છે), વધુમાં `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).

**Signals** દ્વારા સંચાલિત **zoneless** માં ગતિ એક મુખ્ય આર્કિટેક્ચરલ પરિવર્તન છે: તે અપડેટ્સને fine-grained અને સ્પષ્ટ બનાવે છે, bundle ને ઘટાવે છે, અને કામગીરી બढ़ાવે છે.

બંને સમજવું — શા માટે Zone.js અસ્તિત્વમાં હતું અને તેને શું બદલે છે — Angular signals-આધારિત, zoneless ભવિષ્ય તરફ જતું હોવાથી વધુ અને વધુ મહત્વપૂર્ણ બની રહ્યું છે તે ડિફોલ્ટ તરીકે.