AngularJS Gone Wild Day:1

Tahmini Okuma Süresi: 8 dakika

AngularJS tanım

60’lı yıllarda İngilizler müzik dünyasına önemli  katkılar sağlıyor. Efsaneleşmiş müzik grupları yıllar boyu nesilleri büyütecek şarkılara imza atıyor. Hatta bu döneme bir isim bile veriliyor British Invasion. The Beatles , The Who, Led Zeppelin sonralara doğru Deep Purple, Quuen  gibi şimdilerin efsane grupları, müzik dünyasında “çılgın atıyor”lar. Aynı dönemin bir başka önemli grubu ise Rolling Stones. Grubun ana vokalist Sir  Michael Phillip “Mick” Jagger.  Adam “Angiee, angieee” diye bağırıyor, fısıldıyor. Belki de 2010 yılının Google mühendislerine selam çakıyor. Onlar da bu çağrıyı duymuş olacaklar ki bir çok attribute’ü “aNGie” prefix’ine sahip bir framework sunuyorlar bizlere. Şakayı bir kenara bırakırsam böyle bir başlangıç yapma nedenim “AngularJS kütüphanesinin bir Javascript framework’ü dür.” tarzı bir giriş yapmamaktı. Nasıl giriş yaparsam yapayım tanımı da biraz önce tırnak içinde yazdığım cümle.

AngularJS kelimesini google’da  arattığımda  ilk sırada gelen arama sonucunun başlığı gerçekten çarpıcı.

angularjs

Superheroic JavaScript MVW Framework

İnsan böyle bir başlık görünce dur taytımı alıp geleyim moduna giriyor.

Tabii bu kadar iddialı bir başlık atılabiliyorsa bir hikmeti de vardır diye bir mod oluşuyor. Bu hikmetleri başlıklar halinde şu şekilde sıralayabiliriz.

  • Dependency Injection sistemi
  • Çift yönlü veri bağlama
  • Kolay test edilebilme
  • Genişletilebilir HTML
  • Az kod, çok iş

Nasıl Başlarım?

Hâlâ başlamadıysan hiç bulaşma kardeş diyenler olabilir. Zira AngularJS tarafında gelişmeler epey hızlı oldu. Daha Angular neydi ne değildi bünyemize nüfuz edemeden Angular 2 haberleri saçıldı ortalığa, hem de çok büyük yapısal değişiklikler olacağından ötürü herhangi bir migration olamayacağı söylentileri genç dimağlarda infial yarattı. Yine de AngularJS 1.x versiyonları ile geliştirme yapabilir. Angular 2 upgrade’i yapmadan kendi dünyamda takılırım diyenler için bir engel yok açıkçası. Hatta İnternet’te aratıldığında “migration guide” bile bulunabiliyor. Ama controller , $scope gibi kavramlara “goodbye, Liverpool” denmiş. Ayrıca  syntax’daki farklara bakınca “yok artık Lebron James” etkisi oluşmuyor da değil. Ama 1->2 upgrade’i yapmadığım için ne desem boş.  AngularJS 2’yi henüz incelemedim. Sadece katıldığım bir kaç yazılım seminerinde adı geçti. Bir de İnternet’te göz attığım yazılar var. Onun dışında deneyimleme şansım ne yazık ki olmadı. AngularJS ile ilgili ise yer aldığım proje dolayısıyla haşır neşir oluyorum diyebilirim. O yüzden yıl oldu 2016 sen daha yeni AngularJS 1.x yazısı yazıyorsun diyen arkadaşları şöyle alayım. https://angular.io/

Kalan sağlar ile ise bir AngularJS uygulaması yazmak için neler gerekli diyerek başlayalım. Angular sitesinden AngularJS Official Page en son stabil sürümü kendi lokalinize indirebilir, CDN linkini HTML sayfanıza referans olarak ekleyebilir, bower, npm gibi package manager’lar ile yine direk projenize dahil edebilirsiniz. Yok bunlar beni kesmedi diyorsanız Yeoman ile  kurulum yapabilirsiniz. Yeoman Angular Generator . Bitti mi? bitmedi… Bir yöntem daha var. İlerleyen satırlarda paylaşacağım.

