Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

Angular 18 – Zoneless Change Detection

Merhaba,

Geçmişten bu güne takip eden okuyucularım bilir… Bir zamanlar C# programlama dilinin her yeni sürümü için eşsiz bir heyecan duyuyordum. Artık bu heyecana Angular mimarisinin yetişemediğimiz evrimsel sürecindeki yenilikler de eklenmiş bulunmaktadır. Evet… Angular son dönemlerde(ki sürüm yerine dönem diyorum, çünkü kısa vadede hızlıca yeni sürümlerle geldiler) birçok yenilik ve iyileştirmelerle yol katetmiş vaziyette ve özellikle bunların birçoğunu kararlı hale getirerek bu hızlı gelişimin maliyeti olan şüpheleri de hızlı bir şekilde gölgede bırakmış bir duruş sergilemektedir. Velhasıl kelam, bu içeriğimizde Angular 18 sürümü ile gelmiş olan Zoneless Change Detection davranışına odaklanacak ve pratik olarak incelemelerde bulunacağız. O halde buyurun başlayalım…

Zoneless Change Detection

Angular mimarisinde, uygulama bazında veri değişikliklerini algılayıp, bu değişikliklere göre kullanıcı arayüzünü güncelleme işlemini etkin bir şekilde yönetebilmek için Zone.js kütüphanesinden istifade edilirdi. Tabi bu kütüphanenin getirdiği avantajların yanında bir nebze performans dezavantajı gibi durumlarda söz konusuydu. Angular geliştirici ekibi, son zamanlarda Zone.js’siz bir mimari üzerine odaklanmış vaziyettedirler ve son sürat çalışmalarını gerçekleştirmektedirler. İşte bu süreç neticesinde artık ‘Zoneless’ şeklinde ifade edilen ilk deneysel API’ler Angular 18 ile paylaşılmıştır.

Zoneless Change Detection’ı kullanmaya başlamak için öncelikle provideExperimentalZonelessChangeDetection metodunun aşağıdaki gibi uygulama provider’ına eklenmesi gerekmektedir;

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
};

Ardından angular.json üzerinden Zone.js polyfills kısmından da kaldırılmalıdır;Angular 18 - Zoneless Change DetectionBöylece artık uygulamamız Zone.js olmaksızın ayağa kaldırılacağı için daha küçük bir paket boyutuna sahip olacak ve bu da daha hızlı sayfa yükleme ve runtime’da ilk oluşturma(initial render) sağlayacaktır.

Bu yapılandırmadan sonra artık component’lerde zoneless kullanmanın en iyi yolu aşağıdaki gibi signal’lardan istifade etmektir;

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FormsModule],
  template: `
  <h1>Merhaba {{name()}}</h1>
  <button (click)="handleClick()">Zoneless</button>
  `
})
export class AppComponent {
  name = signal("");
  handleClick() {
    this.name.set("Gençay");
  }
}

Yukarıdaki kod bloğunu incelerseniz eğer zone.js’den birkaç farkla çalışan signal yapılanması görüyoruz. Normalde zone.js, uygulamanın state’i değiştiği an bunu tespit eder ve bu şekilde bir çalışma sergilerken, zoneless ise bu değişiklik kontrolünü signal ile daha az maliyetle gerçekleştirir. Bu yenilik, state değişiklikleri söz konusu olduğunda bu değişiklikleri yakalayabilmek için art arda birden çok kez kontrol edilmesi durumunun önüne geçmekte ve böylece ciddi maliyetten uygulamayı törpülemektedir. Yani bu avantajı örnek bazında izah edersek eğer, butona tıklandığında değişikliklerin tespiti yalnızca bir kez çalışan bir fonksiyonla yapılacaktır ve bu direkt DOM’a yansıtılacaktır.

Ayrıca zoneless davranışı esasında zone.js ile aynı scheduler’ı kullanmaktadır. Böylece, zone.js kütüphanesine bağlı uygulamalar için performans önemli ölçüde artırılmıştır. Bunun için de provideZoneChangeDetection metodunun aşağıdaki gibi uygulamaya provide edilmesi yeterlidir;

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
  ]
};

Neden Zoneless Change Detection Kullanmalıyız?

Zone.js, uygulama durumunun ne zaman güncellenmiş olabileceğine dair göstergeler olarak DOM event’lerini ve asenkron task’larını kullanır. Asenkron işlemler ne zaman tamamlanır zone.js uygulamaya haber verir. Uygulama da bu bildirim üzerine change detection mekanizmasını devreye sokar ve bu mekanizma da uygulama state’inde bir değişikliğin olup olmadığını kontrol ederek, component’lerin view’ini günceller. Ancak zone.js, uygulama state’inin gerçekten değişip değişmediğine dair herhangi bir bilgiye sahip değildir. Bu yüzden her asenkron işlem tamamlandığında change detection’ı tetikleyebilir ve bu da gereksiz yere sık sık çalışmasına ve doğal olarak yersiz bir maliyete sebebiyet verebilir. Ee bu da ister istemez performansı negatif etkileyebilir. İşte sırf bu duruma istinaden zoneless change detection kullanımına özen gösterilmelidir.

Evet, uygulama performansı açısından oldukça önem arz eden bu sürümünün en gözde yeniliği olan bu davranışı kullanırken hala başlangıç aşamasında olduğunu unutmamanız ve olası değişikliklere açık olmanız gerektiğini hatırlatarak içeriğimi burada noktalıyorum.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir