Principled Coder
NgRx Data eklentisi, entity yönetimini basitleştiren bir uygulamadır. NgRx data, entity, effects gibi kavramların uygulandığı örnek bir uygulamayı https://github.com/bayramucuncu/ngrx-todo-app GitHub Repository’yi indirerek inceleyebilirsiniz.
Uygulamada gördüğünüz bir bug veya ihtiyaç duyulan refactoring varsa katkı sunabilirsiniz.
Angular projelerini production ortamına almak için “ng build –prod” komutu kullanılır.
ng build –prod
Bu komutu kullandığımızda üretilen index.html dosyasında bir base href etiketi oluşturulur.
<base href=”/”>
Eğer proje IIS gibi bir http server üzerindeki ana web site dizinden yayınlanıyorsa doğrudan çalışacaktır. Ancak site, ana web site altında bir alt klasörde çalışacak ise, (örneğin “Default Web Site/my-app”) base href etiketi, angular build işlemi sırasında belirlenebilmektedir. Bu durumda çalıştırılan komut şu şekilde olacaktır. (angular deployment)
ng build –base-href /my-app/ –prod
Bu durumda GitBash konsolunun index.html içerisinde oluşturduğu base href parametresi şu şekilde olmaktadır:
<base href=”C:/Program Files/Git/my-app”>
Bu sorun angular cli ile alakalı bir sorun değil, git bash ile alakalı bir sorundur. Bu sorunu gidermek için kullanılacak olan angular komutu aşağıdaki gibi olmalıdır:
ng build –base-href=”//my-app\\” –prod
Angular 6 ve sonrası sürümlerde Angular CLI workspace birimleri sayesinde geliştiricilere bir çalışma alanında birden fazla projede oluşturma imkanı sağlanmıştır. Bu bize birçok proje ve kütüphaneyi aynı çalışma ortamında barıdırma olanağı sunmuştur. Artık büyük uygulamaları küçük modüllere veya küçük uygulamalara bölerek geliştirme özgürlüğüne kavuşmuş oluyoruz. Örneğin ortak bir kullanıcı doğrulama modülünü diğer uygulamalara aktararak tekrar kullanabilme yeteneği kazandırabiliriz. Tekrar kullanılabilir modüller sayesinde kod tekrarları azaltılarak iş akışı kolaylaştırlabilmektedir.
Angular projelerinde kod tekrarlarını engellemek ve tekrar kullanılabilirliği arttırabilmek için modüller veya kütüphaneler kullanılabilir. Angular modüller ve kütüphaneler arasında nasıl bir fark olduğu merak konusudur.
Bir projenin içinde bulunan uygulama bileşenlerini (Components) bir araya getirir. Modüller tüm bileşenlerini kendi kök dizininde barındırır. Bu sayede modül, kullanılmak üzere ihtiyaç duyulan yere aktarılabilir. Bu sayede modülün kullanıldığı uygulamanın modülün içinde olan biten süreci bilmesine gerek kalmaz.
Proje modüllerinin bir çok projede kullanılma ihtiyacı bulunan şirketlerde, modül dizinlerinin projeden projeye taşınması biraz zahmetli olabilir. Ayrıca taşınan modülde yapılan değişikliğin tüm projelere tekrardan dağıtılması zor bir süreçtir. Geliştiricilerin birbirinden uzak ortamlarda bulunduğunda işler biraz karışabilir. Bu durumda modüllerin bir kütüphane haline getirilerek paketlenmesi gerekmektedir. Paketlenen modüllerin versiyonlanması ve npm gibi ortamlarda dağıtılması ile tekrar kullanılabilir kütüphanelerin dağıtımı sağlanmış olur.
Tek başına projeler geliştirenler için modüllerin taşınarak kullanılması daha uygun bir çözüm olabilir. Ancak şirket ortamlarında veya açık kaynak olarak dağıtılacak projelerde kütüphanelerin oluşturulması daha doğru bir yöntem olarak görülmektedir.
Bir sonraki yazıda görüşmek dileğiyle.
RxJS API’nin önemli bir aktörü de Operatörlerdir. Operatörler, gözlemlenebilir nesneler için yardımcı işlemler olarak düşünülebilir. Her bir yardımcı işlem fonksiyonel programlama yöntemine göre fonksiyonlar halinde planlanmıştır. RxJS’de Operatörler 8 alt başlık halinde gruplandırılmıştır.
Bu başlıklar altında onlarca operatör bulunmaktadır. Buradan tüm operatörlere erişebilmek mümkündür. Bu yazıda popüler olanlardan bir kaçını aşağıdaki gibi kullanılmaktadır.
Bir Observable nesne içerisine array, promise veya iterable değerler eklemek için kullanılır.
Birden fazla Observable nesnesini bir dizi elemanı gibi sıraya dizer ve sırayla çalıştırır. Biri bitmeden diğerine geçmez. Bunu, biri bitmeden diğeri başlayamayan işlem sıralaması olarak düşünebiliriz.
Bu işlemin çıktısı aşağıdaki gibi olacaktır.
1, 2, 3, 4, 5, 6, 7, 8, 9
Concat işleminin benzeri olan bu operatörde, birden fazla Observable nesnesini bir dizi elemanı gibi sıraya dizer ancak işlemlerin sırayla yapılması beklenmez.
Bu işlemin çıktısı aşağıdaki gibi olacaktır.
4, 5, 6, 7, 8, 9, 1, 2, 3
Gözlenen verilerde değişiklik yapmak için kullanılabilir.
Bu işlemin çıktısı aşağıdaki gibi olacaktır.
1, 4, 9
Uzak sunucudan bir Ajax talebi yapmak için kullanılır.
Bu işlemin çıktısı sunucudan gelen JSON response olacaktır.
RxJS kütüphanesinde bulunan Operatorler konusu örnekler ile desteklenerek açıklanmıştır.
RxJS ReactiveX API’sinin Javascript programlama diline kullanılmak üzere yazılan uygulamalardan biridir. Geliştiricilere, tepkisel olaylar (events) üzerinden güçlü ve işlevsel bir fonksiyonel yaklaşım sunar. Bunların yanında giderek artan kütüphane ve yardımcı araçları ile geliştiricilere kullanım kolaylığı sağlamakta ve popülerliği artmaktadır.
RxJS reaktif programlamanın bir uygulaması olduğundan dolayı imperative gelenekteki bir programcı için ilk başta öğrenilmesi biraz zor gelebilir. Çünkü fonksiyonel programlama, declerative gelenekte uygulanan bir paradigmadır. Programlama dillerinin sınıflandırmasında bunu görebilmek mümkündür.
RxJS uygulaması yapmak için iki farklı yol izlenebilir:
Bana göre basit olan yöntem Angular projesi oluşturmaktır. Angular projesi oluşturmak için npm komutları kullanılır. Bir projeyi üç adımda oluşturmak mümkündür.
Angular projesinin yönetimini ve çalıştırılmasını sağlayan global Angular CLI yüklenme adımıdır. Bunun için gerekli olan komut:
npm install –g @angular/cli
Uygulama için gerekli dosya ve dizinlerin oluşturulması adımıdır. Bu adıma, çalışma ortamının (workspace) hazırlanması da denir. Bu işlemi bir önceki adımda yüklenen Angular CLI komutları yürütür.
ng new my–app
Artık uygulama dosyaları yüklenmiştir ve aşağıdaki gibi bir dizin oluşturulmuştur.
Uygulama dosyaları src/app dizininde bulunmaktadır. Dizinde bulunan diğer dosyaların ne işe yaradığı bu yazının konusu değildir.
Angular uygulamasını çalıştırmak için Angular CLI komutları çalıştırılır.
cd my–app
ng serve —open
Bu komut ile Angular uygulaması, varsayılan tarayıcıda açılarak başlatılacaktır.
Angular projesinde rxjs kodlarını çalıştırmak için Angular projesinde bir typescript dosyası kullanılabilir. app.component.ts dosyası içerisine bir Observable tanımlamak için aşağıdaki gibi bir komut kullanılabilir.
RxJS kodlarını çalıştırmak öncelikle ‘rxjs’ modülünün yüklenmesi gerekmektedir. Bunun için gerekli komut:
import {from} from ‘rxjs’;
RxJS kütüphanesinde Operators ve Subjects olmak üzere iki önemli başlık bulunmaktadır. Sonraki yazılarda sırayla RxJS Subjects ve Operators konuları ele alınacaktır.