ما هي Zone.js وماذا يعني "zoneless" Angular؟

Question

Accepted Answer

**Zone.js** هي مكتبة استخدمت Angular تاريخياً للتعرف على **متى يتم تشغيل كشف التغييرات**. تقوم بتصحيح واجهات برمجة التطبيقات غير المتزامنة في المتصفح بحيث يمكن لـ Angular اكتشاف أي حدث قد يغير الحالة تلقائياً. **Zoneless** Angular يزيل هذا الاعتماد، معتمداً على signals والإخطارات الصريحة بدلاً من ذلك.

## ما تفعله 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.
```

هذا هو "السحر" وراء تحديثات 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
```

## عيوب 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)

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

في وضع zoneless، لا تعتمد Angular على واجهات برمجة التطبيقات غير المتزامنة المصححة. بدلاً من ذلك، يتم تشغيل كشف التغييرات **بشكل صريح** — بشكل أساسي من خلال **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
```

## فوائد الذهاب بدون zone

```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 — وتكلفته (حجم الحزمة، الفحص الواسع/غير الدقيق).

الانتقال إلى **zoneless**، مدعوماً بـ **signals**، هو تحول معماري كبير: يجعل التحديثات دقيقة وصريحة، يقلل حجم الحزمة، ويحسن الأداء.

فهم كليهما — لماذا كانت Zone.js موجودة وما يحل محلها — أصبح مهماً بشكل متزايد حيث تتجه Angular نحو مستقبل signals-based و zoneless كافتراضي.