Clean Code — Flutter MVVM Architecture

Sena Çelik
Oyun ve Uygulama Akademisi
4 min readMar 5, 2022

Merhaba, Oyun ve Uygulama Akademisi için ilk yazım olan Flutter ile ilgili bir konudan bahsetmek istiyorum. Üzerinde kafa patlattığım bir konu olan Clean Code ve Flutter Katmanlı Mimarisi hakkında en basit şekilde bir yol haritasını sunmaya çalışacağım.

Flutter ile kodlama yaptıkça dosyalarımın büyümesi, aynı şeyleri sürekli yazmak ve state yönetiminde zorluklar ile karşılaştığımda motivasyon kaybı yaşamaya başladım. Bunun üzerine temiz kod ile ilgili araştırmalar yapmaya karar verdim. Araştırmalarım sonucunda oluşan sorularım şu şekildeydi:

  • Clean code nedir?
  • Bu MVVM de neyin nesi?
  • Dosyalarımı nasıl klasörlemeliyim?
  • State Management nedir, projemizde neden ve nerede ihtiyacımız oluyor?

Bu sorularımın cevaplarını en basit şekilde aktarmaya çalışacağım.

Nedir Bu Clean Code?

Clean code; Kodun diğer yazılımcılar tarafından da kolay okunup, anlaşılması, üzerinde rahatlıkla geliştirme yapabilmeleri olarak tanımlanabilir.

Peki, iyi bilinen bazı yazılımcılar bu konu hakkında ne diyor?

Kodumun şık ve temiz olmasını seviyorum. Kodda mantık, hataların saklanmasını zorlayacak kadar düz; bağımlılıklar (dependency) bakımı kolaylaştıracak kadar minimal olmalı. Tüm istisnai durumlar (exceptions) ele alınmalı, performans optimale yakın olmalı.” Bjarne Stroustrup (C++’ın mucidi)

“Temiz kod basit ve açıktır. Temiz kod, iyi yazılmış bir düzyazı gibidir. Temiz kod, asla tasarımcının niyetini gizlemez, daha çok berrak soyutlamalarla ve düz kontrol satırlarıyla doludur.” Grady Booch (Object Oriented Analysis and Design with Applications kitabının yazarı)

Temiz kod için bildiğim birçok özelliği sıralayabilirim; ancak bir tanesi diğer tüm özellikleri kapsıyor. Temiz kod her zaman ona değer veren biri tarafından yazılmış gibi görünür.” Michael Feathers (Working Effectively with Legacy Code kitabının yazarı):

SOLID yazılım prensipleri; geliştirilen yazılımın esnek, yeniden kullanılabilir, sürdürülebilir ve anlaşılır olmasını sağlayan, kod tekrarını önleyen ve Robert C. Martin tarafından öne sürülen prensipler bütünüdür. Kısaltması Michael Feathers tarafından tanımlanan S.O.L.I.D. prensipleri hakkında değerli bulduğum bir yazıyı da buradan ulaşabilirsiniz.

Özetle; kodlarımın arasında kaybolmak istemiyorsak ve takımımızda bulunan insanlar ile uyumlu çalışmak istiyorsak Clean Code benimsememiz gerektiğinin kanısına varmış oldum.

Bu MVVM de neyin nesi?

Bu soru aslında kulak aşinalığım olan MVVM’den dolayı ortaya çıkmıştı ve ben de bu konunun neyin nesi olduğu üzerinde kafa yordum. Aslında MVMM’nin yalnız başına olmadığını ve bu yapının da abileri, ablaları ve kardeşleri olduğunu gördüğümde neden MVVM kullandığımızı da sormadan edemedim😅

Neden pattern (MVVM ve türevleri) kullanıyoruz?

  • Sorumlulukları ayrıştırmak
  • Kolay bir şekilde Unit Test yazılmasını sağlamak
  • Alt yapıyı koruyarak farklı platformlarda çalışmasını sağlamak
  • UI dan bağımsız uygulamalar geliştirmek

gibi faydaları olduğundan istediğimiz bir pattern’i seçebiliriz.

Hangi patternler var?

  • MVP, MVC, MVVM, VIPER (daha da fazlası)

Evet, artık bir takım kavramlar öğrendikleten sonra, sıfırdan bir Flutter proje açtık. Diyelim ki; Application Pattern olarak MVVM tercih ettik.

MVVM nedir?

MVVM bir projenin “sorumlulukların ayrıştırılması” esasına göre geliştirilmesi temeline dayanan bir tasarım kalıbı sunmaktadır. Sorumlulukların ayrıştırılması, yani meslek hayatımızda kullandığımız karşılığıyla Separation of Concerns(SoC).

Model

MVVM mimarisinde Model kavramı, uygulamanızın veri katmanını temsil ediyor. Verilerinizi lokalden veya gerçek zamanlı olarak çekeceğiniz sorguları barındırıyor. Bu katman, verilerinizi uygulamanıza sunmak için ViewModel katmanınız ile iletişim kuruyor. Verileriniz ViewModel katmanınızdan gönderilen bir isteğe cevap olarak geliyor.

View

View, adı üstünde, uygulamamızın görünümünü temsil ediyor. Kullanıcıların Widget’lar ile etkileşime geçtiği katman View katmanı olarak geçiyor. View içerisinde iş parçacıkları bulunmamalıdır. Kullanıcı bir eylem gerçekleştirdiğinde bu olay ViewModel’e iletiliyor, ViewModel gerekli tüm işlemleri yapıp işlemler tamamlandığında View’ı güncelliyor.

ViewModel

ViewModel, View ile Model arasındaki iletişimden sorumlu katman ViewModel katmanıdır. Yapılacak işler bu katmanda yapılmalıdır. ViewModel, verileri model katmanından aldığında bunu View katmanına iletiyor. Aynı şekilde View üzerinde bir olay gerçekleştiğinde bu olay ViewModel katmanına iletiliyorr, ViewModel eğer gerekliyse Model katmanından verileri talep ediyor ve işlemler tamamlanınca View’ı güncelliyor. Bir ViewModel birden fazla View’a hizmet edebiliyor.

Basit düzeyde bir proje olduğunda belki de tek bir model, view-model ve view ile projeyi yapılandırabiliriz. Kompleks, büyük bir proje olduğunda klasörleme yapmaya başlayacağız.

State Management nedir, projemizde neden ve nerede ihtiyacımız oluyor?

Flutter 💙 State Management Nedir? yazısına göz atabilirsiniz.

Flutter’ın resmi İnternet sayfasında önerdiği birçok state management yaklaşımı vardır. Bunlardan bazıları setState, Provider, Bloc, Mobx, Getx, GetIt, Redux, Riverpod gibi yaklaşımlardır.

MVVM yapısını kurduktan sonra View Modellerimizi seçtiğiniz State Management yaklaşımlarından birini kullanarak state yönetimini yapmaya başlayabilirsiniz.

Klasörleme projeden projeye farklılık gösterebilir. Bu yüzden sabit bir yapıdan bahsedemeyiz. Fakat MVVM yapısını nasıl kullandığımızı şu şekilde gösterebiliriz.

Daha büyük ve kompleks bir yapı ele alırsak;

Buraya ek olarak izlenilmesi ve okunulması gereken dökümanlar

Youtube videoları:

Okuma dökümanları:

--

--