Angular Forms – Template vs Reactive
Giriş: Form Nedir? Sadece Input mu? Form = Kullanıcıdan veri almak. Ama sadece <input /> koymakla iş bitmez. İhtiyacın olan şey:
Validasyon (giriş kontrolü) Veri toplama Dinamik alanlar (birden fazla e-posta vs.) Submit işlemi Temizleme, resetleme Form state takibi (dirty, touched, valid…) İşte Angular burada iki yol sunar: Template-Driven ve Reactive Forms
Angular’ın Bakışı: “Form bir bileşen değil, bir state’tir.” Bir input’a sadece veri bağlamazsın.
Değeri ne? Değişti mi? Hata var mı?…
Read more ⟶RxJS ve Angular’da Reaktif Programlama
Reaktif programlama Nedir? Şöyle düşün:
Bir şey değiştiğinde, başka bir şey otomatik değişsin istiyorum
Bu fikir temel olarak reaklam panosuna benzer. Panoya fiyatı asarsın, her yerde o fiyat görünür. Ama panoya yeni fiyatı yazdığında tüm afişler otomatik güncellenir.
Buna veri akışına tepki verme yani reaktif olma denir.
RxJS Nedir? RxJS, “Reactive Extensions for JavaSript” anlamına gelir. Yani: “JavaScript’e reaktif yetenek ekleyelim” projesidir.
Angular, fromdan HTTP’ye router’dan event’lere kadar her şeyi Observable sistemiyle yönetir.…
Read more ⟶Lazy Loading
Lazy Loading Nedir? Lazy Loading, Türkçesiyle tembel yükleme, uygulamamızdaki bazı modülleri ilk başta yüklememek, sadece ihtiyaç duyulduğunda (örn. bir route ziyaret edildiğinde) yüklemek demektir.
Ana fikir:
“Her şeyi başta yükleme, kullanıcı neye tıklarsa onu getir.”
Neden Lazy Loading? Angular projeleri büyüdükçe, bundle (paket) boyutu artar. Bu neye yol açar?
İlk yükleme süresi uzar Kullanıcı daha uygulamayı görmeden bile MB’larca veri iner Özellikle mobil kullanıcılar için felaket olabilir Lazy Loading buna çare olur:…
Read more ⟶Signals
Angular Signals - Yeni Nesil Reaktivite Neden Böyle Bir Yapıya İhtiyaç Duyuldu?
Angular uzun yıllardır reaktif programlama ihtiyaçlarını karşılamak için RxJS kütüphanesini kullanıyordu. Observable Subject pipe map switchMap subscribe unsubscribe gibi yapılar bu sistemin parçalarıydı.
Ancak bu yapı:
Öğrenilmesi karmaşık Hatalara açık Basit senaryolarda gereksiz yere ağır hale gelebiliyordu. Angular ekibi bu sebeple daha basit, daha doğal, daha az kodla daha çok şey yapılabilen bir yapı üzerinde çalıştı. Ve Signal ortaya çıktı.…
Read more ⟶angular.json
Bu Dosya Nedir? angular.json, bir Angular projesinin yapılandırma dosyasıdır. Angular CLI, bu dosyaya bakarak:
Projenin nerede başladığını Hangi derleyici ayarlarının kullanılacağını Build, test, lint, serve komutlarında ne yapılacağını Uygulama yollarını, stilleri, scriptleri gibi yüzlerce detayı öğrenir ve uygular.
Bu dosya olmadan Angular CLI, projeyi nasıl çalıştıracağını bilemez.
angular.json Nerede Bulunur? Her Angular projesinde, projenin kök dizininde bulunur:
/app ├── src/ ├── angular.json ├── package.json ├── tsconfig.json angular.json’un Genel Yapısı { "$schema": ".…
Read more ⟶Zoneless Nedir?
Angular deyince akla genelde component’ler, service’ler falan gelir ama içerde bir mimari var ki, senin haberin bile olmadan bütün uygulamanın kaderini etkiliyor:
Zone.js Bu yazıda Zone.js nedir, ne iş yapar, neden Angular artık onsuz olmaya çalışıyor ve bu neye çare olabilir… hepsine tek tek gireceğiz.
Zone.js Nedir? Kısaca:
Zone.js, JavaScript’teki async olayları izleyen bir kütüphanedir.
Yani sen setTimeout, fetch, Promise, addEventListener falan kullandığında, Angular’ın “bir şey oldu galiba” deyip yeniden UI güncellemesi yapmasını sağlar.…
Read more ⟶Internationalization ve Localization - Angular Çok Dillilik Meselesi
Uygulamanı yazdın, harika çalışıyor. Ama bir gün Product Manager gelip şöyle diyor:
Yani uygulama çok güzel ama… bunu Almanca da yapabilir miyiz?
Yani “Kullanıcıya Giriş Yap değil de Anmelden yazsın.
Senin iç sesin:
Hay aq… O kadar JSON’u kim yazacak, her yere this.text = translations[this.currentLang][“blabla”]; diye mi koyacağım
Ama korkma dostum, Angular bu konuda çözümler sunmuş.
Önce Temel Kavramları Oturtalım | Terim | Anlamı | | ------------------------------- | -------------------------------------------------------------------- | | Internationalization (i18n) | Uygulamanı çok dilli hale getirme hazırlığıdır.…
Read more ⟶Monorepo Nedir?
Ne Bu Monorepo? Projeyi yazıyorsun, her şey yolunda. Sonra ekip büyüyor. Frontend bir yerde, backend başka yerde, ortak UI bileşenleri başka bir repo’da…
Bir noktada kendini şöyle derken buluyorsun:
Abi şu ui-kit’i güncelledim ama 3 farklı repo’da aynı şeyi elle publish’lemek zorundayım
İşte burada Monorepo devreye giriyor.
Monorepo = Tüm projelerini, kütüphanelerini, app’lerini tek bir Git deposunda toplamak.
Tek repo. Tek hayat. Çok huzur (doğru kullanılırsa).
Polyrepo vs Monorepo | Özellik | Polyrepo | Monorepo | | ------------------- | --------------------------- | ------------------------------ | | Kod yapısı | Her proje ayrı repo | Her şey tek repo içinde | | Versiyonlama | Her repo kendi içinde | Ortak versiyon yönetimi | | Ortak kod paylaşımı | Zor, publish gerekebilir | import ile direkt erişim | | CI/CD | Her repo için ayrı pipeline | Ortak config ile yönetilebilir | | Bağımlılık takibi | Dağınık | Merkezi | Ne Zaman Lazım Olur?…
Read more ⟶