Angular Nedir

Merhaba Arkadaşlar,
Angular Nedir konulu yazıma başlamadan önce mobilhanem.com üzerinden yayımlamaya başladığımız Angular Eğitim Seti hakkında bilgi paylaşmak ve nasıl bir anlatım yolu izleyeceğimden bahsetmek istiyorum. Bu serinin tamamı Angular 2 ve üzeri versiyonları konu alacaktır. Yazılması planlanan bütün makaleler, okuyucunun baştan sona Angular Framework Mimarisini öğrenip, gerçek hayatta kendi başına Angular ile proje geliştirebilmek için ihtiyacı olan bütün kazanımları elde edebileceği sıralamada ilerleyecektir. Bundan dolayı eğitimlerimizi atlamadan takip etmenizi öneriyorum.  

Angular Eğitim Seti ile alakalı yazıların tamamına buradan ulaşabilirsiniz.

Angular; web, mobil ve masaüstü uygulamalar oluşturmak için kullanılan Javascript tabanlı bir framework’dür. Angular uygulamaları Javascript’in üzerine inşa edilmiş bir dil olan Typescript’in Html, Css ile birlikte kullanılmasını içerir. Typescript’te yazılan kod önce Javascript’e derlenir ardından browserda işlenir. Typescript kullanımı, Angular uygulama geliştirmek için zorunlu değildir fakat kullanım kolaylığı ve avantajları sayesinde kullanılmasının daha yararlı olacağını düşünüyorum. Typescript ile tipi belli olan nesneler tanımlayabilecek ve bu nesneleri servis response’ları ile mapleyerek daha okunaklı ve hata oranı daha az kodlar yazabileceğiz. Ayrıca syntax bakımından (class tanımlama, function tanımlama vb.) alışık olduğumuz OOP tabanlı dillere (C#, Java vb.) daha çok benzediği için javascript ile kod geliştirmek artık daha kolay. Bende bu seride kodlayacağım bütün örnekleri Typescript ile yazacağım.

Angular piyasaya ilk sürümü olan AngularJS ile çıktı. Hatırı sayılır şekilde talep gördü fakat kullanımı arttıkça yaşanan sıkıntılar, browser tarafında görülen eksiklikler ve kod yazarken yaşanılan sorunlardan dolayı Google’ın desteği ile mimari olarak baştan tasarlanıp daha kullanışlı ve eski versiyonunun sıkıntıları giderilmiş şekilde, Angular 2 ve üzeri versiyonları ile tekrar vitrinlerdeki yerini aldı. Angular 2 ve üzeri versiyonları geriye dönük uyumludur. Bu sayede versiyon geçişlerinde sıkıntı yaşanmaz fakat AngularJS versiyonunu Angular 2 ye kolayca yükseltmek mümkün değildir. Yukarıda belirttiğim gibi biz bu yazı serimizde Angular 2 ve üzeri versiyonları destekleyecek şekilde eğitim vereceğiz.

Angular Nedir ve Neden Kullanmalıyım?

Normalde çok fazla konuşmayı değil örneklerle konuları açıklamayı tercih ederim. Bu serinin ilk makalesi olduğu için hem giriş niteliğinde olması ve kafanızda Angular için genel bir şablon oluşturması adına biraz fazla konuştum diyelim ?

Peki iyi hoş da neden Angular kullanmalıyım diye soruyor olabilirsiniz. Biraz bu konudan bahsedelim. Çünkü;

Neden 1 – Angular’ın SPA (Single Page Application) desteği

Single Page Application (SPA), her yeni sayfanın içeriğinin yeni HTML sayfaları yüklemek yerine JavaScript’in mevcut sayfadaki sadece değişen sayfaya ait DOM öğelerini değiştirerek dinamik olarak oluşturduğu web sitesi tasarım yaklaşımıdır.

SPA yaklaşımında tasarlanmayan bir web uygulamasında, index.html sayfası üzerinden yeni bir sayfaya bağlanıldığında (yönlendirildiğinde), bu sayfa sunucu tarafından HTML olarak oluşturulur ve browser üzerinde görüntülenir. Bu beyaz ekran oluşumu ve gecikmelere neden olan standart web uygulamalarının en büyük problemidir. Çünkü direkt son kullanıcıyı etkiler.

Bir SPA uygulaması AJAX requestleri ve ya websocketler ile sunucudan dinamik olarak içerikler alacaktır. Bu, browser’ın arka planda sunucuya ek içerik veya tamamen yeni sayfalar getirmesini talep ederken, mevcut sayfayı açık tutmasını sağlar. Bu sayede çok daha hızlı etkileşimler ve sadece ilgili parçaların güncellenmesi sağlandığı için çok daha hızlı güncellemeler olacaktır.

Sayfa güncellenmiyorsa url’ler değişmeyecek diye düşünebilirsiniz. Bunun önüne geçmek için HTML5 History API sayfayı yeniden yüklemeden sayfanın URL’sini değiştirmemize izin verir ve bu sayede farklı görünümler için ayrı URL’ler oluşturabiliriz.

Neden 2 – Two-way data binding (Çift yönlü Data İletişimi)

Angular 2 ve üzeri sürümlerinde ngModel Directive’lerini kullanarak otomatik olarak View ve Controller katmanları arasında veri bağlantısını sağlarız. Bu sayede aynı değişken üzerindeki herhangi bir değişiklik Angular two-way data binding sayesinde bütün sayfa üzerindeki ilgili alanların değişmesini tetikler.

Jquery ile bunu yapmak istediğimizde selector’ler ile sayfa üzerindeki değiştirmek istediğimiz alanları tek tek bulup, value’larını set ederek ya da gerekli methodları çağırıyorduk. Fakat bu Angular ile gerçekten çok kolay ve çok pratik.

Neden 3 – Modular Architecture

Angular’ın moduler yapısı sayesinde uygulamamızı parçalara bölebilir ve tekrar kullanımını sağlayabiliyoruz. Bu module’leri component’ler, directive’ler, pipe’lar ve service’ler ile birlikte gruplayabiliyoruz.

Ayrıca module’lerin bir başka avantajıda layz-loading yapısıdır. Bu sayede bir ve ya birden çok özelliği gruplayıp gerektiğinde yükleyebileceğimiz için düzgün kullanıldığı durumda uygulama performansını ciddi oranda arttıracaktır.

Kurumsal uygulamalar çok büyüyebilir. Ekipler arasında iş paylaşımı yapmak zorlaşır. Module’ler sayesinde ekiplere işleri module by module paylaştırabiliriz. Kod tutarlılığını koruyarak düzenli kod yazmanın önünüde açmış oluruz.

Neden 4 – Az Kodlama ile Çok İş

Developer’lar kısa fakat etkili kodlar yazmak isterler. Angular MVC (Model View Controller) mimarisini destekler, hatta geliştiriciyi bu yapıya uygun şekilde kod yazmaya zorlar. Component ve Module’ler sayesinde tekrar tekrar aynı işi yapan kodlar yazmak yerine yeniden kullanımı sağlar.

Ayrıca, Angular Directive’leri sayesinde HTML’ inizi geliştirebilmenize ve kendi custom html tag’larınızı oluşturmanıza izin veriyor.  “ngIf”, “ngFor” gibi directive’ler sayesinde kısa kodlarla html render yönetimini kolaylıkla yapabiliyorsunuz. Bu özellikleri örneklerimizde bol bol kullanacağız.

Neden 5 – Kolay Entegrasyon

Ionic, Telerik, Kendo UI, Wijmo gibi güçlü önyüz tasarım framework’lerin Angular uyumlu kodu inşa edilmiştir. Bu nedenle, bunun gibi third-party framework’ler ile proje geliştirmek çok kolaydır.

Neden 6 – Cross Platrform Çalışabilme (Benim için en önemli neden budur diyebilirim)

Angular Nedir başlığı altında ilk cümlemde Angular ile web, mobile ve desktop uygulamalar geliştirebileceğinizden bahsetmiştik.

Web uygulamaları ve Angular 5 ile beraber PWA (Progressive Web Application) uygulamalarıda geliştirebilecek desteğe sahiptir. PWA uygulamalar ile web uygulamalarınız çevrimdışı olarak çalışabilir . Bu makalenin konusu olmadığı için PWA detayına girmeyeceğim fakat bu seri ile beraber PWA ile ilgili makale de yazmanın gerekli olduğunu düşünüyorum.

Angular ile native mobil uygulamalar da geliştirebilirsiniz. Bu özelliğin en büyük avantajı tek bir program ile ios, android ve windows phone uyumlu derlenebilir uygulamalar geliştirebilmektir diyebiliriz.

Ayrıca Angular ile Mac, Windows ve Linux için masaüstünde yüklü uygulamalar da geliştirebilirsiniz.

Eğer sizi Angular proje geliştirmeniz gerektiği hakkında ikna edebildiysem bu yazı serisini takip etmenizi öneririm ? Bu yazı giriş niteliğinde olduğu için biraz fazla konuştuk fakat bundan sonra icraata geçeceğiz. Söz… ?

Özet

Bu yazıda mobilhanem.com üzerinde yayımlamaya başladığımız Angular Eğitim Seti hakkında açıklamalar yaptık. Angular Nedir sorusuna cevap verdik. Angular kullanmanın sebeplerini Neden Angular Kullanmalıyım başlığı altında inceledik ve Single Page Application (SPA) hakkında bilgiler verdik.

Bir sonraki yazımda görüşmek üzere…

Yararlı Linkler

https://angular.io/
https://www.typescriptlang.org/