Τι είναι Zone.js και τι σημαίνει "zoneless" Angular;

Question

Accepted Answer

**Zone.js** είναι μια βιβλιοθήκη που το Angular χρησιμοποίησε ιστορικά για να γνωρίζει **πότε να εκτελεί ανίχνευση αλλαγών**. Εφαρμόζει patches σε ασύγχρονα API του προγράμματος περιήγησης, ώστε το Angular να μπορεί αυτόματα να ανιχνεύσει οποιοδήποτε γεγονός που ενδέχεται να αλλάξει την κατάσταση. **Zoneless** Angular αφαιρεί αυτή την εξάρτηση, βασιζόμενο αντί αυτού σε signals και ρητές ειδοποιήσεις.

## Τι κάνει το 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.
```

Αυτό είναι το "μαγικό" πίσω από τις αυτόματες ενημερώσεις του Angular: αλλάζετε μια ιδιότητα μετά από μια απάντηση HTTP ή ένα κλικ, και η προβολή απλώς ενημερώνεται — επειδή το Zone.js ενημέρωσε το Angular ότι ένα ασύγχρονο γεγονός ολοκληρώθηκε.

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

## Τα μειονεκτήματα του 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
```

Επειδή το Zone.js δεν μπορεί να πει *τι* άλλαξε, ενεργοποιεί μια πλήρη διαδρομή ανίχνευσης αλλαγών σε πολλά γεγονότα — αναποτελεσματικό για μεγάλες εφαρμογές.

## Zoneless Angular (signals-based)

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

Σε λειτουργία zoneless, το Angular δεν βασίζεται σε ασύγχρονα API που έχουν εφαρμοστεί. Αντίθετα, η ανίχνευση αλλαγών ενεργοποιείται **ρητά** — κυρίως μέσω **signals** (που ενημερώνουν ακριβώς το Angular όταν αλλάζει η τιμή τους), συν `async` pipe, events και `markForCheck()`.

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

## Πλεονεκτήματα της μετάβασης σε 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)
```

## Γιατί είναι σημαντικό

Το Zone.js εξηγεί την παλαιάς ημερομηνίας "αυτόματη" ανίχνευση αλλαγών του Angular — και το κόστος της (μέγεθος bundle, ευρύ/ανακριβή έλεγχο).

Η μετάβαση σε **zoneless**, που κινείται από **signals**, είναι μια σημαντική αλλαγή αρχιτεκτονικής: κάνει τις ενημερώσεις λεπτοδύναμες και ρητές, μειώνει το μέγεθος του bundle και βελτιώνει την απόδοση.

Η κατανόηση και των δύο — γιατί υπήρχε το Zone.js και τι το αντικαθιστά — γίνεται ολοένα και πιο σημαντική καθώς το Angular κατευθύνεται προς ένα signals-based, zoneless μέλλον ως προεπιλογή.