Angular Nedir, Neden Var? Bir Framework'ün Varlık Sebebi

Bir Sabah, Vanilla JavaScript ile Uyandığında

Diyelim ki Mert Özen adında bir geliştiricisin ve küçük bir işi hallETMEK için oturdun: bir sayfada kullanıcı listesi göstereceksin, bir arama kutusu olacak, kullanıcı yazdıkça liste filtrelenecek. Basit, değil mi?

Saf JavaScript ile başlıyorsun. Önce fetch ile veriyi çekiyorsun. Sonra bir for döngüsüyle her kullanıcı için elle document.createElement yapıp DOM'a ekliyorsun. Arama kutusuna bir input event'i bağlıyorsun. Kullanıcı bir harf yazdığında listeyi silip yeniden çiziyorsun. Derken "seçili kullanıcı" özelliği geliyor, bir de "favorilere ekle" butonu... Ve bir bakıyorsun ki kodun yarısı, ekrandaki HTML ile bellekteki veriyi elle senkronda tutmaya çalışmaktan ibaret.

İşte Angular tam olarak bu ağrıyı dindirmek için var. Ama oraya gelmeden önce, ne olduğunu net koyalım.

Angular Nedir? Tek Cümlelik Cevap

Angular, Google tarafından geliştirilen, TypeScript tabanlı, tek sayfa uygulamalar (single-page application) inşa etmek için kullanılan bir frontend framework'üdür. Yani tarayıcıda çalışan, kullanıcının gördüğü arayüzü üreten tarafın işini yapar.

Bu cümledeki her kelime önemli, ama en kritik olanı "framework". Çünkü Angular'ı anlamanın anahtarı, onun bir library değil bir framework olduğunu kavramaktan geçiyor.

Framework ile Library Farkı: Kim Kimi Çağırıyor?

Bu ikisi sürekli karıştırılır, oysa aradaki fark tek bir soruyla ayrışır: kontrol kimde?

Bir library kullandığında, kontrol sendedir. Sen kendi kodunu yazarsın ve ihtiyacın olduğunda library'nin fonksiyonunu sen çağırırsın. Alet çantasındaki bir tornavida gibidir; ne zaman, nasıl kullanacağına sen karar verirsin. React, özünde bu tarafa daha yakındır.

Bir framework'te ise kontrol tersine döner. Sen kodunu framework'ün belirlediği kurallara ve yapıya göre yerleştirirsin, ve framework senin kodunu çağırır. Buna yazılımda "Inversion of Control" (Kontrolün Tersine Çevrilmesi) denir. Meşhur bir deyişle: "Bizi arama, biz seni ararız."

Analojiyi biraz açalım. Library, evini döşerken gidip tek tek mobilya aldığın bir mağaza gibidir; hangi koltuğu nereye koyacağın tamamen sana kalmış. Framework ise anahtar teslim, planı çizilmiş bir ev gibidir; mutfak şurada, yatak odası burada olacak diye baştan bellidir. Sen sadece o odaların içini kendi eşyanla doldurursun. Kısıtlayıcı gelebilir, ama büyük bir avantajı vardır: on kişilik bir ekip aynı evde çalışırken herkes mutfağın nerede olduğunu bilir.

Angular Hangi Problemi Çözüyor?

Yazının başındaki senaryoya dönelim. Saf JavaScript ile en çok yorulduğun şey, veri ile ekranı senkronda tutmaktı. Angular'ın çözdüğü ana problem tam olarak budur ve buna data binding denir.

Angular'da sen veriyi (bir değişkeni) değiştirirsin, ekran otomatik güncellenir. Elle document.createElement yok, elle DOM güncelleme yok. Sen "bu kullanıcının adı artık Mehmet" dersin, ekrandaki isim kendiliğinden değişir. Küçük bir örnekle:

@Component({
  selector: 'app-user',
  template: `
    <h3>{{ userName }}</h3>
    <button (click)="changeName()">Adı Değiştir</button>
  `
})
export class UserComponent {
  userName = 'Mert';

  changeName() {
    this.userName = 'Mehmet';
  }
}

Bu kadar. Butona basıldığında userName değişkeni değişiyor ve <h3> içindeki metin otomatik olarak "Mert"ten "Mehmet"e dönüyor. DOM'a elle dokunduğumuz tek bir satır bile yok. Endişelenme, bu kodun her parçasını (component, selector, template, o süslü parantezler) ilerleyen yazılarda tek tek söküp inceleyeceğiz. Şimdilik sadece "veriyi değiştirdim, ekran kendi güncellendi" hissini yakalaman yeterli.

Neden TypeScript? Neden Zorunlu?

