El patrón MVVM (Model-View-ViewModel) es un enfoque arquitectónico que facilita la separación de la lógica de negocio, la lógica de presentación y la interfaz de usuario en aplicaciones de software. Aunque es más comúnmente asociado con tecnologías como WPF y Silverlight, MVVM puede ser aplicado efectivamente en aplicaciones Angular para mejorar la mantenibilidad, escalabilidad y testabilidad del código. En este artículo, exploraremos cómo implementar el patrón MVVM en Angular y los beneficios que puede traer a tu proyecto.
¿Qué es MVVM?
MVVM se divide en tres componentes principales:
- Model (Modelo): Representa los datos y la lógica de negocio de la aplicación. En Angular, esto generalmente se refiere a los servicios y modelos de datos.
- View (Vista): Es la interfaz de usuario que presenta los datos. En Angular, esto se logra mediante los componentes y plantillas HTML.
- ViewModel (Modelo de Vista): Actúa como un intermediario entre el Modelo y la Vista. Gestiona la lógica de presentación y maneja las interacciones del usuario, actualizando el Modelo en consecuencia y reflejando los cambios en la Vista. En Angular, esto se puede implementar mediante controladores de componentes y servicios.
Implementación de MVVM en Angular
Para ilustrar cómo implementar MVVM en Angular, consideremos un ejemplo sencillo de una aplicación de lista de tareas.
1. Modelo (Model)
Primero, definimos nuestro modelo de datos y un servicio para gestionar las tareas.
// task.model.ts
export interface Task {
id: number;
title: string;
completed: boolean;
}
// task.service.ts
import { Injectable } from '@angular/core';
import { Task } from './task.model';
@Injectable({
providedIn: 'root',
})
export class TaskService {
private tasks: Task[] = [];
getTasks(): Task[] {
return this.tasks;
}
addTask(task: Task) {
this.tasks.push(task);
}
updateTask(task: Task) {
const index = this.tasks.findIndex(t => t.id === task.id);
if (index > -1) {
this.tasks[index] = task;
}
}
deleteTask(taskId: number) {
this.tasks = this.tasks.filter(t => t.id !== taskId);
}
}2. Vista (View)
La vista en Angular se define mediante componentes y plantillas HTML. Aquí, creamos un componente para mostrar la lista de tareas y un formulario para añadir nuevas tareas.
<!-- task-list.component.html -->
<div>
<h1>Task List</h1>
<ul>
<li *ngFor="let task of tasks">
{{ task.title }} <input type="checkbox" [(ngModel)]="task.completed" />
<button (click)="deleteTask(task.id)">Delete</button>
</li>
</ul>
<form (ngSubmit)="addTask()">
<input type="text" [(ngModel)]="newTaskTitle" name="title" required />
<button type="submit">Add Task</button>
</form>
</div>3. Modelo de Vista (ViewModel)
El ViewModel en Angular se puede implementar mediante el controlador del componente. Aquí, gestionamos la lógica de presentación y la interacción con el servicio de tareas.
// task-list.component.ts
import { Component, OnInit } from '@angular/core';
import { TaskService } from './task.service';
import { Task } from './task.model';
@Component({
selector: 'app-task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
tasks: Task[] = [];
newTaskTitle: string = '';
constructor(private taskService: TaskService) {}
ngOnInit(): void {
this.tasks = this.taskService.getTasks();
}
addTask() {
const newTask: Task = {
id: Date.now(),
title: this.newTaskTitle,
completed: false,
};
this.taskService.addTask(newTask);
this.newTaskTitle = '';
this.tasks = this.taskService.getTasks();
}
deleteTask(taskId: number) {
this.taskService.deleteTask(taskId);
this.tasks = this.taskService.getTasks();
}
}Beneficios de MVVM en Angular
- Separación de Concerns: Al separar la lógica de negocio, la lógica de presentación y la interfaz de usuario, el código se vuelve más modular y fácil de mantener.
- Testabilidad: Los componentes y servicios pueden ser testeados de manera independiente, mejorando la calidad del software.
- Reutilización de Código: La lógica de presentación puede ser reutilizada en diferentes vistas, reduciendo la duplicación de código.
- Mantenibilidad: Las actualizaciones y cambios en el código son más manejables debido a la clara separación de responsabilidades.
Ejemplos de Implementación de MVVM en Angular
A continuación, se presentan algunos ejemplos de cómo implementar MVVM en Angular.
1. Estructura Básica de MVVM en Angular
En Angular, el patrón MVVM se puede estructurar en los siguientes componentes:
- Modelo (Model): Representa los datos y la lógica de negocio.
- Vista (View): Es la interfaz de usuario que interactúa con el usuario final.
- Modelo de Vista (ViewModel): Contiene la lógica de presentación y maneja la interacción entre el modelo y la vista.
Ejemplo:
// Modelo (Model)
export class User {
constructor(public id: number, public name: string, public email: string) {}
}
// Servicio para manejar datos del usuario (Model)
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
private users: User[] = [
new User(1, 'John Doe', '[email protected]'),
new User(2, 'Jane Doe', '[email protected]')
];
getUsers(): User[] {
return this.users;
}
}
// Componente (ViewModel)
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user.model';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
users: User[];
constructor(private userService: UserService) {}
ngOnInit() {
this.users = this.userService.getUsers();
}
}
// Plantilla (View)
<!-- user-list.component.html -->
<div *ngFor="let user of users">
<h3>{{ user.name }}</h3>
<p>{{ user.email }}</p>
</div>En este ejemplo, User representa el modelo, UserService maneja los datos del modelo, UserListComponent actúa como el ViewModel, y user-list.component.html es la vista.
2. Enlace de Datos Bidireccional
El enlace de datos bidireccional es una característica clave en el patrón MVVM. Permite que los cambios en la vista se reflejen automáticamente en el ViewModel y viceversa.
Ejemplo:
// Componente (ViewModel)
import { Component } from '@angular/core';
@Component({
selector: 'app-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.css']
})
export class UserFormComponent {
name: string = '';
email: string = '';
onSubmit() {
console.log('User Submitted:', this.name, this.email);
}
}
// Plantilla (View)
<!-- user-form.component.html -->
<form (ngSubmit)="onSubmit()">
<label for="name">Name:</label>
<input type="text" id="name" [(ngModel)]="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" [(ngModel)]="email" name="email">
<button type="submit">Submit</button>
</form>En este ejemplo, el enlace bidireccional se logra utilizando [(ngModel)], lo que permite que los cambios en los campos de entrada se reflejen en las propiedades name y email del ViewModel.
3. Manejo de Estados y Acciones
El ViewModel no solo maneja los datos, sino también los estados y las acciones de la interfaz de usuario.
Ejemplo:
// Componente (ViewModel)
import { Component } from '@angular/core';
@Component({
selector: 'app-toggle-button',
templateUrl: './toggle-button.component.html',
styleUrls: ['./toggle-button.component.css']
})
export class ToggleButtonComponent {
isToggled: boolean = false;
toggle() {
this.isToggled = !this.isToggled;
}
}
// Plantilla (View)
<!-- toggle-button.component.html -->
<button (click)="toggle()">
{{ isToggled ? 'ON' : 'OFF' }}
</button>En este ejemplo, el estado isToggled en el ViewModel determina el texto del botón en la vista, y la acción toggle() cambia el estado.
Para ver un ejemplo de Login en Angular, da click aquí.
Librerías MVVM en Angular
En Angular, el framework ya proporciona muchas herramientas y características que permiten implementar este patrón de manera efectiva. Sin embargo, existen librerías adicionales que pueden facilitar aún más la implementación de MVVM en Angular. A continuación, se presentan algunas de las principales librerías que pueden ser útiles para este propósito.
1. NgRx
Descripción: NgRx es una colección de bibliotecas inspiradas en Redux que se utilizan para gestionar el estado en aplicaciones Angular. Aunque no es estrictamente una librería MVVM, sus conceptos y herramientas pueden ser utilizados para implementar un enfoque MVVM.
Características destacadas:
- Gestión de estado: Centraliza el estado de la aplicación en un solo lugar.
- Inmutabilidad: Facilita el manejo de estados inmutables.
- Efectos: Maneja operaciones asincrónicas y efectos secundarios.
- DevTools: Integración con herramientas de desarrollo para depuración y monitoreo.
Ejemplo de uso:
// Definición de acciones
import { createAction, props } from '@ngrx/store';
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction(
'[User] Load Users Success',
props<{ users: User[] }>()
);
// Definición de reducer
import { createReducer, on } from '@ngrx/store';
export const initialState: User[] = [];
const _userReducer = createReducer(
initialState,
on(loadUsersSuccess, (state, { users }) => [...users])
);
export function userReducer(state, action) {
return _userReducer(state, action);
}
// Uso en el componente (ViewModel)
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { User } from './user.model';
import { loadUsers } from './user.actions';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
users$: Observable<User[]>;
constructor(private store: Store<{ users: User[] }>) {
this.users$ = store.select('users');
}
ngOnInit() {
this.store.dispatch(loadUsers());
}
}2. Akita
Descripción: Akita es una librería de gestión de estado para aplicaciones Angular que sigue los principios de la programación reactiva y ofrece una manera sencilla de gestionar el estado de la aplicación.
Características destacadas:
- Estado basado en entidades: Facilita la gestión de colecciones de datos.
- Acciones y efectos: Soporte para operaciones asincrónicas.
- Inmutabilidad: Estado inmutable y controlado.
- DevTools: Integración con herramientas de desarrollo.
Ejemplo de uso:
// Definición de store
import { EntityStore, StoreConfig } from '@datorama/akita';
export interface User {
id: number;
name: string;
email: string;
}
export function createInitialState(): User {
return {
id: null,
name: '',
email: ''
};
}
@StoreConfig({ name: 'users' })
export class UserStore extends EntityStore<User> {
constructor() {
super(createInitialState());
}
}
// Servicio para manipular el estado
import { Injectable } from '@angular/core';
import { UserStore } from './user.store';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private userStore: UserStore, private http: HttpClient) {}
loadUsers() {
this.http.get<User[]>('/api/users').subscribe(users => {
this.userStore.set(users);
});
}
}
// Uso en el componente (ViewModel)
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { QueryEntity } from '@datorama/akita';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
users$ = this.userQuery.selectAll();
constructor(private userService: UserService, private userQuery: QueryEntity<User>) {}
ngOnInit() {
this.userService.loadUsers();
}
}3. MobX
Descripción: MobX es una librería para la gestión de estado reactivo que puede ser utilizada en aplicaciones Angular. Aunque originalmente diseñada para React, MobX se puede integrar con Angular para gestionar el estado de manera eficiente.
Características destacadas:
- Reactividad automática: Actualiza automáticamente la vista cuando cambia el estado.
- Simplicidad: Fácil de usar y aprender.
- Eficiencia: Optimiza las actualizaciones de la vista.
Ejemplo de uso:
// Definición del estado
import { observable, action } from 'mobx-angular';
export class UserStore {
@observable users: User[] = [];
@action
loadUsers(users: User[]) {
this.users = users;
}
}
// Servicio para manipular el estado
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserStore } from './user.store';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private userStore: UserStore, private http: HttpClient) {}
fetchUsers() {
this.http.get<User[]>('/api/users').subscribe(users => {
this.userStore.loadUsers(users);
});
}
}
// Uso en el componente (ViewModel)
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { UserStore } from './user.store';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
constructor(public userStore: UserStore, private userService: UserService) {}
ngOnInit() {
this.userService.fetchUsers();
}
}Conclusión
El patrón MVVM es una poderosa arquitectura para el desarrollo de aplicaciones en Angular. Facilita la separación de preocupaciones, lo que resulta en un código más limpio y mantenible. Los ejemplos presentados demuestran cómo implementar MVVM en Angular mediante el uso de componentes, servicios y el enlace de datos bidireccional. Adoptar este patrón puede mejorar significativamente la calidad y la escalabilidad de tus aplicaciones Angular.
Implementar el patrón MVVM en Angular puede proporcionar una estructura clara y eficiente para desarrollar aplicaciones complejas y escalables. Al seguir este enfoque, los desarrolladores pueden disfrutar de un código más limpio, mantenible y fácil de testear. Aunque puede requerir un poco más de esfuerzo inicialmente, los beneficios a largo plazo hacen que valga la pena la inversión.