Angular Nedir? Mimarisi, Özellikleri ve Avantajları

Sosyal medyadan sağlığa, e-ticaretten çevrimiçi bankacılığa, dünya çapında milyarlarca insan hemen hemen her şey için web ve mobil uygulamaları kullanıyor. Bu uygulamalar kullanışlıdır ve sorunsuz kullanıcı deneyimleri ve arayüzleri sunarak günlük yaşamlarımızda bize yardımcı olur. Bu uygulamalar böyle bir güvenilirlik sağlamak için nasıl geliştiriliyor? Bu işleri geliştirmek için yapılan harcamaların bir kısmı Angular gibi yaygın olarak kullanılan framework’lere gidiyor ve bu da sağlam uygulamalar oluşturmayı kolaylaştırıyor.

Öyleyse Angular’ı daha iyi tanıyalım. Bu makalede Angular hakkında kafanızdaki soru işaretlerini gidermeye ve Angular hakkında daha doğru düşünmenizi sağlamaya çalışacağız.

Angular nedir?

Angular, TypeScript ile yazılmış açık kaynaklı bir JavaScript framework’üdür . Angular Google tarafından desteklenir ve birincil amacı tek sayfalık uygulamalar geliştirmektir. Bir framework olarak Angular, geliştiricilerin birlikte çalışması için standart bir yapı sağlarken açık avantajlara sahiptir. Kullanıcıların sürdürülebilir bir şekilde büyük uygulamalar oluşturmasını sağlar. 

Neden Bir Framework’e İhtiyacınız Var?

Genel olarak framework’er, geliştiricilerin kodu sıfırdan yeniden oluşturmaya devam etmek zorunda kalmamaları için tutarlı bir yapı sağlayarak web ve uygulama geliştirme verimliliğini ve performansını artırır. Framework’ler, geliştiricilere ekstra çaba gerektirmeden yazılıma eklenebilecek bir dizi ekstra özellik sunan zaman kazandırıcılardır.

Neden Angular?

JavaScript , en sık kullanılan istemci tarafı betik dilidir. Web sayfalarıyla birçok benzersiz şekilde etkileşimi sağlamak için HTML belgelerine yazılabilir. Yaygın desteğe sahip, nispeten öğrenmesi kolay bir dil olarak, modern uygulamalar geliştirmek için çok uygundur. 

Ancak JavaScript modülerlik, test edilebilirlik ve geliştirici üretkenliği gerektiren tek sayfalık uygulamalar geliştirmek için ideal midir? Belki de değil. 

Bu günlerde alternatif çözümler sağlamak için tasarlanmış çeşitli Framework’ler ve kütüphaneler var. Front-end web geliştirme ile ilgili olarak, Angular, geliştiricilerin JavaScript’i tek başına kullanırken karşılaştıkları sorunların hepsini olmasa da çoğunu ele alır.

Farklı Angular Sürümleri Nelerdir?

“Angular”, çeşitli framework sürümleri için her şeyi kapsayan terimdir. Angular 2009 yılında geliştirildi ve sonuç olarak birçok geliştirme yapıldı.

İlk olarak, “Angular 1” olarak adlandırılan ve sonunda AngularJS olarak bilinen orijinal Angular vardı. Ardından Angulars 2, 3, 4, 5 … 13 geldi ve sürekli geliştirilmeye de devam ediliyor. Sonraki her bir Angular sürümü, önceki sürümü geliştirerek hataları düzeltir, sorunları giderir.

Mobil cihazlara uygun uygulamalar ve/veya daha karmaşık uygulamalar tasarlamak istiyorsanız, Angular’ı en güncel sürümüne yükseltmeniz gerekir.

Anguların Özellikleri Nelerdir?

1. Belge Nesne Modeli 

DOM (Document Object Model – Belge Nesne Modeli), bir XML veya HTML belgesini, her düğümün belgenin bir bölümünü temsil ettiği bir ağaç yapısı olarak ele alır.

Angular, normal DOM kullanır. Aynı HTML sayfasında on adet güncelleme yapıldığını düşünün. Angular, halihazırda yeni oluşturulanları olanları güncellemek yerine, HTML etiketlerinin tüm ağaç yapısını güncelleyecektir.

2. TypeScript 

TypeScript, JavaScript’e, kullanıcıların anlaşılması daha kolay JavaScript kodu yazmasına yardımcı olan bir dizi tür tanımlar. TypeScript kodunun tamamı JavaScript ile derlenir ve herhangi bir platformda sorunsuz bir şekilde çalışabilir. Bir Angular uygulaması geliştirmek için TypeScript zorunlu değildir. Bununla birlikte, kod yapısının anlaşılmasını ve bakımını kolaylaştırırken daha iyi sözdizimsel yapı sunduğu için şiddetle tavsiye edilir. 