Angular, JavaScript ile değil TypeScript ile yazılır ve bu bir tercih değil, bir gerekliliktir. TypeScript, JavaScript'in üzerine tip sistemi ekleyen bir dildir; yani bir değişkenin sayı mı, metin mi, yoksa bir kullanıcı nesnesi mi olduğunu baştan belirtirsin.

Neden zahmet? Çünkü büyük uygulamalarda hataların çoğu "beklediğim şey gelmedi" türündendir. Bir fonksiyona sayı bekliyorsun ama metin geliyor, ve bunu ancak uygulama kullanıcının elinde çökünce fark ediyorsun. TypeScript bu hataları sen daha kod yazarken, tarayıcıyı hiç açmadan yakalar. Bir inşaatta duvarı örmeden önce çeliği kontrol etmek gibidir; sonradan çökmesini beklemekten çok daha ucuza gelir.

Angular ekibi bu güvenliği o kadar merkeze aldı ki, framework'ün kendisi baştan aşağı TypeScript ile yazıldı. Sen de öyle yazacaksın. İyi haber: eğer JavaScript biliyorsan, TypeScript'in %90'ı zaten tanıdık gelecek.

Peki Angular Ne Zaman Doğru Seçim?

Her işe her alet uymaz. Angular'ın parladığı ve parlamadığı yerleri dürüstçe koyalım.

Angular, büyük ve uzun ömürlü uygulamalar için biçilmiş kaftandır. Bir bankacılık paneli, bir kurumsal yönetim sistemi, yıllarca yaşayacak ve onlarca geliştiricinin dokunacağı bir proje düşün. Angular'ın "her şeyin yeri bellidir" yapısı burada bir yük değil, bir nimettir; ekibe yeni katılan biri, projenin nasıl organize olduğunu ilk günden çözer.

Öte yandan, tek bir landing page yapacaksan ya da haftasonu küçük bir deneme projesi kuruyorsan, Angular fazla ağır kalabilir. O yapıyı kurmanın maliyeti, işin kendisinden büyük olabilir. Böyle durumlarda daha hafif araçlar daha mantıklıdır.

Kısacası: Angular bir kamyon gibidir. Şehir içinde ekmek almaya giderken kamyon kullanmazsın, ama bir ev taşıyacaksan da bisikletle uğraşmazsın.

React ve Vue ile Kısa Bir Kıyas

Angular'ı tek başına anlamak zor, komşularıyla kıyaslayınca yerine oturur. Üçü de aynı işi yapar (arayüz kurar) ama felsefeleri farklıdır.

React aslında tam bir framework değil, bir library'dir. Sana sadece arayüz katmanını verir; routing, form yönetimi, HTTP gibi şeyleri sen dışarıdan ekler ve kendi mimarini kurarsın. Özgürdür ama kararları sana bırakır. Vue, ikisinin ortasında durur; React'ten daha yapılı, Angular'dan daha esnektir.

Angular ise "bütün paket" felsefesindedir. Routing da, form yönetimi de, HTTP istemcisi de kutunun içinden çıkar. Ayrı ayrı kütüphane seçip birbirine yapıştırmakla uğraşmazsın; hepsi baştan uyumlu gelir. Bunun bedeli başta biraz daha dik bir öğrenme eğrisidir, ödülü ise büyük projelerde tutarlılık ve düzendir.

Küçük Bir Deneme

Bu yazıda tek satır kod yazmadık, ama düşünmeni istediğim bir şey var. Kendi kullandığın ya da hayran olduğun bir web uygulamasını aç (bir e-posta istemcisi, bir yönetim paneli, sosyal medya, ne olursa). Şu soruyu sor: "Bu ekranda, ben bir şey yaptığımda (bir butona bastığımda, bir kutuya yazı yazdığımda) arayüzün geri kalanı nasıl anında güncelleniyor?"

Mesela bir mesajı okundu işaretlediğinde, üstteki "okunmamış" sayacının anında düşmesi. İşte o senkronizasyon, saf JavaScript ile elle yazılırsa kâbustur; bir framework ile ise neredeyse bedavaya gelir. Bu hissi aklında tut, çünkü bir sonraki yazıda Angular'ı bilgisayarına kuracak ve ilk projemizi oluşturacağız. Orada bu "otomatik senkron" büyüsünü kendi gözünle göreceksin.

Bir de şunu düşün: Sence o uygulama neden Angular (ya da React, ya da Vue) ile yazılmış olabilir? Projenin büyüklüğü, ekibin kalabalığı, ne kadar yaşayacağı... Bu soruların cevabı, doğru aracı seçmenin de cevabıdır.