16. Zoneless Nedir?

Angular deyince akla genelde component’ler, service’ler falan gelir ama içerde bir mimari var ki, senin haberin bile olmadan bütün uygulamanın kaderini etkiliyor:

Zone.js

Bu yazıda Zone.js nedir, ne iş yapar, neden Angular artık onsuz olmaya çalışıyor ve bu neye çare olabilir… hepsine tek tek gireceğiz.

Zone.js Nedir?

Kısaca:

Zone.js, JavaScript’teki async olayları izleyen bir kütüphanedir.

Yani sen setTimeout, fetch, Promise, addEventListener falan kullandığında, Angular’ın “bir şey oldu galiba” deyip yeniden UI güncellemesi yapmasını sağlar.

Örnek:

setTimeout(() => {
  this.sayac++;
}, 1000);

Burada sayac++ çalıştıktan sonra Angular otomatik olarak DOM’u günceller. Ama sen ona “sayac değişti” demedin ki?

İşte bunu Zone.js izliyor. Her async işlemi kendi “bölgesi” içine alıyor ve sonrasında Angular’a diyor ki:

Hocam biri bir şey yaptı, sen bir change detection çalıştır yine de.

Peki Angular’daki Yeri Ne?

Angular, yıllarca Zone.js üzerine kurulu bir otomatik değişiklik algılama (change detection) sistemi kullandı.

Bu şu demek:

• Her setTimeout click fetch input… tetiklenince Angular DOM’u tekrar tarar.

Avantaj:

Kafana göre async iş yap, Angular kendisi anlar.

Dezavantaj:

Aşırı fazla gereksiz render olur. DOM’u tekrar tekrar kontrol etmek ciddi performans yükü oluşturur.

Zoneless Ne Demek?

Zoneless = Zone.js kullanmadan çalışmak

Yani artık Angular:

• Otomatik olarak “her async işten sonra DOM güncellemesi yapayım” kafasından çıkıyor.
• Bunun yerine, sen söylersen güncellerim felsefesine geçiyor.

Bu değişim Angular Signals ile mümkün oldu. Signals, reaktif ve “ne zaman neyin değiştiğini açıkça bilen” bir sistemdir.

Signals + Zoneless = Kontrollü Performans

Zone.js olmadan çalışmak için bir mekanizma gerekiyordu. Signals bunu getirdi.

Nasıl?

Signal kullandığında veri değişimlerini manuel bildiriyorsun:

count.set(count() + 1);

Bu ifade hem veriyi değiştirir, hem de “bu veri değişti” sinyali verir. Angular da “heh tamam DOM’u güncelleyeyim” der.

Böylece Zone.js gibi bütün her şeyi izlemek yerine, sadece senin işaret ettiğin şeyleri takip eder.

Spagettiye Dönmeyelim mi?

Tabii ki bu sistemle şunu yapmıyoruz:

count++;
detectChanges();

Bu tam manuel olurdu ve Angular’ı jQuery’ye çevirirdi. Signal’ler zaten içsel olarak change detection yapar ama minimumda. İşin özü: kontrollü otomasyon.

Neden Zoneless?

Peki Ne Kaybederiz?

• Kolaylık: Eskiden hiçbir şey yapmadan DOM güncellenirdi.
• Geriye dönük uyumluluk: Tüm kodları signal’a geçirmek zaman alabilir.

Ne Zaman Zoneless Kullanmalı?

Zoneless Nasıl Aktif Edilir?

Angular 17+ ile gelen yeni provideZone: false opsiyonu:

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    provideRouter(routes),
    { provide: NgZone, useValue: 'noop' }
  ]
});

Ya da:

import { provideZoneChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [provideZoneChangeDetection('noop')]
});

Bu, Zone.js’yi pasif hale getirir. Artık her şey senin kontrolünde.

Signals’sız Zoneless Olmaz mı?

Zor. Çünkü veri değişimini Angular’a bildirmen gerekir. Eğer signals kullanmıyorsan, değişiklik sonrası şu işi sen yaparsın:

this.cdRef.detectChanges();

Ama bu yine manuel. Yani ya Signals’a geç, ya da sürekli CD tetikle.

Son

Zoneless Angular bir “ileriye dönüş” hareketidir. Eskiden her şey otomatikti, ama kontrolsüzdü. Şimdi ise geliştirici daha bilinçli davranıyor, neyin değiştiğini açıkça söylüyor.