TypeScript’i aşağıdaki komutla bir NPM paketi olarak yükleyebilirsiniz:

npm install -g typescript

3. Veri Bağlama

Veri bağlama , kullanıcıların bir web tarayıcısı aracılığıyla web sayfası öğelerini değiştirmelerini sağlayan bir işlemdir. Dinamik HTML kullanır ve karmaşık komut dosyası oluşturma veya programlama gerektirmez . Veri bağlama, hesap makineleri, öğreticiler, forumlar ve oyunlar gibi etkileşimli bileşenler içeren web sayfalarında kullanılır. 

Angular, iki yönlü bağlamayı kullanır. Model durumu, ilgili UI (User Interface – Kullanıcı Arayüzü) öğelerinde yapılan değişiklikleri yansıtır. Tersine, UI durumu da, model durumundaki tüm değişiklikleri yansıtır. Bu özellik, framework’ün denetleyici aracılığıyla DOM’un model verilerine bağlamasını sağlar.

4. Test 

Angular, Jasmine test framework‘ünü kullanır . Jasmine framework’ü, farklı türde test senaryoları yazmak için birden fazla işlevsellik sağlar. Karma, başlatma, raportörler ve test framework’ünü ayarlamak için bir yapılandırma dosyası kullanan testler için görev yürütücüdür.

Artık Angular’ın temel özelliklerine aşina olduğunuza göre, Angular ile günlük olarak çalışmak istiyorsanız mimarisini anlamanız gerekir. 

Angular’ın ne olduğunu öğrenmeye devam etmek için mimariye geçelim

Angular Mimarisi

Angular, tam teşekküllü bir model görünüm denetleyicisi (MVC) framework’üdür. Uygulamanın nasıl yapılandırılması gerektiği konusunda net rehberlik sağlar ve gerçek DOM oluşturulurken çift yönlü veri akışı sunar. 

Aşağıdakiler, bir Angular uygulamasının sekiz yapı taşıdır: 

1. Modüller

Bir Angular uygulamasının, uygulamayı başlatmak için önyükleme mekanizması sağlayan AppModule adlı bir kök modülü vardır.

2. Bileşenler

Uygulamadaki her bileşen, uygulama mantığını ve verilerini tutan bir sınıfı tanımlar. Bir bileşen genellikle kullanıcı arabiriminin (UI) bir bölümünü tanımlar.

3. Şablonlar

Angular şablonu, HTML öğelerini görüntülenmeden önce değiştirmek için Angular işaretlemelerini (markup) HTML ile birleştirir. İki tür veri bağlama vardır: 

1. Olay bağlama: Uygulama verilerinizi güncelleyerek uygulamanızın hedef ortamdaki kullanıcı girişine yanıt vermesini sağlar.
2. Özellik bağlama: Kullanıcıların, uygulama verilerinizden hesaplanan değerleri HTML içine yazmasına / eklemesine olanak tanır.

4. Meta veriler

Meta veriler, Angular’a bir sınıfın nasıl işleneceğini söyler. Bir sınıfın beklenen davranışını yapılandırabilmesi için sınıfı dekore etmek için kullanılır.

5. Hizmetler

Görünümle ilişkili olmayan ancak bileşenler arasında paylaşılması gereken verileriniz veya mantığınız olduğunda, bir hizmet sınıfı oluşturulur. Sınıf her zaman @Injectible dekoratörü ile ilişkilendirilir.

6. Bağımlılık Enjeksiyonu

Bu özellik , bileşen sınıflarınızı canlı ve verimli tutmanıza olanak tanır. Bir sunucudan veri almaz, kullanıcı girişini doğrulamaz veya doğrudan konsolda oturum açmaz. Bunun yerine, bu tür görevleri hizmetler olarak adlandırılan iş sınıflarına devreder.

Angular, kendi avantajları ve dezavantajları ile birlikte gelir. Sonraki iki bölüm bunları kısaca açıklamaktadır.

AngularJS Yönergeleri

AngularJS yönergeleri, HTML’yi yeni sözdizimi sağlayarak genişletir. “ng-” ön ekine sahip oldukları için direktifleri kolayca tespit edebilirsiniz. AngularJS’ye öğeye belirli bir davranış eklemesini veya hatta onu doğrudan değiştirmesini söyleyen DOM öğesindeki işaretçiler olarak düşünün.

İşte iki örnek direktif:

• ng-model Direktifi

ng-model, HTML kontrolünün değerini belirtilen AngularJS ifade değeriyle bağlar.

