MVVM konusunda tonla İngilizce makale olmasına rağmen Türkçe içeriğin (her zaman ki gibi) eksik olması ve Türkiye'de bilinirliğini arttırmak amacıyla MVVM hakkında bir makale yazmayı düşünüyordum. .NET Framework teknolojileriyle ilgili yazılım geliştiricilere yönelik çıkması planlanlanan ancak çeşitli sebeplerden dolayı iptal edilen bir dergi için aylar önce yazdığım orijinal makalemi bu amaçla düzenleyerek - ve bir blog postu için uzun olduğu için bölerek - sizlerle paylaşıyorum.

1. WPF ile Model View ViewModel: Giriş
2. WPF ile MVVM: Model
3. WPF ile MVVM: View
4. WPF ile MVVM: ViewModel
5. WPF ile MVVM: Parçaları Birleştirmek
Seriye ait kaynak kodlar: MvvmWithWpfSample.rar (245,34 KB)

Model View ViewModel (MVVM), son günlerde adı sıkça duyulan ve genellikle WPF ile birlikte kullanılan bir mimari tasarım kalıbıdır. Bu makale ile başlayarak WPF’den bahsedip, MVVM’in bileşenlerinin neler olduğuna ve nasıl oluşturulup kullanılacağına değinmeyi düşünüyorum. İlerleyen makalelerde örnek olmak amacıyla basit bir MVVM uygulaması da geliştireceğiz. Tasarım kalıbından bahsetmeden önce, platform olarak kullanacağımız WPF kütüphanesine kısaca değinelim.

WPF


Çoğunuzun bildiği gibi, Windows Presentation Framework (WPF) önümüzdeki dönemde klasik Windows uygulamaları için Microsoft'un tercih ettiği GUI (Graphical User Interface - Grafik Kullanıcı Arabirimi) teknolojisidir. WPF ile, Microsoft, eskiyen grafik arabirim teknolojisi GDI/GDI+'ı bırakıp DirectX üzerine kurulu bir yeni bir model oluşturdu. DirectX kullanımı sayesinde WPF ile yeni görsel efektler (animasyonlar, grafik dönüşümler) ve arka planda donanım hızlandırması kullanımı da mümkün hale geldi. Görsel ve donanımsal iyileştirmelerin yanı sıra, WPF ile birlikte yeni bir yazılım geliştirme modeli de geldi. Bu yeni modele göre, sunum ile ilgili yazılım bileşenleri XML tabanlı Extensible Application Markup Language (XAML) dili kullanarak görsel tasarımcılar (veya yeni tabiriyle UX – user experience, yani kullanıcı deneyimi tasarımcıları) tarafından geliştirilirken, geri kalan uygulama mantığının klasik yazılım geliştiriciler tarafından geliştirilmesi planlandı. Ancak bu çalışma modelini destekleyerek geliştiricileri yönlendiren bir tasarım kalıbı olmadan, görsel bileşenlerin uygulama kodları arasına sızması, en azından büyük projelerde büyük bir olasılıktır. Sebebi ise her XAML dosyasının, içindeki görsel bileşenlerin tanımlandığı eş sınıfını tutan bir .xaml.cs uzantılı “code behind” dosyasına sahip olmasıdır (Yazılım geliştirme ortamının Visual Studio olduğunu varsayıyorum). Bu code behind sınıfı ile GUI bileşenlerine ulaşıp, değişiklik yapması söz konusudur. MVVM uygulamalarımızda iş mantığını GUI mantığından mümkün olduğunca ayırmak amacıyla code behind’ı kullanmamaya çalışırız.

WPF özellikle barındırdığı güçlü Binding yani bağlama mekanizmaları sayesinde MVVM’e uygundur. Binding mekanizmaları, Fowler’ın MVVM’e çok benzeyen Presentation Model (PM)’i anlatırken bir dezavantaj olarak vurguladığı “prezentasyon model’i ile view’ı senkronize edecek kod yazılması gerektiği” zorluğunu oldukça azaltır.

WPF ve İşletim Sistemleri Bağımlılığı

WPF, Microsoft.NET Framework 3.0 ile yayımlanmıştır. Bundan önce sürümü çıkan Windows XP SP2 ve Windows 2003 işletim sistemlerinde WPF uygulamalarını çalıştırabilmek için .NET Framework 3.0 veya WPF içeren daha yeni bir .NET Framework kurulumu yapılmalıdır. Daha yeni Windows Vista, Windows 7 veya Windows Server 2008’de WPF uygulamalarını çalıştırmak için bir kuruluma ihtiyaç duyulmaz. Burada dikkat edilmesi gereken nokta, sonradan .NET Framework kurulumu yapılması gereken iletim sistemlerinde, WPF’in, Windows tarafından kullanılan (geliştiricinin bilmesi veya müdahale etmesi gerekmeyan) bir emülator yardımıyla çalıştırıldığıdır. Emülasyon yardımıyla çalıştırılan WPF uygulamaları hafıza ve işlemci gib sistem kaynaklarını daha çok kullanır ve göreceli olarak (aynı donanımda) daha yavaş çalışır. Emülasyon yardımıyla çalışan uygulamalar ayrıca Windows Vista veya Windows 7 gibi işletim sistemlerinde emülasyonsuz çalışan kopyalarına göre çok ufak görsel farklar içerebilir. Tavsiye edebileceğim şey WPF uygulamanızı, güncel işletim sisteminizde test ettikten sonra, halen yaygın olarak kullanılan Windows XP kullanan bir makinaya da götürüp orada bir incelemeniz olacaktır.