Diğer bir alternatif de eğer sadece AngularJS ile ufak tefek denemeler yapacağım diyorsanız. Üstte saydığım yöntemlerden ziyade “online playground” denilen web uygulamaları işinizi görecektir. Plunkr adlı uygulama bu iş için gayet uygun. Zaten UI Bootstrap örnekleri de bu site üzerinde barınıyor. Diğer seçenekler ise CodePen, JsFiddle, JsBin

Öğrenmek zor mu?

AngularJS öğrenme grafiği ile ilgili esprili bir resim var.

js-learning-curves

Aslında ironik gibi görünse de kısmen doğrular içeren bir resim yukardaki, AngularJS uzun uzun karmaşık kodlar yazmak gerektirmese de bazen özellikle scope yapısı kafa karıştırıcı oluyor. Örneğin Jquery ile 20 satır kod yazarak yapabileceğiniz bir işlemi AngularJS ile 2 satırda yapınca “tamam ben bu işi çözdüm” ruh haline bürünebiliyor insan. Daha sonra ise yine çok kolay gibi görünen bir operasyonu yapabilmek için taklalardan takla beğenirken eğri gene düşüşe geçiyor. Ama bu gözünüzü korkutmasın. Sonuçta emek verilen her teknoloji bir şekilde öğreniliyor. Önemli olan bilgi seviyesini her zaman “bir tık” öteye götürmek. Javascript bilgisi öğrenme hızını şüphesiz ki etkileyecektir. Yine script dillere aşina olmak da süreci olumlu yönde etkiler.

HelloWorld uygulamanızı başarıyla yazdıktan sonra, directives, filters, custom services, built-in services, factory gibi obje modellerini öğrenerek yola devam edilir. Directive denilen objeler ile HTML template’leri oluşturarak DOM elementlerini istediğimiz şekilde zenginleştirebiliyoruz. Hâlihazırda bir AngularJS uygulaması için kullanabileceğimiz directive objeleri de bulunmakta.

Öğrenme Kaynakları

Öğrenme süreci kişiden kişiye değişen yöntemlerle ilerler. Kimisi okuyarak, kimisi izleyerek, kimisi de deneyerek öğreniyor. Kendi öğrenme yönteminizi az çok farketmişsinizdir. Bu bölümde bende İnternet’te yer alan kaynaklardan bir derleme yapmak istedim. Tabii ki ilerleyen günlerde ben de AngularJS ile ilgili yazılar yazmaya devam edeceğim. Benim zaman zaman faydalandığım çeşitli kaynakların listesi şu şekilde:

Son Tahlil

Bu yazıda AngularJS ile ilgili bilgiler kod blokları içermeyen bilgiler vermeye çalıştım. İlerleyen yazılarda kod örnekleriyle bu yazıda bahsetmiş olduğum AngularJS  özelliklerini örneklendirmeye çalışacağım. Her ne kadar Javascript dünyasında çok hızlı gelişmelerin yaşandığın dönemlerde olsak da, şu an için AngularJS 1.x tamamen rafa kalkmış bir teknoloji değil. Knockout, Ember, Backbone, Jquery, Angular 2, React gibi alternatifleri ile birlikte AngularJS‘de tercih edilmeye devam eden bir framework. Javascript tarafında bunca teknoloji varken sadece tek bir framework’e bağlı kalmak çok anlamlı olmaz aslında. Mümkün mertebe diğer teknolojileri de irdelemekte fayda var. “Stack” kavramını duymuşsunuzdur, son  dönemde iş ilanlarında rastlamaya başladığımız “Full Stack Developer” ünvanındaki “Stack” bir uygulamanın ihtiyaç duyduğu çeşitli geliştirme araçlarının tümünü ifade ediyor. Angular ile ilişkisine geleyim bu “stack” kavramının. Mean isim web framework stack‘i.

mean

Yukardaki resimde de gördüğümüz üzere Mean Stack’inin “A” harfi AngularJS’den geliyor. Kimbilir AngularJS bir öğrenme zincirine başlamanızın ilk adımı olur. Nihayetinde de bir çok yeni teknolojiyle bilgi dağarcığınız genişler. Önemli olan yaptıklarınızdan keyif almanız, öğrenme isteğinizi hep yüksek tutabilmek. Gerisi gelecektir. Keep calm and code on:)

2 Replies to “AngularJS Gone Wild Day:1”

  1. Çok faydalı bir yazı olmuş.Teşekkür ederim.Umarım sonda verdiğiniz kaynakları hepsine bakabilme vaktim olur.

Leave a Reply

Your email address will not be published. Required fields are marked *