31 Ekim 2013 Perşembe

AngularJS - Data Binding

Data binding, AngularJS'in öne çıkan özelliklerinden biridir. İki tür data binding yaklaşımı vardır:

  1. One-way data binding: Klasik template(ek markup ve directive'leri içeren, derlenmemiş HTML) sistemlerinde bu data binding türü kullanılmaktadır. Modelinizde yaptığınız bir değişikliğin sayfanızda da görünür kılınması için; gerekli senkronizasyon kodunu kendiniz yazmanız gerekir.
  2. Two-way data binding: Angular template sistemlerinde bu data binding türü kullanılmaktadır. Sayfanızda veya modelinizden herhangi birinde yaptığınız değişiklik diğerinde görünür olacaktır. Ekstra kod yazmadan Angular bu işi bizim yerimize nasıl yapıyor peki? Bunu yapmak için, modelinizin bir önceki değerini saklıyor ve modelde herhangi bir değişiklik yapıldığında, ilgili nesnenin change event'ini çağırıyor. Bu karşılaştırma basit bir "dirty-checking"dir ve bu işi Angular bizim için yürütüyor.
Data binding örneği:
Ön koşullar:
1. http://angularjs.org/'dan AngularJS'in minified sürümünü indirin.
2. İndirdiğiniz .js dosyası ile aynı dizinde bir html dosyası oluşturun ve örnekteki içeriği bu html sayfasına kopyalayıp test edin.
<html ng-app>
    
        
        Angular Test Page
        
    
    
        

Selam {{ name }}

</html>
Tabi tüm bu adımlarla uğraşmadan, html üzerinde oynama yapmak istiyorsanız, benzer kodda Plunker üzerinde burada çalışabilirsiniz.
Kodu inceleyecek olursak; hmtl etiketindeki ng-app directive'i, bu html'in bir Angular uygulaması olduğunu ifade ediyor ve auto bootstrap sağlıyor. Angular directive'leri ile ilgili daha sonra ayrıntılı yazacağım. ng-model="name" ise; ilgili input nesnesine property olarak "name" ismini veriyor. Artık bu model ismini(name) html içerisinde kullanan her nesne, bu model üzerinde yapılacak değişiklikten haberdar olacaktır. {{name}} kullanımı ile, "name" ismindeki model içeriğini html sayfamıza gömüyoruz. Angular'da data-binding {{model ismi}} şeklinde yapılır.
Aynı işi jQuery kullanarak yapmak için; html içerisinde bir script bloğu içerisinde, input nesnesine eriştikten sonra ona bir listener eklememiz gerekecekti. Angular kullanarak bu işi ne kadar kolay ve okunaklı bir şekilde yapıldığını test edebilirsiniz.

30 Ekim 2013 Çarşamba

AngularJS

AngularJS, Google tarafından sürdürülen, açık kaynak kodlu (MIT license) bir Javascript framework'üdür. AngularJS'in amacı; model–view–controller (MVC) mimarisine sahip web uygulamarının gerçekleştirim ve test sürecini daha kolay hale getirmektir. Diğer Javascript framework'lerini HTML sayfaları içerisinde kullanırken, uygulama büyüdükçe, zamanla sayfa içerisinde kullanılan JS kodlarının okunması,anlaşılması ve bakımı oldukça zorlaşır. Angular bu noktada çok ciddi bir kolaylık sağlıyor. Oldukça aktif bir topluluğu ve harika bir dökümantasyonu var. Javascript ile uğraşıyorsanız, kesinlikle bir göz atın derim.

16 Ekim 2013 Çarşamba

Plunker

Web uygulamaları geliştirme sürecinde, birlikte çalıştığın ekiple karşılaştığın bir problemi veya bir senaryoyu paylaşmak istediğinde; çoğu zaman topluluğa uzunca bir mail yazarsın, kod bloğunu vs. o mailde anlatmaya çalışırsın ve fikir alışverişi yapacak kişinin de paylaştığın o kodu alıp, senin senaryonu oluşturma zahmetine katlanmasını bekleyebilirsin. Bu tarz durumlarda en mantıklı olanı; yardım istediğin kişilere test ortamını hazır bir şekilde sunmak ve bu süreci olabildiğince kısaltmaktır. Bu durumda Plunker aracını kullanabilirsiniz, oldukça işinize yarayacağını düşünüyorum. Plunker'ın öne çıkan bazı özellikleri:

  • Özelleştirilebilir syntax editor
  • Code linting: Kod yazdığın esnada hata kontrolü
  • jquery, bootstrap, knockout, google-maps gibi pek çok paketi anında kodunuzda kullanıma hazır hale getirebilirsiniz
  • MIT lisanına sahip, açık kaynak kodlu
  • Github'a entegre bir uygulama şeklinde kullanılabiliyor

10 Ekim 2013 Perşembe

Yaşıyorum!

Çok uzun süredir bir şeyler yazmadığımın farkındayım. Bir süre ara verdikten sonra, bir şeyler yazmak daha da zorlaşıyor doğrusu.
Blog'dan uzak kaldığım sürede pek çok şey oldu aslında. Yaklaşık bir sene eğitim için Londra'daydım. Daha sonra askerlik, Huawei R&D'de işe başladım, son olarak da Haziran ayında evlendim :)
İtiraf etmek gerekirse; bu sırada herhangi bir özgür yazılım projesi veya kişisel bir proje ile ilgili bir çalışma yapmadım. Şirkette yazılım mühendisi olarak çalıştığımdan dolayı; elbette çeşitli JAVA teknolojileri, ORACLE, veritabanı vs. ile ilgili işler yapıyorum ama bunlar standart işler olduğu için; teknik olarak bahsedebileceğim özel bir şey olduğunu düşünmedim. Hele ki yanında seni teşvik edecek bir Necdet Hoca'n olmayınca, bu işi hepten boşlayabiliyorsun gerçekten :)
Bu kadar miskinlik yeter bence. Henüz ne ile ilgili bir şeyler yapacağıma karar vermedim ama ne olursa olsun, önemli, paylaşmaya değer gördüğüm tecrübelerimi buraya yazacağım.