¿Qué es el patrón de arquitectura MVVM?

MVVM (Model-View-ViewModel) es un patrón arquitectónico que estructura el código para dividir la lógica de la aplicación en tres componentes interrelacionados:

• Modelo: Representa los datos y la lógica de negocio. No depende de la interfaz de usuario.
• Vista: Muestra los datos del ViewModel y envía acciones del usuario (por ejemplo, clics) al ViewModel. La vista es pasiva y no contiene lógica de procesamiento de datos.
• ViewModel: Es un intermediario entre el Modelo y la Vista. Proporciona datos del Modelo en un formato adecuado para la visualización y procesa las acciones del usuario, actualizando el Modelo. El ViewModel a menudo utiliza mecanismos de enlace de datos (data binding) para actualizar automáticamente la Vista cuando cambian los datos.

Principios clave:

• Enlace bidireccional de datos: Los cambios en el ViewModel se reflejan automáticamente en la Vista, y viceversa (usando las herramientas apropiadas).
• Testabilidad: El ViewModel es fácil de probar de forma aislada, ya que no está ligado a la interfaz de usuario.
• Separación de responsabilidades: La clara separación de la lógica de presentación, datos y lógica de negocio simplifica el desarrollo y el mantenimiento.

Se usa frecuentemente en aplicaciones con UI declarativa, como Vue.js, React (con algunas variaciones), Angular.

Ejemplo de estructura más simple:

// Modelo
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})`; // Actualiza displayName para la Vista
  }
}

// Vista (aproximadamente, como podría verse en un framework declarativo)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Incrementar edad</button>
  </div>
</template>

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

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