Çfarë është Zone.js dhe çfarë nënkuptohet me "pa zona" Angular?

Question

Accepted Answer

**Zone.js** është një bibliotekë që Angular ka përdorur historikisht për të ditur **kur të ekzekutoj zbulimin e ndryshimeve**. Ai përmirëson API-et asinkrone të shfletuesit në mënyrë që Angular të zbulojë automatikisht çdo ngjarje që mund të ndryshojë gjendjen. **Pa zona** Angular heq këtë varësi, duke u mbështetur në sinjale dhe njoftime eksplicite në vend të kësaj.

## Çfarë bën 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.
```

Kjo është "magjia" pas përditësimeve automatike të Angular: ndryshon një pronë pas një përgjigje HTTP ose një klik, dhe pamja thjesht përditësohet — sepse Zone.js i tha Angular se një ngjarje asinkrone u përfundua.

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

## Disavantazhet e 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
```

Sepse Zone.js nuk mund ta thotë *çfarë* ndryshoi, ai aktivizon një kalim të plotë të zbulimit të ndryshimeve në shumë ngjarje — joefikase për aplikacione të mëdha.

## Angular pa zona (bazuar në sinjale)

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

Në modalitetin pa zona, Angular nuk mbështetet në API-et asinkrone të përmirësuara. Në vend të kësaj, zbulimi i ndryshimeve aktivizohet **në mënyrë eksplicite** — kryesisht nga **sinjalet** (të cilat i njoftojnë Angular saktësisht kur vlera e tyre ndryshon), plus tubacioni `async`, ngjarjet dhe `markForCheck()`.

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

## Përfitimet e largimit pa zona

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

## Pse është e rëndësishme

Zone.js shpjegon zbulimin "automatik" të ndryshimeve të Angularit të gjatë — dhe koston e tij (madhësia e paketës, kontrolli i gjerë/i pasaktë).

Zvendosja në **pa zona**, e fuqizuar nga **sinjalet**, është një ndryshim i madh arkitekturor: e bën përditësimet të imta dhe eksplicite, zvogëlon paketën dhe përmirëson performancën.

Kuptime i të dyjave — pse Zone.js ekzistonte dhe çfarë e zëvendëson — është gjithnjë e më e rëndësishme ndërsa Angular drejtohej drejt të ardhmes pa zona të bazuar në sinjale si parazgjedhja.

Çfarë bën Zone.js

Disavantazhet e Zone.js

Angular pa zona (bazuar në sinjale)

Përfitimet e largimit pa zona

Pse është e rëndësishme

question.related