Menene Zone.js kuma menene ang "zoneless" Angular nufin?

Question

Accepted Answer

**Zone.js** shine laima da Angular ta yi amfani ta tun daw don sanin **lokacin da za ta yi sirir jiya-dokewa**. Tana buggawa browser async APIs sabda Angular ta iya gano akai duk takamaiman da zai iya canja ikon. **Zoneless** Angular tana kawar jigon wannan, kan sa watse mu ga alamomi da hannu-karuwa kadai.

## Abin da Zone.js yake yi

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

Za'a iya cewa gida shine "hira" a bayan an gyara Angular kaikaice: kana canza kadaici bayan amon HTTP ko buggewa, da hasiya sai ganin sashe ya kabaci — gida Zone.js ta gaya Angular cewa akamaiman yakamare.

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

## Rashin amfani na 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
```

Domin Zone.js ba ta iya cewa *abin da* ya baci, yana sa cikakken sirir jiya-dokewa ya taba abubuwa masu yawa — rashin dacewa da girma mai yawa.

## Zoneless Angular (tunani-dogowa)

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

A cikin yanayin zoneless, Angular ba ta dogara ga buggace async APIs. A maimakon haka, sirir jiya-dokewa yana taba **karuwa** — kusan karanta ta **alamomi** (wacar suna shawara Angular daidai lokacin da aka baci kimar), in da kashi `async` pipe, abubuwan, da `markForCheck()`.

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

## Amfani daga tafi 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)
```

## Me yake matukar

Zone.js ya bayyana "akamaiman" sirir jiya-dokewa Angular na dila — da kuma farashi (babbar maso-gida, gida-gida/sakaci damfe).

Samun kasua zuwa **zoneless**, shawar ga **alamomi**, ne babbar canja aiki: sai ya sa sabuntawa ta kasance masu taɗani da karuwa, yana rage babbar maso-gida, da kuma dagawa na aiki.

Sanin dukansu — saboda me Zone.js ke nan da me zai maye masa — shine ganin ma ya kamata a yi muhimmin da Zone.js ke nan aidare Angular ke tuno zuwa jiya-alamomi zoneless kamar ajiye ajiye.