Ce este Zone.js și ce înseamnă "zoneless" în Angular?

Question

Accepted Answer

**Zone.js** este o bibliotecă pe care Angular a folosit-o în mod istoric pentru a știi **când să execute detecția de schimbări**. Aceasta parchează API-urile async ale browserului, deci Angular poate detecta automat orice eveniment care ar putea schimba starea. **Zoneless** Angular elimină această dependență, bazându-se pe semnale și notificări explicite în schimb.

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

Acesta este "magic"-ul din spatele actualizărilor automate ale Angular: schimbi o proprietate după un răspuns HTTP sau un clic, și vizualizarea se actualizează pur și simplu — deoarece Zone.js i-a spus Angular că un eveniment async s-a completat.

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

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

Deoarece Zone.js nu poate spune *ce* s-a schimbat, declanșează o trecere completă de detecție a schimbărilor pentru multe evenimente — ineficient pentru aplicații mari.

## Angular zoneless (bazat pe semnale)

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

În modul zoneless, Angular nu se bazează pe API-urile async parchiate. În schimb, detecția schimbărilor este declanșată **explicit** — în primul rând prin **semnale** (care notifică Angular exact când valoarea lor se schimbă), plus pipe-ul `async`, evenimente și `markForCheck()`.

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

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

## De ce conteaza

Zone.js explică detecția automată de schimbări a Angular de lungă durată — și costul acesteia (dimensiunea bundle-ului, verificări largi/imprecise).

Mișcarea către **zoneless**, alimentată de **semnale**, este o schimbare arhitecturală majoră: face actualizările fine-grained și explicite, micșorează bundle-ul și îmbunătățește performanța.

Înțelegerea ambelor — de ce a existat Zone.js și ce o înlocuiește — devine din ce în ce mai importantă pe măsură ce Angular se îndreaptă către o viață zoneless bazată pe semnale ca implicită.