MVVM


MVVM, yani Model View ViewModel, GUI ile iş mantığının entegre edilmesi yani sunum amaçlı düşünülmüş bir mimari tasarım kalıbıdır. MVVM, diğer mimari tasarım kalıplarına  göre daha yeni tanındığı için birçok şekilde yorumlanmıştır ve dolayısıyla farklı uygulamalara sahiptir.

MVVM, 3 tür bileşenin bir araya gelmesiyle oluşur: Model bir windows istemci için web servislerin veya iş mantığı bileşenlerinin ve verinin olduğu bloktur, View  görsel (işitsel?) kullanıcı deneyimi bileşenlerinin yer aldığı bloktur, daha çok (ve bu makalede de) WPF – XAML  bileşenleri kullanılarak uygulanır. ViewModel (VM), Model’in, View için gerekli biçime dönüştüğü, View’ın durumunun tutulduğu ve kullanıcı interaktivitesinin yönetildiği bileşenlerin bulunduğu bloktur.

Mimari Bloklar

MVVM’in bu kadar kısa sürede gündeme yayılmasını sağlayan ve Model View Controller (MVC), Model View Presenter (MVP) gibi diğer mimari kalıplardan sıyrılmasını sağlayan bileşen ve bence üçlemenin en önemli bileşeni ViewModel’dir. Model’in View’a yerleştirilmesi sırasında çeşitli şekillerde biçimlendirilmesini veya Model’de yeri olmayan sadece View ile ilgili bilgilerin (örneğin bir listenin görülebilir mi olduğunun) tutulmasını sağlayan, ayrıca MVC’deki Controller’ın görevlerini de üstlenen ViewModel bileşenleridir. Farklı MVC uygulamaları, MVC tanımında olmamasına rağmen ihtiyaç nedeniyle Controller’a ek olarak kendilerine has ViewModel implementasyonları kullanır.

Peki MVVM kullanmanın faydaları nelerdir, niçin bir WPF uygulamasında MVVM mimarisi uygulamalıyız?

MVVM, tasarımsal bileşenler ile kullanıcıların bunlar ile etkileşimi halinde çalışacak kodların iyi bir ayrımını sağlar. En basit izahı ile bir butonun nerede duracağı, boyutlarının ne olacağı gibi deklaratif tasarım özellikleri ile butona tıklandığında ne yapacağı gibi prosedürel tanımların farklı sınıflarda olmasını sağlar ve bu sayede test edilebilirliği arttırır. Butonun ne yapacağı ile ilgili kod bloğunun bulunduğu sınıfta (ki bir ViewModel sınıfından bahsediyoruz), GUI referensı olmadığı için, gerçek bir GUI olmadan dolayısıyla GUI testi gibi karmaşık konulara girmeden, tıklama olayını test edebilirsiniz. MVVM’in günümüz uygulamaları WPF ve Silverlight için tasarlandığı için, bu platformlarda geliştirdiğiniz uygulamalarda, Binding gibi platform mekanizmaları sayesinde el ile daha az kod yazarsınız. MVVM, Geliştirici-UX Tasarımcısı ayrımını desteklediği için yazılım geliştirme süreci paralel olarak dolayısıyla daha hızlı ilerler.

MVVM’in dezavantajları nelerdir diye sorulduğunda akla gelen ilk cevap John Gossman’ın da belirttiği üzere, WPF Binding’lerin yoğun kullanımı nedeniyle fazla veri girişi-gösterimi bir arada olan uygulamalarda yoğun hafıza tüketimi göze çarpar. MVVM, VM’den View’a referens verilemediği için ve code behind da kullanılmadığı için, Windows Forms’dan gelen kodlama alışkanlıklarına sahip geliştiriciler için ilk başta kısıtlayıcı ve zorlayıcı gelebilir, ancak ilerledikçe geliştiricilerin düşünce biçimi MVVM’e uyum sağlayacaktır.

MVVM Tasarım Kalıbı Tarihi Kökeni


İlk olarak Microsoft çalışanı John Gossman’ın bir blog postuyla tanınan MVVM, aslında kökleri Smalltalk’a dayanan eski bir kalıptır.  Bazıları, Martin Fowler’ın sunum kalıpları içinde MVP’yi ikiye ayırıp, bunlardan birini de Presentation Model (PM) olarak adlandırdığı içeriği MVVM’e çok benzer çalışmasını refere ederek,  MVVM’in aslında ismi değiştirilmiş PM tasarım kalıbı olduğunu iddia etse de, John Gossman, WPF Disciples adlı e-posta grubunda, MVVM teriminin Microsoft içinde eskiden Smalltalk ile çalışmış geliştiriciler tarafından kullanıldığını ancak kendisinin bunu sadece dışarıya açtığını belirtmiştir. Fowler ile yakın zamanlarda ve birbirlerinden habersiz olarak bu çalışmaları yaptığını da eklemiştir. Zaten Fowler, PM makalesinde aslında bu kalıbın Smalltalk’ta kullanılan Application Model’in aynısı olduğunu söyleyerek yine Smalltalk’a gönderme yapmıştır.

Pingbacks and trackbacks (4)+

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading