Aurelia Framework

Bu yazıda size Aurelia frameworkten biraz bahsedeceğim. Aurelia, diğer web frameworkler gibi single page application geliştirmenize izin veren, mobil, web ve masaüstü client framework olarak tanımlıyor kendisini.

Başlamadan önce framework’e ait linkleri vereyim:

KeyValue
Web Sitesihttp://aurelia.io/
Doküman Sayfasıhttp://aurelia.io/hub.html
Github Sayfasıhttps://github.com/aurelia/framework

Yazıda bahsedeceğim Github projesine https://github.com/aurelia-project/au-github adresinden ulaşabilirsiniz.

Özellikleri

Framework’ün anasayfasında aslında özellikler belirtilmiş ama tekrar belirtmemiz gerekebilir diye yazmak istiyorum.

İleri Görüşlülük

Aurelia, kendisini ileri görüşlü olarak tanımlıyor. ES’in yeni sürümleriyle yazıldığını belirtiyor. Bu kısımda size

Geleceğin teknolojisini kullanın ama bugünün masaüstü, web ve mobil platformlarını da hedefleyin –

diyor kısacası.

Modern Mimari

Aurelia, monolitik frameworkleri takip etmek yerine modüler bir yapıya odaklanmış durumda. Bu da Aurelia’yı tam teşekküllü( 😀 ) bir framework olarak kullanmanıza imkan tanıdığı gibi ihtiyacınız kadar componenti kullanmanıza da imkan tanır bir hale getiriyor.

Çift Yönlü Data Bind

Aslında sitede two-way data binding olarak geçiyor da dilimize nasıl aktaracağımı bilemedim. Angular kullananlar da biliyorlardır muhtemelen. Sayfada ya da model tarafında yapılan bir değişiklik, diğerinde de görünür hale geliyor. Yani bunun için gidip ekstra kod da yazmıyorsunuz. Bu yöntem modelin bir önceki değerinin saklanmasına, herhangi bir değişiklik durumunda nesnenin değişikliğinin kontrolüne dayanıyor. Bu konu için observer pattern ve dirty checking kavramlarına bakmanız gerekiyor.

Custom HTML element, routing, testable olmasının haricinde ES5, ES 2015, ES 2016 ve TypeScript kullanabiliyorsunuz. Özellikleri çok fazla uzatmak istemediğim için biraz kısaltmak durumunda kaldım diğerlerini yazmadım.

Başlangıç

Başlarken DOC Hub‘a göz atmanız gerekiyor. Açıladan sayfada sol menüde I am a developer kısmına tıklayarak açılan menüden Aurelia hakkında nasıl öğreneceğinize dair farklı yöntemler seçebilirsiniz. Bu seviyenize bağlı olarak yönlendirme aslında. Aynı şeyi sağ tarafta yer alan kısımda da yapabilirsiniz. Burada gözüme ilk çarpan şey CLI oldu. Evet artık vazgeçilmez bir şey var ise oda CLI. Aurelia official olarak CLI sahibi.

Aurelia CLI

Aurelia CLI’ı kurmak için bu adresi ziyaret edebilirsiniz. Ama basitçe ben de anlatayım.

Kurulum

Duruma bağlı olarak sudo komutuyla birlikte çalıştırmanız gerekebilir.

Yeni Proje Oluşturma

Yeni proje oluşturmak için au new komutunu konsoldan veriyoruz. Bu komutu kullandığımızda, öncelikle oluşturacağımız uygulamanın adını soruyor bize. Ben github’dan basit bi içerik çekeceğim için adını da au-github olarak tanımladım. Bu arada au öneki zorunlu değil. Bakmayın ben öyle yaptım diye.

Sonraki adımda size hangi loader’ı seçeceğinizi soruyor. Şu an için SystemJS ve RequireJS ön tanımlı olarak CLI’da tanımlı geliyor. Default olarak RequireJS seçili.

Bir sonraki adım ise geliştirme ortamınızla alakalı. Default seçim ESNext olarak belirtilmiş. Aam bunun haricinde TypeScript kullanabileceğiniz gibi custom transpiler da seçebilirsiniz. ESNext seçimini yapıyorum.

Çünkü babel kullanabilirim. Bu aşamadan sonra şöyle bir output beliriyor:

Son aşamada size projeyi yaratmak isteyip istemediğinizi soruyor. Yes default olarak geliyor ama tüm bu aşamaları tekrar yapmak için 2. seçeneği seçip Restart diyebilirsiniz ya da 3. seçenek ile proje yaratma işlemini iptal edebilirsiniz. Neyse ki biz Yes diyeceğiz 😛

Ardından projenin tüm bağımlılıklarının yükleneceğine dair bir sorusu var. Eğer yes derseniz server, client ve projeyi build etmek için bağımlı olan ne varsa yükler. Hayır demeniz durumunda projeyi oluşturur ancak herhangi bir bağımlılık yüklenmez. Bu durumda elle yüklemeler yapmanız gerekebilir. Bunun avantajı, gereksiz birçok şeyi yüklememiş olacaksınız. Ama Yes diyelim. Bu aşamada NPM yardımıyla projenin bağımlılıkları yüklenecektir.

Eğer tüm aşamalar başarılı ise şunu göreceğiz:

Congratulations! Your Project “au-github” Has Been Created!

Now it’s time for you to get started. It’s easy. First, change directory into your new project’s folder. You can use cd au-github to get there. Once in your project folder, simply run your new app with au run. Your app will run fully bundled. If you would like to have it auto-refresh whenever you make changes to your HTML, JavaScript or CSS, simply use the –watch flag. If you want to build your app for production, run au build –env prod. That’s just about all there is to it. If you need help, simply run au help.

Diyor ki proje dizinine gittikten sonra au run --watch komutunu kullanarak projeyi ayağa kaldırabilir ve ne değişiklik yaparsan anında auto-refresh edebilirsin. Eğer ki projeyi production için build edeceksen de au build --env prod komutunu kullanman yetecektir. Biz önce bi başlatalım 🙂

Uygulama iki adet port açar. Birisi browsersync için. Bu port senkronize işlemleri gerçekleştirirken, uygulama portu bundan farklıdır. Sizde şöyle olması muhtemel.

Uygulama dizininde yer alan src klasörüne girerek basit bir uygulama yapabiliriz diye düşünüyorum 🙂 Her basit örnekte olduğu gibi bir textbox’ta yazılanı bir başka HTML elementine atayacağız. Böyle başlayalım.

Uygulama Yapısı

Uygulamanın src dizini şu şekilde görünmekte:

Dizin ve dosya yapısını gördük. Kısaca app.html dosyası ilk açılışta VueJS’ten görüp bildiğimiz template etiketleri arasında geliyor.

Uygulamanın yazıldığı app.js dosyasında ise hazırda şöyle bir kod bizi karşılamakta:

Bu şekilde anasayfa basit olarak Hello World yazısı görürüz. Fakat hala daha bu içeriği dinamik hale getirebilmiş değiliz. Öncelikle app.js dosyamızda düzenlemeyi şöyle yapalım boş bir içerik bizi karşılasın:

Ardından da app.html dosyamızı value bind edilebilir hale getirelim. Bunu yaparken de modeli constructorda tanımlı olan mesaj property’sine değer gönderelim.

Yazmaya başladığınız anda otomatik olarak h1 etiketinin içeriğinin de değiştiğini fark etmişsinizdir sanırım. Şimdi biraz daha işi ilerletip referans elementten değeri alalım, bu değeri metod yardımıyla h1’e atayalım.

app.html

Aşağıdaki kodda input elementine ref isimli bir attribute verdik. Bu attribute, kullanıldığı yerlerde ayırıcı görevi de görmekte. Buton elementinin click.trigger özelliği ile de aşağıda yer alan getMsg fonksiyonunu çalıştırabildik. http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-delegate-vs-trigger adresinde daha kıymetli bildiler yer almakta 🙂

app.js

Github’dan Veri Çekelim

Şimdi işi uzatmadan kullanıcı adına göre github’dan veri çekelim ne dersiniz? Öncelikle HTTP tarafında aurelia hazır bir componente sahip. Onu kullanabiliriz ya da bildiğimiz gibi fetch metodunu kullanabiliriz. Ben fetch metodunu kullanacağım.

Şimdi getMsg adındaki fonksiyonumuzu getUserInfo olarak değiştirelim. Kodlarımızı içeride yazacağız. Bu fonksiyon inputtan gelen kullanıcı adı değerini alıp github’a istek yapacak.

Uzatmadan github’dan veri çekecek metodumuz şöyle olsun:

Bu arada app.html dosyamıza da şöyle basit değişiklikler ekleyelim:

Bazı basit bilgileri alabilmemiz açısından 🙂 Çok uzatmış olmanın verdiği rahatsızlıkla kısa kesmek durumunda kalıyorum. Ama routing gibi mevzuları da bulunmakta. Bunlar ayrı bir yazının konusu olabilir.

admin

Hi. I’m Ali. I’m 23. I graduated Mehmet Akif Ersoy University from CS Related Department.

I can code with all programming languages. But today I’m writing .NET and JavaScript.

You may also like...