Τι είναι το αρχιτεκτονικό μοτίβο MVVM;

MVVM (Model-View-ViewModel) είναι ένα αρχιτεκτονικό μοτίβο που δομεί τον κώδικα για να διαχωρίσει τη λογική της εφαρμογής σε τρία αλληλεξαρτώμενα συστατικά:

• Model: Αντιπροσωπεύει δεδομένα και επιχειρηματική λογική. Δεν εξαρτάται από το UI.
• View: Εμφανίζει τα δεδομένα από το ViewModel και στέλνει ενέργειες χρήστη (π.χ. κλικ) στο ViewModel. Το View είναι παθητικό και δεν περιέχει λογική επεξεργασίας δεδομένων.
• ViewModel: Λειτουργεί ως μεσάζων μεταξύ του Model και του View. Παρέχει δεδομένα από το Model σε μια μορφή κατάλληλη για εμφάνιση και επεξεργάζεται τις ενέργειες του χρήστη, ενημερώνοντας το Model. Το ViewModel συχνά χρησιμοποιεί μηχανισμούς δεσμεύσεων δεδομένων (data binding) για αυτόματη ενημέρωση του View όταν αλλάζουν τα δεδομένα.

Βασικές αρχές:

• Διπλής κατεύθυνσης δέσμευση δεδομένων: Οι αλλαγές στο ViewModel αντικατοπτρίζονται αυτόματα στο View, και το αντίστροφο (χρησιμοποιώντας τα κατάλληλα εργαλεία).
• Δοκιμασιμότητα: Το ViewModel είναι εύκολο να δοκιμαστεί απομονωμένα, καθώς δεν σχετίζεται με το UI.
• Διαχωρισμός ευθυνών: Ο σαφής διαχωρισμός της λογικής παρουσίασης, δεδομένων και επιχειρηματικής λογικής απλοποιεί την ανάπτυξη και τη συντήρηση.

Χρησιμοποιείται συχνά σε εφαρμογές με δηλωτικό UI, όπως Vue.js, React (με ορισμένες παραλλαγές), Angular.

Παράδειγμα απλής δομής:

// 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})`; // Ενημερώνουμε το displayName για το View
  }
}

// View (περίπου, πώς θα μπορούσε να μοιάζει σε ένα δηλωτικό framework)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Αύξηση ηλικίας</button>
  </div>
</template>

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

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