Uygulamalar
Oyun
Yazılım
Yardım
Dota 2
LOL
Silkroad
WOT
Point Blank
Diğer
Yeni
Eski
Haber
Pazar
asp & .net
java
c# c++
python
php
Diğer
Windows
Donanım
Linux
Güvenlik
Program
Modeller
Destek
30-08-2017, Saat: 16:18
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.
![[Resim: aurelia.svg]](https://aligoren.com/images/posts/aurelia.svg)
Başlamadan önce framework’e ait linkleri vereyim:
Key
Value
Web Sitesi
http://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
Alıntı: 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
Kod:
$ npm install aurelia-cli -gDuruma bağlı olarak sudo komutuyla birlikte çalıştırmanız gerekebilir.
Yeni Proje Oluşturma
Yeni proje oluşturmak için
Kod:
au newkomutunu 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 RequireJSseçili.
Kod:
Which module loader would you like to use?
1. RequireJS (Default)
A file and module loader for JavaScript.
2. SystemJS
Dynamic ES module loader
[RequireJS]>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.
Kod:
Would you like to use the default setup or customize your choices?
1. Default ESNext (Default)
A basic web-oriented setup with Babel for modern JavaScript
development.
2. Default TypeScript
A basic web-oriented setup with TypeScript for modern JavaScript
development.
3. Custom
Select transpilers, CSS pre-processors and more.
[Default ESNext]>Çünkü babel kullanabilirim. Bu aşamadan sonra şöyle bir output beliriyor:
Kod:
Project Configuration
Name: au-github
Platform: Web
Loader: RequireJS
Transpiler: Babel
Markup Processor: Minimal Minification
CSS Processor: None
Unit Test Runner: Karma
Editor: Visual Studio CodeSon 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
Kod:
Would you like to create this project?
1. Yes (Default)
Creates the project structure based on your selections.
2. Restart
Restarts the wizard, allowing you to make different selections.
3. Abort
Aborts the new project wizard.
[Yes]>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.
Kod:
Would you like to install the project dependencies?
1. Yes (Default)
Installs all server, client and tooling dependencies needed to build
the project.
2. No
Completes the new project wizard without installing dependencies.
[Yes]>Eğer tüm aşamalar başarılı ise şunu göreceğiz:
Alıntı: Congratulations! Your Project “au-github” Has Been Created!Diyor ki proje dizinine gittikten sonra
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.
Kod:
au run --watchkomutunu 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
Kod:
au build --env prodkomutunu 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.
Kod:
Application Available At: http://localhost:9000
BrowserSync Available At: http://localhost:3001Uygulama 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:
Kod:
resources
\
attributes (klasör)
binding-behaviors (klasör)
elements (klasör)
value-converters (klasör)
index.js
app.html
app.js
environment.js
main.jsDizin 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.
Kod:
<template>
<h1>${message}</h1>
</template>Uygulamanın yazıldığı app.js dosyasında ise hazırda şöyle bir kod bizi karşılamakta:
Kod:
export class App {
constructor() {
this.message = 'Hello World!';
}
}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:
Kod:
export class App {
constructor() {
this.message = '';
}
}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.
Kod:
<template>
<input type="text" value.bind="message">
<h1>${message}</h1>
</template>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
Kod:
<template>
<input type="text" ref="messages">
<button type="button" click.trigger="getMsg(messages.value)">Click</button>
<h1>${message}</h1>
</template>app.js
Kod:
export class App {
constructor() {
this.message = '';
}
getMsg(msg) {
this.message = msg;
}
}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:
Kod:
getUserInfo(username) {
let endpoint = 'https://api.github.com/users/';
fetch(endpoint + username, {
method: 'get',
}).then(resp => {
return resp.json();
}).then(obj => {
this.user = obj;
})
}Bu arada app.html dosyamıza da şöyle basit değişiklikler ekleyelim:
Kod:
<template>
<input type="text" ref="username">
<button type="button" click.trigger="getUserInfo(username.value)">Click</button>
<p>Username: ${user.login}</p>
<p>Name: ${user.name}</p>
<p>Company: ${user.company}</p>
<p>Blog: ${user.blog}</p>
<p>Location: ${user.location}</p>
</template>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.
