Kas yra Zone.js ir ką reiškia "zoneless" Angular?

Question

Accepted Answer

**Zone.js** yra biblioteka, kurią Angular istoriškai naudojo tam, kad žinotų, **kada paleisti pokyčių aptikimą**. Jis pataisytas asinchroninius naršyklės API, todėl Angular gali automatiškai aptikti bet kurį įvykį, kuris gali pakeisti būseną. **Zoneless** Angular pašalina šią priklausomybę, pasikliaujant vietoj signalais ir aiškiais pranešimais.

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

Tai yra "magiška" Angular automatinių naujinimų pusė: keičiate savybę po HTTP atsakymo arba spustelėjimo ir rodinio tiesiog atnaujinama — nes Zone.js pasakė Angular, kad asinchroninis įvykis baigtas.

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

Dėl to, kad Zone.js negali pasakyti, *kas* pasikeitė, jis suaktyvina pilną pokyčių aptikimo praėjimą daugeliui įvykių — neefektyvu didelėms programoms.

## Zoneless Angular (signals-based)

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

Bereginėje režime Angular nesisiklauso iš pataisytų asinchroninių API. Vietoj to, pokyčių aptikimas suaktyvinama **aiškiai** — pirmiausia **signalų** (kurie praneša Angular tiksliai, kada jų reikšmė pasikeičia), pliusas `async` pipe, įvykiai ir `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)
```

## Kodėl tai svarbu

Zone.js paaiškina Angular ilgametinį "automatinį" pokyčių aptikimą — ir jo kainą (paketo dydį, plačią/netikslingą tikrinimą).

Persikėlimas į **zoneless**, sužadintas **signalų**, yra didelė architektūrinė permaina: ji daro naujinimus smulkiais ir aiškiais, sumažina paketą ir pagerina našumą.

Supratimas abiejų — kodėl Zone.js egzistavo ir kas jį keičia — vis labiau svarbus, nes Angular eina link signalų pagrindu grindžiamo, bereginės ateities kaip numatytos.