Angular 20 ve TypeScript ile Yönetici Panelleri Kurmak
Altı farklı projede aynı frontend yığınıyla admin ekranları geliştiriyorum.
Mert Celal Yılmaz · Full Stack Developer · Güncellendi:
Aynı frontend framework'ünü birbirinden bağımsız altı projede kullanmak, onun gerçekten işe yarayıp yaramadığını anlamanın en pratik yolu. Angular, Google'ın geliştirdiği ve component tabanlı yapısıyla büyük, uzun soluklu uygulamalar için tasarlanmış bir TypeScript framework'ü. TypeScript tarafı ise JavaScript'e statik tip kontrolü katıyor; bir API'den dönen veriyi component'te yanlış property adıyla kullanmaya çalıştığında bunu derleme anında yakalıyorsun, üretimde değil.
Şu anda üzerinde çalıştığım projelerin hemen hepsinde Angular 20 var. YODER bağış platformunun panelini, otel rezervasyon AI asistanının arayüzünü, apartman yönetim sisteminin frontend'ini, kurumsal iş yönetim platformunun admin ekranlarını, bulut tabanlı doküman yönetim sisteminin arayüzünü ve personel taşıma/filo optimizasyon platformunun admin panelini bu sürümle kuruyorum. Standalone component yapısı, signals tabanlı state yönetimi ve inject() ile servis bağlama artık tüm bu projelerde tekrarladığım standart bir kalıp haline geldi.
Angular eğitimimi BTK Akademi üzerinden sertifikalandırdım ama gerçek öğrenme, her projede farklı bir yetkilendirme mantığı veya farklı bir tablo/dialog akışı kurarken oldu. Altı proje, altı farklı iş kuralı; frontend tarafı her seferinde biraz daha netleşiyor.
Angular 20'de signals sadece 'daha modern bir state yönetimi' değil, change detection'ın çalışma şeklini de değiştiriyor. Eskiden zone.js her olay sonrası tüm component ağacını baştan aşağı kontrol ederken, bir signal'i template içinde okuduğunda Angular hangi component'in o veriye bağlı olduğunu otomatik takip ediyor ve sadece o component'i güncelliyor. Bunun karşılığında bir maliyeti var: state'i düz bir obje gibi mutasyona uğratıp UI'ın kendiliğinden güncellenmesini beklemek yerine, signal'i update() ya da yeni referansla set() etmeyi alışkanlık haline getirmen gerekiyor.
TypeScript'in statik tip kontrolü backend'den dönen veriyle ilgili de sahte bir güven duygusu veriyor: bir interface tanımlaman, API'nin gerçekten o şekilde veri döndüreceğinin garantisi değil. Backend'de bir DTO alanı değişip frontend'deki interface güncellenmezse TypeScript bunu derleme anında yakalamıyor, çünkü sana verdiğin sözü sorgulamıyor; runtime'da gerçek bir doğrulama istiyorsan sınırda ayrı bir kontrol katmanı kurman gerekiyor. Bu yüzden Angular'ı her yerde kullanmıyorum da; kendi portfolyo sitem gibi büyük ölçüde statik, az state taşıyan bir proje için component lifecycle'ı ve dependency injection kurmanın getirisi, kurulum maliyetini karşılamıyor.