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

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

Συστατικό	Περιγραφή	Σκοπός
Model	Αντιπροσωπεύει δεδομένα και επιχειρηματικούς κανόνες.	Παρέχει δεδομένα, ανεξάρτητα από το View και το ViewModel.
View	Εμφανίζει το περιβάλλον χρήστη.	Είναι υπεύθυνο για την οπτικοποίηση και την αλληλεπίδραση με τον χρήστη.
ViewModel	Περιέχει τη λογική παρουσίασης, μεταφέρει δεδομένα από το Model στο View.	Συνδέει το View και το Model, περιέχει εντολές και ιδιότητες για το View.

Στο MVVM, η σύνδεση μεταξύ View και ViewModel πραγματοποιείται μέσω μηχανισμών δεσμεύσεων δεδομένων (data binding). Το View "εγγράφεται" στις αλλαγές των ιδιοτήτων του ViewModel, και το ViewModel ειδοποιεί το View για αυτές τις αλλαγές. Η αλληλεπίδραση του χρήστη με το View (π.χ., κλικ σε ένα κουμπί) ενεργοποιεί την κλήση εντολής στο ViewModel.

Πλεονεκτήματα:

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

Παράδειγμα της έννοιας του data binding (ψευδοκώδικας):

// ViewModel
class CounterViewModel {
  count = 0; // παρατηρήσιμη ιδιότητα

  increment() {
    this.count++; // ενεργοποιεί ειδοποίηση αλλαγής
  }
}

// View (απλοποιημένη αναπαράσταση)
<button onclick="viewModel.increment()">+</button>
<span data-bind="textContent: viewModel.count"></span> // δένει το περιεχόμενο του span με το viewModel.count