Co je Zone.js a co znamená "zoneless" Angular?

Question

Accepted Answer

**Zone.js** je knihovna, kterou Angular historicky používá k **detectování, kdy spustit detekci změn**. Opravuje asynchronní API prohlížeče tak, aby Angular mohl automaticky detekovat jakoukoli událost, která by mohla změnit stav. **Zoneless** Angular odstraňuje tuto závislost a místo toho se spoléhá na signals a explicitní notifikace.

## Co dělá 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.
```

To je "kouzlo" za automatickými aktualizacemi Angular: změníte vlastnost po HTTP odpovědi nebo kliknutí a zobrazení se prostě aktualizuje — protože Zone.js řekla Angular, že se asynchronní událost dokončila.

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

## Nevýhody 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
```

Protože Zone.js nemůže říci *co* se změnilo, spouští úplný průchod detekce změn na mnoha událostech — neefektivní pro velké aplikace.

## Zoneless Angular (signals-based)

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

V režimu zoneless se Angular nespoléhá na opravená asynchronní API. Místo toho se detekce změn spouští **explicitně** — především prostřednictvím **signals** (které Angular přesně upozorní, když se jejich hodnota změní), plus `async` pipe, events a `markForCheck()`.

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

## Výhody přechodu na 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)
```

## Proč je to důležité

Zone.js vysvětluje dlouhodobou "automatickou" detekci změn Angular — a její cenu (velikost balíčku, širokého/nepřesného kontrolování).

Přechod na **zoneless**, poháněný **signals**, je zásadní architektonická změna: činí aktualizace granulární a explicitní, zmenšuje balíček a zlepšuje výkon.

Rozdělení obojího — proč Zone.js existovala a co ji nahrazuje — je stále důležitější, protože Angular se orientuje na signals-based, zoneless budoucnost jako výchozí.