Angular 2 – Bitmeyen Bir Workshop’ın Ardından

İstanbul JUG, Kodcu.com ya da KWorks etkinliklerini takip ediyorsanız muhtemelen 14 Ocak’ta yaptığımız Angular 2 Workshop’ından haberiniz vardır; hatta haberiniz varsa muhtemelen “geleceğim” diye kaydolmuşsunuzdur. 200 kişinin üzerinde olumlu RSVP alan güzide etkinliğimize 30 kişi kadar katıldı. Katılmayanlara kırgın değilim ama katılanlara da teşekkürü bir borç bilirim.

Başlığı “bitmeyen bir workshop’ın ardından” diye atmamın da bir nedeni var: Toplamda 4,5-5 saat sürmesini beklediğimiz workshop’ı 7 saatte bitiremedik! Zamanı yeterince iyi kullanamamış olmamıza rağmen katılanların olumlu görüşleri için yeniden teşekkürler; topluluğa bir faydamız olduysa ne mutlu.

Angular JS ilk çıktığı zamanda – tabii ki en büyük paydaş google’ın da adının etkisi ile – oldukça hızlı bir popülerlik yakalamıştı. Angular 2 ise daha TypeScript yöneliminin de faydasını görerek daha yapısal bir şekil alması ile birlikte selefinden daha da hızlı ilgi çekti. Peki neden ibaret bu Angular 2, nedir asıl mesele?

TypeScript – Nereden Çıktı Şimdi?

TypeScript, er meydanında yeni bir oyuncu ve ECMAScript 6’nın türler üzerine yapısallaştırılmış bir üst kümesi olarak tasarlanmış. TypeScript “type-safe” bir betik dili ve istemci tarafında çalıştırılmadan önce derlenerek JavaScript’e “çevriliyor”. Böylece ECMAScript 6 standardını destekleyen bütün tarayıcılarda çalışan bir kod yazmış oluyoruz.

Bunun yanında; kod yazma sırasında yapılan söz dizimi, tür dönüşümü ya da yanlış parametre kullanımı gibi hatalardan derleme zamanında; kod henüz teste bile girmeden haberimiz olur.

Kısacası Angular 2 TypeScript ile, “type-safe” dillerde yazılım geliştirilirken kullanmaktan tuhaf bir haz duyduğumuz pratikleri JavaScript’e en yakın şekilde kullanabilmemizi sağlıyor. Tişikkürler Maykrosoft ve Engulır…

Her Şeyin Başı “Hello World”

Not: Bundan sonraki kodları derlemek ve çalıştırmak için NodeJS 6+ gerekli.

Angular 2 ile yazılım geliştirmek (ön yüz demiyorum; yazılım diyorum) için farklı ortamlar, ya da farklı kütüphaneler kullanılabilir ancak hem kullanım kolaylığı hem de daha az “aracı” kitaplık kullanmak için Angular’ın sitesinde verilen “quickstart” örneğinden ilham alınarak hazırlanmış olan https://github.com/ajitatif/barinakta-ui-workshop.git klon edilebilir.

Madem ki bir web uygulaması yapıyoruz, giriş noktası index.html’deki şu kesite bir bakalım:

Buradaki her satırın ayrı önemi var:

  • shim.min.js özellikle en sevdiğimiz tarayıcı olan Internet Explorer’ın eski sürümlerinde bulunmayan standart JavaScript özelliklerini kullanabilmek için,
  • zone.js Angular 2 için gerekli işlem kapsamları (biz “backbone”cuların ThreadLocal olarak bildiği şeyin bir benzeri) desteğini sağlamak için,
  • system.src.js Angular 2’de modülleri ve sınıfları yeniden kullanırken başvurduğumuz JavaScript modüllerinin import edilebilmesi için,
  • systemjs.config.js SystemJS’in konfigürasyonunu tutmak için,
  • System.import bir önceki satırda bulunan systemjs.config.js dosyasında tanımlı “app” modülünü import etmek için kullanılır.

systemjs.config.js dosyasında da ‘app’ modülünün tanımına bakalım:

**
Yani diyor ki: “ben olur da ‘app’ modülünü import etmeni istersem, ‘app’ dizini altındaki ‘main.js’ dosyasını modülün giriş noktası olarak kullan”.

main.js’i inceleyerek devam edelim. Aa, app dizini altında main.js diye bir dosya yok, yalnızca main.ts var!

Ne demiştik? TypeScript derlenecek; JavaScript olacak. Hemen projenin olduğu dizinde aşağıdaki komutları çalıştıralım:

npm install

npm start

main.ts

main.js

main.ts ya da main.js de “app.module”’ü işaret ediyor.

İşte biraz Angular 2 görmeye başladık. @NgModule “dekoratörü”, AppModule sınıfının bir Angular modülü olduğunu, parametrelerinde ise “BrowserModule”ü kullandığını, AppComponent bileşenini tanımladığını ve modülün giriş noktasının AppComponent olduğunu (bootstrap parametresi ile) belirtir.
Hello World’de son durağımız “bootstrap” ile modülümüzün giriş noktası olarak belirttiğimiz “AppComponent” bileşeni.

Angular’ın bu uzun yolculuğunda varış noktamız bizi yeniden index.html’in body’sinin içindeki <barinakta-app> HTML etiketine götürdü. Angular, AppModule ayağa kalktığı gibi “barinakta-app” etiketini gördüğü yere bu etiketi “selector” olarak tanımlamış olan bileşeninin şablonunu yapıştırır. Örneğimizde, bu etiketi seçmiş olan AppComponent kıvançla yerini alır ve şablonunda yer alan {{ }} arasındaki ifadeyi değerlendirerek “Hello Angular” yazar.

Bir bileşenin şablonu içinde, o bileşen içindeki yordamları, alanları ve hatta bileşenin import ettiği diğer sınıf, bileşen ve servisleri kullanabiliyoruz ve Angular bu sayede bize tek-çift yönlü bağlama, olaylar, borular (eski Angular’daki filtreler), ve benzeri pek çok özelliğini güzelliğini sunma fırsatını yakalıyor.

Bileşenler, Modüller, Borular, Formlar, i18N, Promise’ler, Observable’lar, Servisler, Dışarıdan Modül Kullanımı ve Methîyye

14 Ocak’ta KWorks’te yaptığımız Workshop çalışmasında bütün bu konulara değindik. Beklediğimiz ve arzuladığımızdan daha uzun sürdü ama güzel vakit geçirdik ve oldukça çok şey öğrendik.

Eğer siz de Workshop’a gelenlerdenseniz öncelikle teşekkür ederim geldiğiniz için ve konuyu haddinden fazla uzattığım için yeniden özürlerimi kabul buyrun.

Eğer Workshop’a gelmeyenlerdenseniz takipte kalın, daha çok etkinliğimiz olacak !

Sevgiler,

G.

No Comments

Post a Comment

Comment
Name
Email
Website