Czym jest Zone.js i co oznacza "zoneless" Angular?

Question

Accepted Answer

**Zone.js** to biblioteka, którą Angular historycznie wykorzystywał, aby wiedzieć **kiedy uruchomić detektowanie zmian**. Patch'uje asynchroniczne API przeglądarki, aby Angular mógł automatycznie wykrywać dowolne zdarzenie, które mogłoby zmienić stan. **Zoneless** Angular usuwa tę zależność, opierając się na sygnałach i jawnych powiadomieniach.

## Co robi 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 jest "magia" stojąca za automatycznymi aktualizacjami Angular'a: zmieniasz właściwość po odpowiedzi HTTP lub kliknięciu, a widok się po prostu aktualizuje — ponieważ Zone.js powiadomiło Angular'a, że zdarzenie asynchroniczne zostało ukończone.

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

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

Ponieważ Zone.js nie może powiedzieć *co* się zmieniło, wyzwala pełny przebieg detektowania zmian na wielu zdarzeniach — nieefektywne dla dużych aplikacji.

## Zoneless Angular (oparte na sygnałach)

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

W trybie zoneless Angular nie polega na łatanych asynchronicznych API. Zamiast tego, detektowanie zmian jest wyzwalane **jawnie** — przede wszystkim przez **sygnały** (które powiadamiają Angular'a dokładnie, kiedy ich wartość się zmienia), plus pipe `async`, zdarzenia i `markForCheck()`.

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

## Korzyści z przejścia 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)
```

## Dlaczego to ważne

Zone.js wyjaśnia automatyczne detektowanie zmian Angular'a od dawna — i jego koszt (rozmiar pakietu, szerokie/niedokładne sprawdzanie).

Przejście na **zoneless**, napędzane przez **sygnały**, to duża zmiana architektoniczna: sprawia, że aktualizacje są precyzyjne i jawne, zmniejsza rozmiar pakietu i poprawia wydajność.

Zrozumienie obu — dlaczego Zone.js istniał i co go zastępuje — staje się coraz bardziej ważne, ponieważ Angular zmierza w stronę przyszłości opartej na sygnałach i zoneless jako domyślnej.