Apa iku Zone.js lan apa tegese "zoneless" Angular?

Question

IT Interview Practice · Accepted Answer

**Zone.js** yaiku perpustakaan sing Angular wis nggunakake sacara historikal kanggo ngerti **kapan nglakokake deteksi perubahan**. Iku ngepatch API asinkron browser saengga Angular bisa kanthi otomatis ndeteksi acara apa wae sing bisa ngedohake owah-owahan. **Zoneless** Angular ngilangi ketergantungan iki, ngandelake signals lan notifikasi eksplisit tinimbang.

## What Zone.js does

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

Iku "sihir" ing mburi pembaruan otomatis Angular: sampeyan owah-owah properti sawise respons HTTP utawa klik, lan pandangan mung dianyari — amarga Zone.js ngandhani Angular manawa acara asinkron wis rampung.

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

## The downsides of 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
```

Amarga Zone.js ora bisa ngatoake *apa* sing owah, iku nyakot jalaran deteksi perubahan lengkap ing akeh acara — ora efisien kanggo app gedhe.

## Zoneless Angular (signals-based)

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

Ing mode zoneless, Angular ora ngandelake API asinkron sing dipatch. Gununganing, deteksi perubahan ditrigger **kanthi eksplisit** — utamane dening **signals** (kang ngandhani Angular pas nalika nilaine owah), plus pipa `async`, acara, lan `markForCheck()`.

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

## Benefits of going 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)
```

## Kenapa iku penting

Zone.js njelasake deteksi perubahan "otomatis" Angular sing biasa — lan costnya (ukuran bundle, pamriksa sing wiyar/ora presisi).

Inggih menyang **zoneless**, dikuatake dening **signals**, yaiku owah-owahan arsitektur gedhe: iku nggawe pembaruan sing halus lan eksplisit, nyingkiri bundle, lan nambah kinerja.

Pahami loro-lorone — kenapa Zone.js ana lan apa sing ngganti — saya saya penting nalika Angular ngarahake menyang masa depan zoneless lan basis signals minangka baku.

What Zone.js does

The downsides of Zone.js

Zoneless Angular (signals-based)

Benefits of going zoneless

Kenapa iku penting

Pitakon sing gegandhengan