Mi az a Zone.js és mit jelent a "zoneless" Angular?

Question

Accepted Answer

**Zone.js** egy kódtár, amelyet az Angular történelmileg használt ahhoz, hogy tudja, **mikor kell futtatnia a változásdetektálást**. Az böngésző aszinkron API-jait módosítja, hogy az Angular automatikusan érzékelni tudjon bármilyen olyan eseményt, amely megváltoztathatja az állapotot. **Zoneless** Angular eltávolítja ezt a függőséget, helyette a szignálokra és az explicit értesítésekre támaszkodva.

## Mit csinál a 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.
```

Ez az Angular automatikus frissítéseinek a "varázslata": megváltoztatunk egy tulajdonságot egy HTTP-válasz vagy egy kattintás után, és a nézet egyszerűen frissül — mert a Zone.js azt mondta az Angular-nak, hogy egy aszinkron esemény befejeződött.

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

## A Zone.js hátrányai

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

Mivel a Zone.js nem tudja megállapítani, hogy *mi* változott meg, számos eseménynél kiváltja az összes változásdetektálási lépést — nagy alkalmazások esetén hatékony.

## Zoneless Angular (szignál-alapú)

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

A zoneless módban az Angular nem a módosított aszinkron API-kra támaszkodik. Helyette a változásdetektálást **kifejezetten** kell aktiválni — főleg a **szignálok** által (amelyek értesítik az Angular-t, amikor az értékük megváltozik), valamint az `async` pipe, az események és a `markForCheck()` segítségével.

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

## A zoneless-re való átállás előnyei

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

## Miért számít ez

A Zone.js magyarázza az Angular hosszú ideje "automatikus" változásdetektálását — és annak költségét (csomagméret, széles/pontatlan ellenőrzés).

A **zoneless**-re való átállás, amelyet a **szignálok** hajtanak végre, egy nagy mérnöki váltás: az frissítéseket finom-csemegézővé és kifejezettekké teszi, csökkenti a csomagméretet, és javítja a teljesítményt.

mindkettő megértése — hogy miért létezett a Zone.js és mit vált fel helyére — egyre fontosabbá válik, mivel az Angular a szignál-alapú, zoneless jövő felé halad alapértelmezettként.