AngularJS giriş

AngularJS ile ilgili öğrendiklerimi paylaşmadan önce bu konuya bir giriş yapmamız gerekiyor sanırım. Daha önce fontend/backend kavramının nasıl önemini yitirdiğiyle ilgili okuduğum onlarca yazı ve makaleden sonra DevOps Engineer kavramının da bu denli populer olduğu günlerde Javascript Framework’leri öğrenmek mecbur hale dönüştü.

Biz, yazılım çağını ortasında yakalamış(kime göre, neye göre?) 2015 yılında henüz yazılıma yeni adım atmış geliştiriciler olarak, işin başındayken bu tür yeniliklere ayak uydurmalıyız. Bunla ilgili yerini/sitesini hatırladığım birkaç makale linkini sizinle paylaşmak istiyorum.

Konuyu daha fazla dağıtmadan, AngularJS’in Türkiye’nin en büyük teknoloji şirketleri tarafından kullanılmadığını, daha çok startup tarzında gelişime ve yeniliğe açık, girişimci şirketlerde daha fazla kullanıldığını söylemem lazım. Büyük şirketlerin bu tür yeniliklere neden açık olmadığıyla ilgili iğneleyici şeyler söylemeyi çok isterdim. Bir sonraki yazım bunla ilgili olabilir 🙂 O tarafa fazla dokunmadan, dokunmadan edemeyeceğim! Neyse atlıyoruz..

Günümüz donanımları çok hızlı gelişmesiyle birlikte frontend teknolojiler daha çok tercih edilmeye başladı. Eskiden herşeyin server-side halledildiğini düşünürsek modern tarayıcılar ve iyi masaüstü bilgisayarlarımızın donanımları sayesinde ağır önyüz işlemleri hızlıca bitirilmekte. Single Page Application (SPA) dediğimiz Gmail, Twitter, Facebook gibi örnekler sayesinde sürekli sayfaların gidip-gelmediği, yenilenmediği sayfalar artık modern web ile zorunlu hale gelmeye başladı.

Standart web uygulamalarında sayfanın yeniden yüklenmesiyle birlikte tüm sayfanın içeriği tekrar sunucudan getiriliyordu. SPA’ler ile birlikte artık sadece ilgili alanlardan sunucudan getiliriyor. Yani her seferinde <head> altındaki kütüphaneleri uzaktan indirmeye yada tarayıcının cache’ine sormaya bile gerek kalmadığını düşünün. Bu durumu göz önüne alarak ne kadar fazla kar edileceğini hayal edin. Örnek olarak, herhangi bir siteye kayıt oluyorsunuz, butona bastınız ve tüm sayfa gitti… geldi… bu esnada sayfanız bembeyaz ve tarayıcının iconu hala dönüyor. Sonucun başarılı yada başarısız olup olmayacağını heyecanla bekliyorsunuz.. Birde xNET müşterisi olduğunuzu varsayarsak inanılmaz yavaş bir bağlantı ile koskoca sayfanın tekrar yüklenmesini bekliyorsunuz. Ne için? “Kaydınız alınmıştır” mesajı için. Tüm sayfanın tekrar yüklenmesini beklemek zorundasınız 🙂 Modern web uygulamaları / SPA ile bunun önüne geçiliyor.

AngularJS’i bu kadar populer olmasındaki sebeplerden ilki bana göre arkasına Google’in desteğini almış olması olabilir. Açık kaynak olması ve MVC prensiplerine uygun yazılım geliştirilmesine izin vermesi bizi etkileyen özelliklerinden. Bu JS FW’ü sayesinde RIA dediğimiz (Rich Internet Application) yeni nesil web uygulamalarını hızlı şekilde geliştirebiliyoruz. Aşağıda paylaştığım linkte AngularJS’e yapılan katkıları inceleyebilirsiniz. Şu yazıyı yazarken 1,337 geliştirici tarafından üzerinde çalışıldığını söyleyebiliriz. Bakalım ileri günlerde bu sayı artacak mı?

AngularJS-commit-graph

 

 

Bu kadar gereksiz bilgiden sonra asıl işimize dönebiliriz. Aslında yaptığın işin tarihini bilmek gereksiz değildir ancak geliştiriciler tarafından pek dikkate alınmayan bir konu olduğu gerçek. Eğer yaptığın işin tarihi önemsiz olsaydı, Fizik bölümünde ünlü Fizikçilerin hayatlarını zorla ezberletmezlerdi, sınavlarda sormazlardı, mezun olmanın şartlarından yapmazlardı. Çanakkale Fizik’teki 2 koca yılımda Fizik namına öğrendiğim en iyi şeyin ünlü bilim adamların hayatları olduğunu söyleyebilirim 🙂

AngularJS kütüphanesietiketimiz altında sayfanın en tepesine eklendikten sonra uygulamamıza isim vermemiz gerekiyor. Ben aşağıdaki örneğimde

etiketimde uygulamama isim verdim. Bu arada eğer bu etiketi kullanmazsanız uygulamanız çalışmaz. Her sayfada AngularJS’in kapsamını belirten ng-app etiketi bulunmak zorunda.

AngularJS’te değişkenler 2 süslü parantez ile tanımlanır. Aşağıda çok basit bir örnek paylaştım.

3 * 4 = {{ 3 * 4 }}


Hepsi bu kadar.
Yazıyı yazmaya sonra devam edeceğim. 

AngularJS kullanıpta Batarang eklentisini kullanmayan kalmasın. Çekirdek ekip tarafından çıkarılan extension sayesinde hangi satırda $scope var, yok bilebiliyoruz. AngularJS geliştirecekseniz yada öğrenmek istiyorsanız, hata tespitinde ve kapsamların bilinmesi açısından bu uygulama hayat kurtaran nitelikte. Aşağıdaki linkten indirebilirsiniz.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.