Zone.js என்றால் என்ன மற்றும் "zoneless" Angular என்றால் என்ன?

Question

Accepted Answer

**Zone.js** என்பது ஒரு நூலகம் ஆகும், இது Angular கொண்டு **மாற்றம் கண்டறிதல் எப்போது இயக்க வேண்டும் என்பதை அறிய** பயன்படுத்தப்பட்டுள்ளது. இது உலாவி ஒத்திசைக்க முடியாத API களை செய்யத்திருத்துகிறது, இதன் மூலம் Angular ஸ்வয়ংचलিதமாக நிலையை மாற்ற முடியும் எந்த நிகழ்வையும் கண்டறிய முடியும். **Zonless** Angular இந்த சார்பை அகற்றுகிறது, சமிக்ஞைகள் மற்றும் வெளிப்படையான அறிவிப்புகளை நம்பியுள்ளது.

## 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 *என்ன* மாறியது என்பதைக் கூற முடியாது என்பதால், இது பல நிகழ்வுகளில் முழு மாற்றம் கண்டறிதல் பாஸை ஏற்படுத்துகிறது — பெரிய பயன்பாடுகளுக்கு திறனற்ற.

## Zonless Angular (சமிக்ஞை-அடிப்படையிலான)

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

Zonless பயன்முறையில், Angular செய்யப்பட்ட ஒத்திசைக்க முடியாத API களை நம்பியில்லை. அதற்கு பதிலாக, மாற்றம் கண்டறிதல் **வெளிப்படையாக** ஏற்படுத்தப்படுகிறது — முதலாவதாக **சமிக்ஞைகள்** (இது Angular க்கு அவற்றின் மதிப்பு மாறும் போது சரியாக அறிவிக்கிறது), மற்றும் `async` குழாய், நிகழ்வுகள் மற்றும் `markForCheck()`.

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

## Zonless க்கு செல்வதின் நன்மைகள்

```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 இன் நீண்டகால "ஸ்வய়ংசாலிক" மாற்றம் கண்டறிதலை விளக்குகிறது — மற்றும் அதன் செலவு (번들் அளவு, விரைவான/தவறான சரிபார்ப்பு).

**Zonless க்கு** இடம்பெயர்வது, **சமிக்ஞைகளால்** இயக்கப்படுவது, ஒரு பெரிய கட்டடக்கலைப் பாறை மாற்றம் ஆகும்: இது புதுப்பிப்புகளை நுணுக்கமான மற்றும் வெளிப்படையானதாக செய்கிறது,번들் சுருங்குகிறது, மற்றும் செயல்திறனை மேம்படுத்துகிறது.

முரட்டுத்தனம் — Zone.js ஏன் இருந்தது மற்றும் அதை எதை மாற்றுகிறது — புரிந்துகொள்வது, Angular சமிக்ஞை-அடிப்படையிலான, zonless ভবிஷ்யத்தை இயல்பாக நோக்கி செல்லும் போது பல்லுறுப்புக்கோவை முக்கியமாக உள்ளது.