ANGULAR NEDİR?

Üç boyutlu cilalı Angular kalkan amblemi, beyaz A harfi merkezde, Angular kırmızısı tonlarında

Bir geliştirici 2014 yılında yazdığı bir AngularJS uygulamasını 2016'da Angular 2'ye taşımaya çalıştığında acı bir gerçekle karşılaştı: bu iki framework birbirinin yeni versiyonu değildi, neredeyse farklı iki projeydi. Google'ın aldığı bu radikal karar Angular ekosistemine yıllarca süren bir kafa karışıklığı miras bıraktı. Bugün hala "Angular" denildiğinde hangisinden bahsedildiğini netleştirmek gerekiyor. Bu yazı modern Angular'ın ne olduğunu, neden var olduğunu ve hangi durumda doğru tercih olduğunu sıfırdan açıklıyor.

AngularJS ile Angular Arasındaki Kopuş

AngularJS (1.x sürümleri) 2010'da Google tarafından duyurulduğunda JavaScript dünyasında öncü bir yaklaşım sundu: iki yönlü veri bağlama, dependency injection ve declarative HTML şablonları. Birkaç yıl içinde popüler oldu, kurumsal yazılım dünyasına girdi. Ancak mobil web yükselişe geçtiğinde temel mimarisinin yavaş kaldığı ortaya çıktı. Digest döngüsü, scope yönetimi ve performans darboğazları aşılamayacak boyutta birikmişti.

Angular ekibi 2016'da radikal bir karar verdi: framework'ü sıfırdan yazmak. Modern Angular (2, 4, 5 ... bugün 17+) TypeScript üzerine kurulu, component tabanlı, RxJS ile reaktif programlama benimsemiş bambaşka bir araçtır. AngularJS koduyla doğrudan uyumlu değildir, geçiş genelde tam rewrite anlamına geldi. Güncel API referansı için framework'ün resmi belgeleri kapsamlı bir başlangıç noktasıdır.

Modern Angular'ın Temel Yapı Taşları

Bugünün Angular'ı dört temel kavram üzerine kuruludur:

  • Component: Arayüzün tekrar kullanılabilir, bağımsız parçası. Her bileşen kendi HTML şablonu, CSS stili ve TypeScript sınıfıyla birlikte gelir.
  • Module: İlişkili bileşenleri, servisleri ve direktifleri gruplayan organizasyon birimi. Lazy loading bu birimler üzerinden yapılır.
  • Service: İş mantığı, veri erişimi ve paylaşılan durum için singleton sınıflar. Dependency injection ile bileşenlere enjekte edilir.
  • Routing: URL ile component eşleştirmesini yapan navigasyon katmanı.

Bu yapı taşları birleştiğinde tek sayfa uygulamalar (SPA) için tam donanımlı bir framework oluşur. React'in yaptığı gibi yalnızca view katmanı değil, uçtan uca bir çözüm sunar.

Üç boyutlu component ağacı, bir ebeveyn düğüm ve dört çocuk component'a dallanan eğri hatlar

Component Tabanlı Mimari Ne Demek?

Klasik web geliştirmede sayfa tek bir HTML parçasıydı; JavaScript bu parçayı DOM manipülasyonuyla değiştirirdi. Component tabanlı yaklaşım bu modeli tersine çevirir: arayüz, iç içe geçmiş bağımsız bileşenlerin ağacıdır.

Bir e-ticaret sitesinde örneğin AppComponent kökünde HeaderComponent, ProductListComponent ve FooterComponent bulunur. ProductListComponent kendi içinde ProductCardComponent'leri çoğaltır. Her bileşen kendi state'ini, davranışını ve görünümünü kapsüller. Bir parçayı değiştirmek diğerlerini etkilemez. Bu kapsülleme büyük ekiplerde tutarlı kod tabanını mümkün kılan en önemli özelliktir.

TypeScript Neden Zorunlu?