• ng-bind Direktifi

ng-bind, HTML kontrol değerini belirtilen bir AngularJS ifade değeriyle değiştirir.

Angular’ın Avantajları Nelerdir?

Başlangıcından bu yana Angular’ın birçok sürümü yayınlandı. Tüm bu sürümler, framework’ün verimli çalışmasına katkıda bulunmuştur.

1. Özel Bileşenler

Angular, kullanıcıların işlevselliği yeniden kullanılabilir parçalar halinde işleme mantığı ile birlikte paketleyebilen kendi bileşenlerini oluşturmalarını sağlar. Ayrıca web bileşenleriyle de iyi çalışır.

2. Veri Bağlama

Angular, kullanıcıların verileri JavaScript kodundan görünüme taşımasını ve manuel olarak herhangi bir kod yazmak zorunda kalmadan kullanıcı olaylarına tepki vermesini sağlar. 

3. Bağımlılık Enjeksiyonu

Angular, kullanıcıların modüler hizmetler yazmalarını ve ihtiyaç duydukları her yere bunları enjekte etmelerini sağlar. Bu, aynı hizmetlerin test edilebilirliğini ve yeniden kullanılabilirliğini artırır. 

4. Test

Testler birinci sınıf araçlardır ve Angular, sıfırdan test edilebilirlik göz önünde bulundurularak oluşturulmuştur. Uygulamanızın her bölümünü test etme olanağına sahip olacaksınız ki bu şiddetle tavsiye edilir. 

5. Kapsam

Angular, tam teşekküllü bir framework’tür ve sunucu iletişimi, uygulamanız içinde yönlendirme ve daha fazlası için kullanıma hazır çözümler sunar.

6. Tarayıcı Uyumluluğu

Angular, platformlar arasıdır ve birden çok tarayıcıyla uyumludur. Angular uygulaması genellikle tüm tarayıcılarda (Örn: Chrome, Firefox, Edge) ve Windows, macOS ve Linux gibi işletim sistemlerinde çalışabilir.

Angular’ın Sınırlamaları

1. Dik Öğrenme Eğrisi

Angular’ın tüm kullanıcıların bilmesi gereken temel bileşenleri arasında yönergeler, modüller, dekoratörler, bileşenler, hizmetler, bağımlılık enjeksiyonu, pipes ve şablonlar bulunur. Daha gelişmiş konular arasında değişiklik algılama, bölgeler, AoT derlemesi ve Rx.js bulunur. Yeni başlayanlar için Angular eksiksiz bir framework olduğu için öğrenmesi zor olabilir. 

2. Sınırlı SEO Seçenekleri

Angular, sınırlı SEO seçenekleri ve arama motoru tarayıcılarına zayıf erişilebilirlik sunar.Bunun sebebi Angular’ın istemci tarafında çalışmasıdır. Ancak Yine de Google bu konuda geliştirmeler yapmaktadır. Özellikle Angular 11 sonrası geliştirmelerde özellikle ön işleme modunda çalışması sayesinde daha seo dostu ve okunabilirliği arttırmayı hedeflemişlerdir.

3. Migrasyon – Taşıma

Şirketlerin Angular’ı sık kullanmamalarının nedenlerinden biri, eski js/jquery tabanlı kodu Angular stil mimarisine taşımanın zorluğudur. Ayrıca, her yeni sürümün yükseltilmesi zahmetli olabilir ve bunların birçoğu geriye dönük uyumlu değildir.

4. Ayrıntılı ve Karmaşık

Angular topluluğundaki yaygın bir sorun, framework’ün ayrıntı düzeyidir. Ayrıca diğer front-end araçlara kıyasla oldukça karmaşıktır.

Angular ve AngularJS Arasındaki Farklar

Angular, framework’ün (1-13) her sürümü için tümünü kapsayan bir terimdir, AngularJS ise yeniden adlandırılan ilk Angular sürümüdür. On yıldan daha eski olmasına rağmen, AngularJS eski değil; hala daha küçük web uygulamaları geliştirmek için birçok kullanım buluyor.

Bazı temel farklılıkları özetleyen kullanışlı bir tablo

Angular Kullanan Şirketler

Google, Nike, Upwork, HBO ve diğerleri gibi birçok üst düzey şirket Angular’dan yararlanır.

Son Olarak:

Bu makale, güçlü özellikleri ve karmaşıklıkları dahil olmak üzere yalnızca Angular’ın temellerine değindi. Dahası için IHS Blog’u takip etmeyi ve içeriklerimizi ilgilenebileceğini düşündüğünüz arkadaşlarınızın faydalanabilmesi için paylaşmayı unutmayın 🙂