Zone.js nedir ve "zoneless" Angular ne anlama gelir?

Question

Accepted Answer

**Zone.js**, Angular'ın tarihsel olarak **değişiklik algılamayı ne zaman çalıştıracağını bilemek** için kullandığı bir kütüphanedir. Tarayıcının async API'lerini yamalı (patch) hale getirir, böylece Angular durumu değiştirebilecek herhangi bir olayı otomatik olarak algılayabilir. **Zoneless** Angular bu bağımlılığı kaldırarak bunun yerine sinyaller ve açık bildirimler üzerine güvenir.

## Zone.js ne yapar

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

Bu, Angular'ın otomatik güncellemelerinin arkasındaki "büyüdür": bir HTTP yanıtından veya tıklamadan sonra bir özelliği değiştirirsiniz ve görünüm otomatik olarak güncellenir — çünkü Zone.js Angular'a bir async olayın tamamlandığını söyledi.

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

## Zone.js'in dezavantajları

```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 *ne* değiştiğini söyleyemediği için birçok olayda tam bir değişiklik algılama geçişini tetikler — büyük uygulamalar için verimsizdir.

## Zoneless Angular (sinyal tabanlı)

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

Zoneless modunda Angular, yamalı async API'lere güvenmez. Bunun yerine, değişiklik algılama **açık olarak** tetiklenir — esas olarak **sinyaller** tarafından (bu da Angular'a değeri değiştiğinde tam olarak bildirir), artı `async` borusu, olaylar ve `markForCheck()`.

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

## Zonless'e gitmenin yararları

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

## Neden önemli

Zone.js, Angular'ın uzun süredir devam eden "otomatik" değişiklik algılamasını — ve bunun maliyetini (paket boyutu, geniş/kesin olmayan kontrol) açıklar.

**Zonless**'e geçiş, **sinyaller** tarafından desteklenen, büyük bir mimari değişimdir: güncellemeleri ince ve açık hale getirir, paketi küçültür ve performansı iyileştirir.

Her ikisini de anlamak — Zone.js'in neden var olduğu ve bunun yerine ne geçtiği — Angular varsayılan olarak sinyal tabanlı, zonless bir geleceğe doğru ilerlediğinden giderek daha önemli hale gelmektedir.