Angular 2 Serisi: 1- Giriş ve Genel Kavramlar

Angular 2 tamamen, sıfırdan yazılmış bir kütüphane/framework. Yazıya bu cümle ile başlamamın nedeni, Angular 1.x sürümüne yeni özellikler ekleyen bir güncelleme den ziyade, yeni bir mimariyle / bakış açısıyla sıfırdan yazılmış bir kütüphane olması.

Angular 1.x sürümlerini daha önce kullandıysanız, Angular 2 ye daha rahat alışmak, daha verimli kullanmak adına, “controller lar nerde? $scope a ne oldu, providers/factories vs nerde ” demek yerine; Yeni bir framework öğreniyormuş gibi düşünmekte fayda var.

Angular 2 Genel Yapi Sunum.

[fvplayer src=”https://s3.amazonaws.com/yazilimgunluguvideo/angular+2+turkce+sunum.mp4"]

Video da bahsi gecen linkler

http://ngcourse.rangle.io/    (angular 2 kurs ve presantaionlar, ayrica youtube kanalinida bakababilirsiniz. youtebe.com/user/rangleio/videos )

https://github.com/angular/angular-cli    (Angular komut satiri programi)

https://developer.mozilla.org/en-US/docs/Web/Web_Components     (web components)

https://github.com/angular/universal

https://channel9.msdn.com/Events/Build/2016/T627

 

Angular 2 genel yapı

An Angular 2 Application is nothing more than a tree of Components

Yukarıda ki alıntıdan da anlayabileceğimiz gibi, angular 2 tamamen iç içe geçmiş component ler den oluşan bir yapıya sahip.

Component  kavramı için genel olarak aşağıdaki genel tanımı yaparak devam edelim;

<h1> Başlık </h1>  , yandaki html kodunu, tarayıcımız gördüğünde “he demek, boyutları büyük ve yeni bir satir la son bulan bir yazı istiyorsun”  diyerek su şekilde ekrana adapte edecektir (rendering.)

Başlık

<h1> etiketini ve diğer html etiketlerini / tags tarayıcımız nasıl ekrana yansıtacağını bilmekte. Simdi, bir de şunu düşünün.

<ürünler>
<ürün></ürün>
<ürün></ürün>
</ürünler>

Yukarıdaki, ürünler ve urun etiketleri / tags, tarayıcı tarafından ekrana oldukları gibi “sanki bir metinmiş gibi” yazdırılacaktır. Mantık olarak baktığımız da, benim, ekrana  içinde muhtelif adette urun olan, bir ürünler listesi yazdırmaya çalıştığım aşikâr. Ama tarayıcımız, maalesef bu kadar zeki değil.

İşte bu tarz, kendi oluşturduğumuz iç içe geçebilen, bir birlerine bağımlı ya da bağımsız çalışabilen ve isimlendirmesini de geliştiricinin kafasına göre yapabileceği yeni etikler oluşturup, bu etiketleri Javascript ile(çoğu zaman angular, react gibi yardımcı bir kütüphane ile) tarayıcımızın anlayabileceği bir hale dönüştürdüğümüzü düşünün. Sanırım resim biraz daha belirginleşmiştir.

Kısaca, Html içinde ki yapıyı, bir ağaç şeklin de, iç içe geçmiş ana/yavru kod parçacıkları ile organize ediyoruz. Her bir parçaya da Component diyoruz.  Her bir Component, kendi html/css ve javscript ihtiyacını kendi içinde taşıyor.

Components ya da Web Coponents kavramı sadece angular ya da react a ait bir özellik ya da terim değil, iki kütüphanede bu mimariyi temel aldığı için, aklımıza hemen Angular 2 ve React gelmekte ve sanki bu iki kütüphane ile hayatımıza girmiş gibi bir yanılgı oluşabilmek de.

Angular 2 ye geri dönecek olursak, Aşağıdaki resme bakarak devam edelim;

 

angular ve component mimari

Yukarıda ki resimde de anlaşılabileceği gibi, Ana bir componentimiz “<TodoList>” mevcut, bu compnentimiz de muhtelif sayıda, “<todo>” component e sahip. TodoList genel olarak, listelediğimiz ana yapının ihtiyaçlarını karşılamakta ve kendi child/yavru componentlerini de render/yazdırmak da. Ayrıca, her bir “<todo>” component in de ihtiyacı olan veri, “<TodoList>” tarafından, her bir “<todo>” ya sağlanmak da.

<todo>” component de, kendine düşen görevi yerine getirip, Todo.text ve Todo.Checked kısımlarını ekrana yazdırmak da ve kendi etki alanında oluşacak, is yükünü de taşımak da. Örneğin, bir todo yu checked ettiğimiz de gerekli tepki ve işlem, todo component tarafından gerçekleştirilecek.  Örnek bir todo component i su sekil de düşünebiliriz (sahte kod ile);

var todo =  TodoList[n[n]p>

<h2>{{todo.text}} <span> <input type=”checkbox” {{checked:todo.checked}}/></span><h2>

<TodoList >, sayfaya yazdırıldığında, kendi alt componentleri olan <todo> lari otomatik olarak sayfaya yazdıracaktır. Eğer <Todo> component de alt component ler içeriyorsa, oda kendi yavrularını  yazdıracaktır.

Angular 2 de tıpkı ReactJs gibi, component mimari üzerine inşa edilmiş bir freamework.  Uygulamamızı, bir birine ağaç yapısına benzer bir şekilde ana-alt/yavru komponent ler şeklinde geliştireceğiz.

Angular 1.x ile aşina olanlar direktifleri merak edecektir. Angular 2 de hala Directive kavramı olsa da, Componentler Angular 2 için mimaride ana parçalar. Bu arada, şöyle düşünebiliriz, angular 2 içinde component kavramı için “gelişmiş ya da yeni nesil direktifler” diyebiliriz, ama ayni zamanda, Ana yapı Component ler üzerine kurulu. Bunu da akil da tutmak da fayda var.

Component vs Directives

  • Componentler, daha düzgün ve standartlaşmış bir girdi – çıktı sistemine sahipler.
  • Tıpkı react componentlerde olduğu gibi, yasam döngüleri çok daha iyi tanımlanmış.
  • Ve directive ler için her zaman geçerli olmayan, self-describing kavramı, tüm componentler için başlangıç noktası.

Bu arada, react ve angular arasinda, component mimari acisindan muhtemelen en belirgin iki fark ; 1- Angular 2  ile HTML icine JS gommeye devam etmemiz, react tarafinda ise, JS icinde HTML kullanimi olmasi.

React , javascript icinde html

<ul>
  { urunler.map(urun =>
    <li key={urun.id}>{urun.name}</li> 
  )};
</ul>

Angular 2 , html icinde ozel markup ve js

<ul>
  <li *ngFor="#urun of urunler"
    {{urun.name}}
  </li>
</ul>

2- React icinde extends in yerini angular 2 da decorator ler almakta. Bana gore, 1 ci durumda react in yaklasimi, 2. durum icin angular in yaklasimi daha mantikli.

Componentler ile ilgili bu genel girişten sonra, “Angular 2” ile uygulamamızı iç içe geçmiş componentler olarak yazacağımızı, ana noktanın bu olduğunu tekrar edip, Angular 2 component yapısı için detayları örnek uygulamaya bırakalım. Simdi, angular 2 ile ilgili diğer temel kavramlara bakalım.

Angular 2 ve TypeScript

TypeScript ile başlamamın nedeni, angular 2 nin kendisinin de typescript ile yazılmış ve yazılmaya devam ediyor olması.  angular 2 yi geliştiren takım da dahil, resmi olarak olmasa da, gayr-i resmi olarak, “Angular 2 için Lütfen TypeScript kullanın ” demekteler diyebiliriz.  Normal de, TypeScript Angular 2 için bir zorunluluk olmasada, şuan angular team de dâhil birçok bireysel ya da kurumsal geliştirme ortamında angular 2 uygulamaları typescript ile yazılıyor.(typescript defakto mecburiyet de diyebiliriz.)

Biz de bu yazıda TypeScript kullanarak örnek bir uygulama geliştireceğiz. TypeScript şuan da Microsoft çatısı altında  ve Google un da katkısıyla geliştirilmeye devam ediliyor.

Bu seriyi takip etmek için illaki iyi bir TypeScript bilgisi gerekmemektedir, hatta angular 2 ile başlangıç için yeterli sayılabilecek kadar typescript i bu yazı serisinde öğrenebilirsiniz. Sadece sisteminizde yüklü olduğunu var sayıyorum.

TypeScritpt nedir ne değildir? Kurulum  vs.  dâhil merak ediyorsanız bu seri ye bakabilirsiniz.   yada hizli bir baslangic icin bu link e goz atabilirsiniz.

TypeScript için en kısa tanım olarak,

TypeScript = Javascript + Statik Tip Sistemi + Temel Düzeyde Sınıf Tabanlı OO yetenekler gibi bir tanım yapabiliriz.

Bir başka önemli nokta ise, TypeScript tamamen geliştirme sürecinde geçerli bir alt yapı olması, yani tarayıcıda ya da Node. js üzerinde direkt olarak çalışacak yeni bir dil ya da platform değil. Günün sonunda TypeScript ile yazdığımız kod, Klasik (Tarayıcıda ve Node. js) de çalışabilecek Javascript kodu na dönüşmektedir.

Javascript ile kod yazarken, En yeni Javascript sürümü ES2015 i kullanmamıza imkân veren TypeScript, ayrıca, C# dan ve Java dan  aşina olduğumuz, OOP nimetlerinden bir kısmınıda (Geliştirme Sürecinde) uygulamamıza ekleme imkânı sunmakta(interface ler ve statik tip desteği gibi).

Aşağıdaki resim den de anlaşılacağı gibi, Javascript i geliştirme sürecinde genişletene bir yapı. TypeScript dosyalarımız. ts uzantısına sahipler ve TypeScript Compiler tarafından(TSC), bildiğimiz javascript e  donüştürülecekler / transpiler .

typescript-es6-es5

Son olarak, yazdığınız geçerli her JavaScript kodu, typescript için de de geçerlidir. Ayrıca, ES2015(Javascript in yeni versiyonunuzda) typescript ile rahatlıkla “Tarayıcı Bağımlılığını”  düşünmeden kullanabilirsiniz. 

Decorators

En basit haliyle, yazdığımız kodun davranışını değiştiren fonksiyonlardır diyebiliriz. Örneğin, Angular 2 de en çok kullanacağımız dekoratör component decorator e bakalım;

@Component({
selector: 'stok-uygulamasi',
template: `<h2>Ürünler</h2>`
})
class StokUygulamasi {}

Yukarı da @Component({konfigurasyon_nesnesi}) seklinde yazdığımız dekoratör, StokUygulamasi isimli sınıfımızın bir component olarak çalışacağını (Angular 2 bir component olarak ele alacak) ve sınıfın dış dünya ile ilişinkisini de tanımlayacak bazı meta-veri (Üst bilgiler) de içerecek bir sözdizimi.

Burada, @Component ve class StokUygulamasi {}, söz dizimi olarak geçerli bir Javascript (ES5)  kodu değil aslında, Typescript in bize sunduğu bazı imkânları kullanarak böyle bir tanımlama yapıyoruz.

Eğer yukarıda @Component dekoratör u olmasa idi, class StokUygulamasi {}  Angular 2 tarafından bir component olarak görülmeyecek, sadece bir Javascript class olarak algılanacaktı. (“kodun davranışı değişti”)

Zone.js , RxJS ve SystemJs

Sytem. js ile başlayacak olursak, Angular 2 deki önemli değişiklikler den biri, Angular 1 deki gibi bir “module system” bulunmaması.

angular.module(‘modul_ismi’,[]) // angular 1.x module system

yerine, uygulamayı geliştirecek kişinin kendi secimi ile istediği bir modül sistemini kullanması düşünülmüş. Şuan itibariyle, System. js angular 2 için en gözde olanı. Webpack de bir diğer popüler alternatif.

Zone.js ise, Dart dan miras alınmış ve angular 2 nin kendi iç yapısı için de (UI güncellemeleri için bir alt yapı) kullanılan, bizim kendisiyle pek bir isimizin olmayacağı ağır bir abi /  bir ek kütüphane. System.js zorunlu olmasa da, zone.js angular 2 için zorunlu.

RxJS (Reactive Extensions for JavaScript) ; 

Angular 2 için çok ca duyacağınız “Observables”  kelimesinin içini dolduran bir kütüphane.  Angular 2 Zone.js gibi RxJS e de bağımlı. “Observables” kavramı kendi yazısını hak edecek yeni bir eğilim, o yüzden burada kısaca “Angular 1.x surumun de ki promise leri hatırlayın” deyip “Promise lerin yeni ve gelişmiş  sürümü düşünün ” diyerek bırakalım.

Bu konuyla ilgili “Observables”  ayrı bir yazı olacak onu da belirteyim.

ES5 / ES6 – Shim/Polyfills – Traceur / Babel

Bu başlıktaki terimler sadece angular 2 için değil, yeni nesil javascript uygulamaları geliştirme sürecinde, hangi framework u kullanırsanız kullanın az çok duyup / karşılaşacağımız şeyler. O yüzden kısaca değinmekte fayda var.

ES5 ve ES6/ES2015: 

ES5, Bugün en yaygın kullanılan Javascript surumu diyebiliriz. ES6 ya da ES2015 ise Javascriptinyeni surumu. Bu yeni sürümle birlikte, dilin ana yapısı değişmese de, birçok yenilik ve ekleme yapılmış durumda.

EcmaScript 6 ya da EcmaScript 2015, tamamen ayni şeyi işaret etmek de. Sadece;  Javascript dünyasındaki, bir isim kargaşası sonucunda, iki farklı isim kullanılır olmuş. Biz ES2015 i kullanalım. .

ECMAScript nedir? Javascript ile ayni şey midir?

Biraz daha detay için; bu yazıya bakabilirsiniz. Kısaca, EcmaScript, Javascript için standartları belirleyen bir vakıf çalışması diyebiliriz. Ecma international adli vakıf tarafından, yürütülen bir standartlaştırma çabası.

Bu konuyla ilgili bloğa diğer yazılara bakabilirsiniz. Kısaca, ES5 dediğimiz de, bugün hemen hemen tüm tarayıcılar da ve node. js de geçerli olan Javascript kodları, ES6 dediğimiz de ise yeni özellik olarak tanımlanmış, fakat bütün tarayıcılar ya da node. js tarafından  henüz tam olarak desteklenmeyen  javascript kodlarını kast ediyor olacağız.

ES6-to-ES5 transpilers: traceur by Google and babel by the JavaScript community.

Bugün, ES6 ile gelen yeni özellikleri, tarayıcılar ya da node. js tam olarak desteklemese de, bazı araçları kullanarak, yazdığımız ES6 uyumlu kodları(Javascriptin en yeni halini) ES5 e çeviren araçlar var. En bilinen ve başarılı olan iki örneği, Babel ve traceur.

Bu iki aracın yaptığı tek şey, ES6 e uygun yazdığımız Javascript i alıp, ES5 a uygun hale çevirmek. Böylece, tarayıcı, yeni nesil javascript desteğine sahip olmasa da kodlarımızın yine de çalışmasını garanti altına almış oluyoruz ayni zaman da JavaScript in en yeni ozelliklerini de kullanabiliyoruz.

TypeScript ile Babel ya da Traceur a gerek kalmadan bu işlemi yapabileceğiniz gibi, babel ve traceur un yapmadığı, Javascript in dil yapısını genişletmek, yeni özellikleri eklemek(tip sistemi gibi) birçok ekstra yeteneği elde etmiş oluyoruz. TypeScript kullanıyorsanız, babel ya da traceur e ihtiyacınız da yok diyebiliriz.

Build Tools / İnşa Sistemleri

Bu başlık, biraz karışık bir konu ve bu karmaşa sadece angular için değil, tüm javascript dünyası için geçerli bir karmaşa. Muhtemelen son dönemlerde, sıkça duyduğunuz “WebPack, Gulp, Grunt, System.js, Browserify vs.” gibi araçlar la daha önce hiç çalışmadıysanız, kısaca bunlara da değinmek te fayda var.

Bu araçların genel olarak yaptığı şey, yazdığımız kodları, organize etmek, gerekiyorsa bazı dönüşümler ve eklemeler yapmak diyebiliriz. Örneğin, geliştirme sürecinde, her bir Component imizin kendi ayrı dosyası olacak, her bir component i TypeScript ile yazacağız.

Yukarıda bahsettik, Typescript ile yazdığımız kod, javascript e dönüşecek ve ayrı olarak yazdığımız her bir componenti, uygulamamız geliştirme ortamından dağıtıma çıkacağında, önce typescriten javascript e dönüştüreceğiz sonrasında tüm javascript dosyalarını tek bir Javascript dosyasında sıkıştırarak birleştirmemiz gerekecek.(Performans için önemli).

İşte bu ve buna benzer diğer birçok işlemi bizim için otomatik olarak yapacak araçlar a genel olarak build tool / inşa araçları diyoruz.

Biz, ilk başlarda System.js i sonrasında Webpack i kullanacağız. Tekrar etmek de fayda var bu araçlara zorunlu değil ama biraz büyük bir uygulama yazıyorsanız, hoşunuza giden bir tanesini biraz öğrenip kullanmanız da fayda var. Yada, birçok hazır yapılandırma mevcut, Webpack Angular 2 gibi bir google araması ile çok sayıda hazır yapılandırma bulabilirsiniz.

Ben, Yazı dizisi için sade bir sistem hazırladım, onu da yazı dizisi ile kullanabilirsiniz.

Biraz uzun da olsa, bu yazı ile Angular 2 ve bu yeni kütüphanemizin genel ekosistemi hakkında biraz fikir edindik. Sonraki yazılarda, detaylara bakalim İnş.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *