Zone.js ni nini na "zoneless" Angular inamaanisha nini?

Question

Accepted Answer

**Zone.js** ni maktaba ambayo Angular imetumia kwa kihistoria ili **kujua wakati wa kueneza discovery ya mabadiliko**. Inaboresha APIs ya asinkroni ya kivinjari ili Angular iweze kugundua otomatiki mwonekano wowote unaweza kubadilisha hali. **Zoneless** Angular inahesabu tegemezi hii, inategemea signals na arifa dhahiri badala yake.

## Zone.js inafanya nini

```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.
```

Hii ni "uchawi" nyuma ya updates otomatiki za Angular: unabadilisha mali baada ya jibu la HTTP au kubofya, na view hurudi — kwa sababu Zone.js ilijambia Angular kwamba tukio la asinkroni limemaliza.

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

## Matatizo ya 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
```

Kwa sababu Zone.js haiwezi kusema *kile* kibadilishaji, inatambulika kuwasha full change-detection pass kwenye matukio mengi — hatuwezi kwa apps kubwa.

## Zoneless Angular (signals-based)

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

Katika hali ya zoneless, Angular haitegemei APIs ya asinkroni zilizoboreshed. Badala yake, change detection imetambulika **kwa dhahiri** — haswa kwa **signals** (ambayo hujumbuiza Angular kwa usahihi wakati thamani yao inabadilika), pamoja na `async` pipe, matukio, na `markForCheck()`.

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

## Faida za kwenda 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)
```

## Kwa nini kinastahili kulipwa

Zone.js inaelezea "otomatiki" change detection ya Angular ya muda mrefu — na gharama yake (bundle size, broad/imprecise checking).

Hamishwa ya **zonless**, inakamatiana na **signals**, ni mabadiliko makubwa ya usanidi: inatenda updates kwa uzani na dhahiri, inapunguza bundle, na inaboressha performance.

Kuelewa beide — kwa nini Zone.js ilikuwepo na kile kinachobadilishwa — kinakuwa mwanzomwa muhimu kadri Angular inavyoelekezwa kuelekea signals-based, zonless siku zijazo kama chaguo-msingi.