X'inhu Zone.js u x'inhu jfisser ta' "zoneless" Angular?

Question

Accepted Answer

**Zone.js** hija librerija li Angular użat storikament biex taf **meta ċċaqlaq it-tiftix tal-bidliet**. Hija tappoġġa l-APIs asinkrini tal-browser sabiex Angular tista' tiskopri awotomatikament kwalunkwe avveniment li jista' jbiddel l-istat. **Zoneless** Angular tneħħi din id-dipendenza, minflok tiddependi fuq sinjali u notifiki esplicit.

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

Din hija l-"magija" wara l-aġjornamenti awtomatiki ta' Angular: inti tbiddel proprjetà wara rispons HTTP jew klik, u l-vista sempliċiment taġġornexxi — minħabba li Zone.js qalet lil Angular li avveniment asinkrini ikkompla.

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

Minħabba li Zone.js ma tistax tgħid *x'inhu* bidel, hija ttriggja pass ta' detezzjoni ta' bidliet sħiħ fuq ħafna avvenimenti — ineffiċjenti għal apps kbir.

## Zoneless Angular (signals-based)

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

F'modalità zoneless, Angular ma tiddipendix fuq APIs asinkrini appoġġati. Minflok, it-tiftix tal-bidliet huwa ttriggja **espliċitament** — primarjament minn **sinjali** (li jinnotifikaw lil Angular preċiż meta l-valur tagħhom jinbidlu), flimkien mal-pipe `async`, avvenimenti, u `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)
```

## Għaliex hija importanti

Zone.js tispjega t-tiftix tal-bidliet "awtomatiku" ta' Angular fuq żmien — u l-ispiża tiegħu (daqs tal-bundel, verifikazzjoni wiesgħa/imprecisa).

Il-movimento lejn **zoneless**, impoggit minn **sinjali**, hija bidla architettunika kbira: tagħmel aġjornamenti fin-grained u espliċiti, inaqqas il-bundel, u ittejeb il-prestazzjoni.

Fhim it-tnejn — għaliex Zone.js kienet eżistenti u x'sostitwixxiha — huwa increasingly importanti bħall-Angular jissuq lejn futur zoneless u bbażat fuq sinjali bħala default.