რა არის Zone.js და რას ნიშნავს "zoneless" Angular?

Question

Accepted Answer

**Zone.js** არის ბიბლიოთეკა, რომელსაც Angular ისტორიულად იყენებდა იმისთვის, რომ იცოდეს **როდის უნდა გაეშვა ცვლილებების დეტექცია**. ის კორპატებს ბრაუზერის ასინქრონული API-ებს ისე, რომ Angular ავტომატურად შეძლოს ნებისმიერი მოვლენის დეტექცია, რომელმაც შეიძლება მდგომარეობა შეცვალოს. **Zoneless** Angular ამოშლის ამ დამოკიდებულებას, ამის ნაცლად ეყრდნობა signals-ებს და ცალსახა შეტყობინებებს.

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

ეს არის Angular-ის ავტომატური განახლებების "ჯადოსნური" მხარე: თქვენ შეცვლით თვისებას HTTP-პასუხის ან დაწკაპუნების შემდეგ, და ხედი უბრალოდ ახლდება — რადგან Zone.js Angular-ს გამეორებული ასინქრონული მოვლენა დასრულდა.

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

ვინაიდან Zone.js არ შეძლია იმის თქმა, თუ *რა* შეიცვალა, ის ჩართავს სრულ ცვლილებების დეტექციის გამავალს მრავალ მოვლენაზე — დიდი აპლიკაციებისთვის არაეფექტური.

## Zoneless Angular (signals-based)

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

ზონამეურ რეჟიმში, Angular არ ეყრდნობა კორპატებულ ასინქრონულ API-ებს. ამის ნაცლად, ცვლილებების დეტექცია გააქტიურდება **ცალსახად** — ძირითადად **signals**-ების მიერ (რომელიც Angular-ს ზუსტად უწყობს მხარს მათი მნიშვნელობის შეცვლისას), პლუს `async` pipe, მოვლენები და `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)
```

## რატომ არის მნიშვნელოვანი

Zone.js ხსნის Angular-ის დიდხანსვე "ავტომატური" ცვლილებების დეტექციას — და მის ღირებულებას (bundle ზომა, ფართო/არაზუსტი შემოწმება).

**Zoneless**-ზე გადაღება, **signals**-ებით გამართული, მნიშვნელოვანი არქიტექტურული ცვლილებაა: ის განახლებებს წილი და ცალსახად აკეთებს, ამცირებს bundle-ს და აუმჯობესებს წარმადობას.

ორივის გაგება — რატომ არსებობდა Zone.js და რა ჯაჭვავენ მას — სულ უფრო მნიშვნელოვანი ხდება, როცა Angular signals-ზე დაფუძნებული, zoneless მომავალი მიმართულებით მოძრაობს როგორც ნაგულისხმেველი.