Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
UI Mimari Pattern'leri Neden Var? Separated Presentation ve MVC'den Signal'lara Kısa Tarihçe
UI mimari pattern'leri tek bir problemi çözmek için var: ekran kodu ile domain mantığı iç içe geçince ikisi de değiştirilemez ve test edilemez hâle geliyor. Bu yazıda Bookstore'un sipariş formunu tüm mantığı event handler'da olan Smart UI hâlinden Separated Presentation'a taşıyor, view state ile domain state'i ayırıyor ve MVC'den signal'lara uzanan tarihçeyi her pattern'in çözdüğü problemle birlikte görüyoruz.
MVVM ve Presentation Model: Data Binding, Command ve ViewModel
MVVM, Fowler'ın Presentation Model'inin data binding üzerine kurulmuş hâlidir: ViewModel view state'i ve view logic'i taşır, view ile senkronizasyonu binding yapar, kullanıcı aksiyonları CanExecute'u olan command'lara dönüşür. Sipariş formunun ViewModel'ini C#'ta CommunityToolkit.Mvvm 8.4 source generator'larıyla ve Angular 22'de signal'larla yazıyor, ikisini de view olmadan test ediyor ve binding'in sessiz hatalarını gerçek çıktılarla görüyoruz.
Framework'lerde Karşılıkları: Angular MVC mi, MVVM mi? React, Blazor, WPF ve ASP.NET Core
Angular ne klasik MVC ne de saf MVVM'dir: component class bir ViewModel gibi view state ve view logic taşır, template ona bağlanır, signal'lar ise UI'ı React'teki gibi state'ten türetir. Aynı sipariş formunu React, Blazor ve Razor Pages ile de yazıp çalıştırıyor, framework'leri etiketle değil üç soruyla (state nerede, senkronizasyon nasıl, view'sız test mümkün mü) okumayı gösteriyoruz.
Angular'da Unidirectional Data Flow: Signal, input/output ve Service'te State
Angular'da unidirectional data flow, state'in tek sahibinin olması, verinin input() ile aşağı inmesi, değişiklik isteklerinin output() ile yukarı çıkması ve türetilmiş değerlerin computed() ile hesaplanmasıdır. Effect ile yazılan state'in geride kaldığını, model()'in iş kuralını atlattığını ve default OnPush'un yerinde değiştirilen array'i görmediğini gerçek testlerle gösteriyor, state'i signal tutan bir service'e taşıyoruz.
Component Architecture: Container ve Presentational Component'ler, Composition ve Contract'lar
Container component veriyi ve yan etkileri bilir, presentational component yalnız input alıp output ile ne olduğunu bildirir; bu ayrım katı bir kural değil, test edilebilirlik ve yeniden kullanım için bir düşünme aracıdır. Bookstore'un ürün listesini üç component'e bölüyor, input adını değiştirmenin NG8002/NG8008 hatası verdiğini, content projection'ı ve presentational testin ne kadar hafif olduğunu gerçek çıktılarla gösteriyoruz.
Büyük Angular Uygulamasında Sınırlar: Feature Folder, Facade ve Katmanlar
Büyük bir Angular uygulamasında kodu feature'a göre klasörlemek, her feature'ı ui, state, data ve domain katmanlarına ayırmak ve feature'lar arası import'u yalnız public API (index.ts) üzerinden, lint ile zorlanan kurallarla serbest bırakmak gerekir; derleyici bu sınırları bilmez. Üç kestirmenin ng build'den geçip eslint-plugin-boundaries'e takıldığını gerçek çıktıyla gösteriyor, facade service'i ve API client katmanını işliyoruz.