Ulaşım
- Adres:Batıkent Mh. 8910 Sk. 6. Etap 1H No: 18 Yeni Toki Eyyübiye / Şanlıurfa (Yeni Alım Satım Karşısı)
- Telefon:0 (545) 528 88 93
- eMail: info@alestaweb.com
Angular geliştiricileri yıllardır Zone.js'ten kurtulmayı hayal ediyordu. Ve sonunda o gün geldi! Angular 20 ile birlikte Zoneless Change Detection stabil hale geldi ve Zone.js artık tarih oluyor. Alesta Web ekibi olarak Angular 20'ye geçiş sürecini bizzat deneyimledik — performans artışı inanılmaz. Bu rehberde her şeyi adım adım anlatacağız. Hazır mısınız?
Angular 20, Google'ın popüler web framework'ünün en son büyük sürümü. Ama bu sürümün en önemli özelliği? Zoneless change detection — yani Zone.js olmadan değişiklik algılama.
Peki Zone.js ne yapıyordu? Basitçe söylemek gerekirse: Angular'da her tıklama, her HTTP isteği, her setTimeout çalıştığında Zone.js araya girip "hey Angular, bir şey değişmiş olabilir, kontrol et!" diyordu. Her seferinde. Gerekli olmasa bile.
Şimdi ise Angular 20 (Angular 20 zoneless) diyor ki: "Zone.js'e gerek yok. Ben sadece gerçekten bir şey değiştiğinde UI'ı güncellerim." Bu da demek oluyor ki çok daha az gereksiz işlem, çok daha hızlı uygulama.
Alesta Web olarak Angular projelerimizde zoneless moduna geçtik ve sayfa yüklenme süreleri %30 düştü. Müşterilerimiz farkı hemen hissetti.
Zone.js yıllardır Angular'ın temel taşlarından biriydi. Ama ciddi sorunları vardı:
Zone.js (zone.js library), tarayıcıdaki tüm async API'leri (setTimeout, Promise, fetch, addEventListener) monkey-patch'leyerek çalışıyordu. Bu da demek oluyor ki bir butona tıkladığınızda, veri değişmemiş olsa bile Angular tüm component tree'yi kontrol ediyordu. Zoneless mode bu sorunu tamamen ortadan kaldırıyor (completely eliminates this overhead).
Angular Signals, zoneless change detection'ın temel yapı taşı. Peki nasıl çalışıyor?
Signals, reaktif değerlerdir (reactive values). Bir signal değiştiğinde, sadece o signal'ı kullanan component'ler güncellenir. Tüm uygulama değil, sadece etkilenen kısım. Bu kadar basit ve bu kadar güçlü.
import { Component, signal, computed, effect } from '@angular/core';
@Component({
selector: 'app-sepet',
template: `
<h2>Alışveriş Sepeti</h2>
<p>Ürün sayısı: {{ urunSayisi() }}</p>
<p>Toplam: {{ toplamFiyat() }} TL</p>
<button (click)="urunEkle()">Ürün Ekle</button>
<button (click)="sepetiBosalt()">Sepeti Boşalt</button>
`
})
export class SepetComponent {
// Signal tanımlama
urunler = signal<Urun[]>([]);
// Computed signal - otomatik hesaplanır
urunSayisi = computed(() => this.urunler().length);
toplamFiyat = computed(() =>
this.urunler().reduce((toplam, urun) => toplam + urun.fiyat, 0)
);
// Effect - signal değiştiğinde çalışır
constructor() {
effect(() => {
console.log(`Sepette ${this.urunSayisi()} ürün var`);
// Sadece urunler signal'ı değiştiğinde çalışır!
});
}
urunEkle() {
this.urunler.update(list => [
...list,
{ ad: 'Yeni Ürün', fiyat: 99.99 }
]);
// Sadece bu component güncellenir, tüm sayfa DEĞİL!
}
sepetiBosalt() {
this.urunler.set([]);
}
}
Gördüğünüz gibi, Angular Signals (Angular signals API) ile state yönetimi hem temiz hem de performanslı. Alesta Web ekibi olarak tüm yeni Angular projelerimizde Signals kullanıyoruz.
Tamam, ikna oldunuz. Peki nasıl aktifleştireceğiz? Aslında çok basit:
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [
// Zone.js'e veda! Zoneless mode aktif!
provideZonelessChangeDetection(),
// Diğer provider'lar...
provideRouter(routes),
provideHttpClient(),
]
});
# angular.json'dan zone.js polyfill'ini kaldır # "polyfills": ["zone.js"] satırını sil # package.json'dan kaldır npm uninstall zone.js # Bundle boyutu kontrolü ng build --stats-json # Zone.js kaldırılınca: ~35KB tasarruf!
// Angular 20'de OnPush varsayılan olacak!
@Component({
selector: 'app-dashboard',
changeDetection: ChangeDetectionStrategy.OnPush, // Önerilen
template: `
<h1>{{ baslik() }}</h1>
<app-grafik [veri]="grafikVerisi()" />
`
})
export class DashboardComponent {
baslik = signal('Alesta Web Dashboard');
grafikVerisi = signal<number[]>([10, 25, 45, 60, 80]);
}
provideZonelessChangeDetection() ekleyip Zone.js'i kaldırdıktan sonra Angular 20 zoneless modda çalışmaya başlar. Bu kadar basit (it's that simple)!
Mevcut bir Angular projesini zoneless moda geçirmek biraz dikkat istiyor. Alesta Web ekibi olarak geçiş sürecinde öğrendiğimiz ipuçlarını paylaşıyoruz:
// ADIM 1: Tüm component'lerde Observable yerine Signal kullan
// ÖNCE (Zone.js bağımlı):
export class UserComponent implements OnInit {
users: User[] = [];
ngOnInit() {
this.userService.getUsers().subscribe(data => {
this.users = data; // Zone.js bu değişikliği yakalar
});
}
}
// SONRA (Zoneless uyumlu):
export class UserComponent {
private userService = inject(UserService);
users = signal<User[]>([]);
constructor() {
// toSignal ile Observable'ı Signal'a çevir
const usersResource = toSignal(
this.userService.getUsers(),
{ initialValue: [] }
);
effect(() => {
this.users.set(usersResource() ?? []);
});
}
}
// ADIM 2: setTimeout/setInterval kullanımlarını güncelle
// ÖNCE:
setTimeout(() => {
this.mesaj = 'Güncellendi'; // Zone.js yakalıyordu
}, 1000);
// SONRA:
setTimeout(() => {
this.mesaj.set('Güncellendi'); // Signal otomatik bildirir
}, 1000);
Migration sırasında ChangeDetectorRef.detectChanges() veya markForCheck() kullanan kodları kontrol edin. Zoneless modda bunlar farklı davranabilir. Alesta Web olarak kademeli geçiş yapmanızı öneriyoruz (we recommend gradual migration).
Alesta Web olarak gerçek projelerimizde yaptığımız benchmark sonuçları:
| Metrik / Metric | Zone.js (Angular 19) | Zoneless (Angular 20) | İyileşme |
|---|---|---|---|
| Initial Bundle Size | 245 KB | 210 KB | -14% ? |
| LCP (Largest Contentful Paint) | 2.1s | 1.5s | -29% ? |
| Change Detection (1000 item list) | 18ms | 4ms | -78% ? |
| Memory Usage | 42 MB | 31 MB | -26% ? |
| CD Cycles (10s idle) | ~150 döngü | 0 döngü | -100% ? |
Son satıra dikkat edin: zoneless modda, hiçbir şey değişmezken sıfır change detection döngüsü çalışıyor. Zone.js'te ise 10 saniyede 150 gereksiz döngü! Bu performans farkı (performance improvement) gerçekten çarpıcı.
Angular 20'nin bir diğer önemli yeniliği: Incremental Hydration. SSR ile render edilen sayfa, artık kademeli olarak interaktif hale geliyor (progressively becomes interactive).
// Component'lere hydration stratejisi belirle
@Component({
selector: 'app-yorum-listesi',
template: `
@defer (hydrate on viewport) {
<div *ngFor="let yorum of yorumlar()">
<p>{{ yorum.icerik }}</p>
</div>
}
`
})
export class YorumListesiComponent {
yorumlar = signal<Yorum[]>([]);
}
// hydrate on viewport = görünür olunca hydrate et
// hydrate on interaction = etkileşim olunca hydrate et
// hydrate on idle = boşta kalınca hydrate et
Bu sayede sayfa anında yükleniyor gibi görünüyor ama JavaScript bundle'ı kademeli olarak aktif hale geliyor. Alesta Web'in SEO odaklı projelerinde bu özellik Core Web Vitals skorlarını dramatik şekilde iyileştirdi.
// Bu hata zoneless modda da çıkabilir
// Çözüm: Signal kullan, doğrudan property değiştirme
// YANLIŞ:
ngAfterViewInit() {
this.title = 'Güncellendi'; // HATA!
}
// DOĞRU:
title = signal('Başlık');
ngAfterViewInit() {
this.title.set('Güncellendi'); // Signal ile OK!
}
// Zoneless modda manuel tetikleme gerekebilir
import { ChangeDetectorRef, inject } from '@angular/core';
export class DataComponent {
private cdr = inject(ChangeDetectorRef);
veri = signal<string>('');
async veriYukle() {
const sonuc = await fetch('/api/data');
const json = await sonuc.json();
this.veri.set(json.data); // Signal kullan = otomatik güncelleme
}
}
Bu makalede kullanılan bilgiler aşağıdaki güvenilir kaynaklardan alınmıştır:
Alesta Web olarak tüm bilgileri doğruladık ve kendi projelerimizde test ettik.
Angular 20 ile zoneless change detection artık production-ready! Zone.js'e veda edip Signals tabanlı modern Angular uygulamaları geliştirebilirsiniz. Alesta Web olarak bu geçişi tüm Angular projelerinde öneriyoruz — performans farkı gerçekten etkileyici.
Hızlı Özet / Quick Summary:
Faydalı Linkler / Useful Links:
© 2026 AlestaWeb - Tüm hakları saklıdır.