Angular, JavaScript yerine TypeScript kullanır. Bu pek çok geliştirici için ilk başta engelleyici görünür; tür sistemi ek bir öğrenme yükü getirir. Ancak büyük ölçekli uygulamalarda TypeScript'in sağladığı erken hata yakalama, otomatik refactoring desteği ve IDE'nin daha akıllı önerileri ciddi avantaj sağlar.

Angular'ın decorator tabanlı yapısı (@Component, @Injectable, @NgModule) zaten TypeScript'in olmadan çalışamayacağı meta-veri sistemi üzerine kurulu. JavaScript-only bir alternatifle Angular kullanmak teknik olarak mümkün değildir.

Angular CLI ve Geliştirme Deneyimi

Angular CLI (Command Line Interface), framework'ün en büyük üstünlüklerinden biridir. Yeni bir proje başlatmak, component üretmek, servis eklemek, build almak, test koşmak — hepsi tek komutla yapılır:

  • ng new my-app — yeni proje iskeleti
  • ng generate component user-profile — yeni bileşen
  • ng serve — geliştirme sunucusu (hot reload ile)
  • ng build --configuration=production — optimizasyonlu üretim build'i
  • ng test — Karma ve Jasmine ile birim testler

Bu standardizasyon ekipler arası geçişi kolaylaştırır; her Angular projesi benzer dizin yapısına ve komut setine sahip olur. React ekosistemindeki "her takım kendi build sistemini kuruyor" sorunu burada yaşanmaz.

Angular, React ve Vue Karşılaştırması

Üç araç sık karıştırılır ama doğrudan kıyaslamak teknik olarak adil değildir:

  • React: Yalnızca view katmanı. Routing, state management, form yönetimi için ayrı kütüphane (React Router, Redux, Formik) seçilir. Kararı geliştiriciye bırakır, esneklik yüksek.
  • Vue: React'ten daha kapsamlı ama Angular'dan daha hafif. Yumuşak öğrenme eğrisi, küçük-orta ölçekli projelere uygun.
  • Angular: Tam donanımlı framework. Routing, HTTP, form, animation, test araçları hazır gelir. Kararları kendi verir, geliştiriciye daha az seçenek bırakır.

Doğru cevap projenin ölçeğine bağlıdır. Küçük bir landing page için Angular fazla ağırdır; orta-büyük ölçekli kurumsal uygulamada React'in eklenmesi gereken parçaları zaman alır. Pratik karşılaştırmayı uygulamalı projelerle deneyimlemek isteyenler için Angular eğitimi başlangıç noktası olabilir.

Angular Ne Zaman Tercih Edilir?

Şu koşullarda Angular doğal seçimdir:

  • Büyük geliştirici ekibi (10+ kişi) tek kod tabanında çalışıyor
  • Uygulamanın yaşam süresi uzun (5+ yıl) bekleniyor
  • Form ağırlıklı kurumsal iç sistem (CRM, ERP, admin paneli) geliştiriliyor
  • Tip güvenliği ve disiplinli mimari sözleşme öncelik
  • RxJS ile reaktif veri akışı projenin doğal ihtiyacı

Buna karşılık küçük ekiple hızlı MVP üretiliyorsa, sayfa ağırlıkla statik içerikse ya da SEO kritikse Next.js + React veya Nuxt + Vue daha hafif başlangıç noktası verebilir.

Öğrenmeye Nereden Başlanır?

Angular'a başlamadan önce iki ön bilgi büyük avantaj sağlar: TypeScript temelleri ve RxJS observable mantığı. Bunlar olmadan framework eğrisini tırmanmak hayli zorlaşır. Sonrasında resmi tutorial (Tour of Heroes) tipik başlangıç noktasıdır; küçük ama kapsamlı bir CRUD uygulaması üzerinden tüm temel kavramları sırasıyla gösterir.

Asıl ustalık component composition, change detection, RxJS pipeline ve performans optimizasyonu konularını gerçek proje üzerinde tecrübe ederek gelir. Tutorial bitirip de production uygulamaya geçince fark edilen ayrıntılar, framework'ü gerçekten öğrendiğinin işaretidir.