Apa itu Zone.js dan apa arti "zoneless" Angular?

Question

Accepted Answer

**Zone.js** adalah sebuah library yang secara historis digunakan Angular untuk mengetahui **kapan menjalankan deteksi perubahan**. Library ini menambal API asinkron browser sehingga Angular dapat secara otomatis mendeteksi setiap peristiwa yang mungkin mengubah state. **Zoneless** Angular menghilangkan ketergantungan ini, mengandalkan sinyal dan notifikasi eksplisit sebagai gantinya.

## Yang dilakukan 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.
```

Ini adalah "keajaiban" di balik pembaruan otomatis Angular: Anda mengubah properti setelah respons HTTP atau klik, dan tampilan hanya diperbarui — karena Zone.js memberitahu Angular bahwa peristiwa asinkron telah selesai.

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

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

Karena Zone.js tidak bisa mengatakan *apa yang* berubah, ini memicu lintasan deteksi perubahan lengkap pada banyak peristiwa — tidak efisien untuk aplikasi besar.

## Angular Zoneless (berbasis sinyal)

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

Dalam mode zoneless, Angular tidak mengandalkan API asinkron yang ditambal. Sebaliknya, deteksi perubahan dipicu **secara eksplisit** — terutama oleh **sinyal** (yang memberi tahu Angular dengan tepat saat nilainya berubah), ditambah pipa `async`, peristiwa, dan `markForCheck()`.

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

## Manfaat beralih ke 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)
```

## Mengapa ini penting

Zone.js menjelaskan deteksi perubahan "otomatis" Angular yang sudah lama — dan biayanya (ukuran bundle, pemeriksaan luas/tidak presisi).

Perubahan ke **zoneless**, didukung oleh **sinyal**, adalah pergeseran arsitektur besar: ini membuat pembaruan bersifat presisi dan eksplisit, mengecilkan bundle, dan meningkatkan kinerja.

Memahami keduanya — mengapa Zone.js ada dan apa yang menggantinya — semakin penting seiring Angular mengarahkan ke masa depan berbasis sinyal, zoneless sebagai standar.