Ali GÖREN Açık Kaynak, JavaScript, Python, .NET RSS

Aurelia Framework

Etiketler: programming javascript aurelia

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:

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

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ü( :D ) 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

$ npm install aurelia-cli -g

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.

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.

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:

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 Code

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 :P

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.

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:

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.

Application Available At: http://localhost:9000
BrowserSync Available At: http://localhost:3001

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:

resources
         \
          attributes (klasör)
          binding-behaviors (klasör)
          elements (klasör)
          value-converters (klasör)
          index.js
app.html
app.js
environment.js
main.js

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.

<template>
  <h1>${message}</h1>
</template>

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

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:

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.

<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 :)

<template>
	<input type="text" ref="messages">
	<button type="button" click.trigger="getMsg(messages.value)">Click</button>
	<h1>${message}</h1>
</template>

app.js

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:

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:

<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.

My name is Yoda

Who Am I

24 Level insanım. Bana aşağıdan ulaşabilirsiniz.

Yorumlar