MVVM mimari deseni nedir?

MVVM (Model-View-ViewModel) mimari bir tasarım desenidir ve uygulamanın mantığını üç birbirine bağlı bileşene ayırmak için kodu yapılandırır:

• Model: Verileri ve iş mantığını temsil eder. UI'den bağımsızdır.
• View: ViewModel'den gelen verileri gösterir ve kullanıcı eylemlerini (örneğin tıklamalar) ViewModel'e iletir. View pasif olup veri işleme mantığı içermez.
• ViewModel: Model ile View arasında aracılık yapar. Model'den gelen verileri görüntüleme için uygun biçimde sağlar ve kullanıcı eylemlerini işler, Model'i günceller. ViewModel genellikle veri bağlama (data binding) mekanizmalarını kullanır ve veri değişikliklerinde View'yi otomatik olarak günceller.

Ana ilkeler:

• İki yönlü veri bağlama: ViewModel'deki değişiklikler otomatik olarak View'de yansır ve tersi (uygun araçlar kullanılarak).
• Test edilebilirlik: ViewModel, UI ile bağlantısı olmadığından izole edilerek test edilmesi kolaydır.
• Sorumlulukların ayrılması: Görünüm mantığı, veri ve iş mantığının net ayrımı, geliştirme ve bakımını kolaylaştırır.

Genellikle Vue.js, React (bazı varyasyonlarla), Angular gibi deklaratif UI içeren uygulamalarda kullanılır.

Basit bir yapı örneği:

// Model
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// ViewModel
class UserViewModel {
  constructor(user) {
    this.user = user;
    this.displayName = `${user.name} (${user.age})`;
  }

  incrementAge() {
    this.user.age++;
    this.displayName = `${this.user.name} (${this.user.age})`; // View için displayName güncelleniyor
  }
}

// View (yaklaşık, bir deklaratif framework'te nasıl görünebileceği)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Yaşı artır</button>
  </div>
</template>

<script>
import { User } from './model';
import { UserViewModel } from './viewModel';

export default {
  data() {
    return {
      userViewModel: new UserViewModel(new User('Ivan', 30))
    };
  }
}
</script>
*/