Arquitectura de Software · Patrones arquitectónicos
Separar lo que sabe, lo que muestra y lo que decide.
Modelo
Vista
Controlador
Laboratorio: Notas del semestre · mvc-notas-lab.vercel.app
Dónde estamos
Paso 1
El código funciona, pero cada cambio rompe algo más.
Paso 2
Separar responsabilidades: cada pieza, una razón para cambiar.
Hoy
MVC: Modelo, Vista y Controlador.
Luego
Laboratorio: del espagueti al MVC.
Una buena arquitectura no hace que el software funcione: hace que cambiarlo sea barato.
Arquitectura de Software · Patrón MVC
El punto de partida
Una sola función: agregar()
Pantalla
n = document.getElementById('nombre').value
Regla + pantalla
if (total + p > 100) err.textContent = '…'
Datos
evals.push({ id: sig++, nombre: n })
Almacenamiento
localStorage.setItem('notas.v1', datos)
Pantalla
tabla.innerHTML = filas
Cambiar una regla obliga a tocar la pantalla.
No se puede probar sin abrir el navegador.
Dos personas no trabajan a la vez sin pisarse.
La misma regla se copia en varios sitios.
Fragmentos de espagueti.html, el punto de partida del laboratorio
Una pregunta de mantenimiento
veces aparece escrita la nota mínima «3.0» en la versión espagueti.
En el HTML
(nota mínima 3.0)
En el cálculo
nec = (3.0 - acum) / …
En el estado
if (acum >= 3.0) …
¿Cuántas líneas tocas para pasarla a 3.5? Si olvidas una, la pantalla dice una cosa y el cálculo, otra.
Arquitectura de Software · Patrón MVC
Definición
Una solución conocida y reutilizable a un problema de organización de todo un sistema.
Escala: clases y objetos
Observer, Strategy, Factory Method.
Escala: la estructura de la aplicación
MVC, capas, cliente-servidor.
MVC resuelve un problema concreto: separar la interfaz de la lógica del negocio.
Arquitectura de Software · Patrón MVC
Un poco de historia
Trygve Reenskaug lo formula en Xerox PARC, para el entorno Smalltalk.
Krasner y Pope lo describen paso a paso para Smalltalk-80.
El libro de la «Banda de los Cuatro» lo usa de ejemplo para Observer, Composite y Strategy.
Llega a la web: Rails (2004), Django (2005), ASP.NET MVC (2009), Laravel (2011).
Cambiaron los lenguajes y las pantallas; la idea de separar tres responsabilidades sigue en pie.
Reenskaug (1979) · Krasner y Pope (1988) · Gamma et al. (1994)
La idea central
Sabe
Los datos y las reglas del negocio.
No sabe
Que existe una pantalla.
Sabe
Cómo mostrar el estado y qué hizo el usuario.
No sabe
Ninguna regla de negocio.
Sabe
Traducir lo que hace el usuario en órdenes.
No sabe
Dibujar ni calcular.
En Notas del semestre: el Modelo guarda pesos y notas y sabe si aprobó; la Vista dibuja la tabla y el resumen; el Controlador recibe «agregar», «calificar» o «eliminar».
Arquitectura de Software · Patrón MVC
El recorrido
Paso 1
Escribe los datos y hace clic en «Agregar».
Paso 2 · Controlador
Convierte el texto del formulario en una orden para el Modelo.
Paso 3 · Modelo
Valida las reglas, cambia su estado y avisa que cambió.
Paso 4 · Vista
Lee el Modelo y muestra la fila nueva.
Si el Modelo rechaza la orden, lanza un error de reglas: el Controlador lo atrapa y le pide a la Vista que muestre el mensaje.
Arquitectura de Software · Patrón MVC
La regla de dependencias
ordena
ordena y registra eventos
lee
avisa, sin conocerla
Regla de oro: el Modelo no importa nada de la Vista ni del Controlador.
Arquitectura de Software · Patrón MVC · línea punteada: aviso por Observer, no una dependencia
Un patrón dentro del patrón
NotasModelo
suscribir(fn) {
this.#suscriptores.add(fn);
return () => this.#suscriptores.delete(fn);
}
#cambio() {
this.#almacen.guardar(this.evaluaciones);
for (const fn of this.#suscriptores) fn();
}
1 · Se suscriben
El Modelo guarda una lista de funciones.
2 · Algo cambia
Recorre la lista y las llama, una por una.
3 · No sabe quién escucha
Una tabla, un termómetro o una prueba.
Es el patrón de diseño Observer, que MVC usa por dentro.
Arquitectura de Software · Patrón MVC · extracto de la solución de referencia
En código
Modelo · modelo.js
agregar(datos) {
if (!pesoValido(datos.peso))
throw new ErrorDeReglas(
'Peso fuera de rango');
this.#lista.push(datos);
this.#cambio(); // avisa
}
Vista · vista.js
render() {
const r = modelo.resumen();
acumulado.textContent =
r.acumulado.toFixed(2);
estado.textContent =
TEXTO[r.estado];
}
Controlador · controlador.js
vista.alAgregar((datos) => {
try {
modelo.agregar(datos);
} catch (e) {
vista.mostrarError(
e.message);
}
});
Cada pieza cabe en una pantalla de código y tiene una sola razón para cambiar.
Extractos simplificados del laboratorio · Arquitectura de Software · Patrón MVC
Votación · 4 minutos
Voten para cada una: M · V · C
Arquitectura de Software · Patrón MVC
Cuando MVC sale mal
Síntoma
Valida y calcula; el Modelo queda casi vacío.
Arreglo
Mover cada regla al Modelo.
Síntoma
Un if (nota >= 3) dentro del código de la pantalla.
Arreglo
La Vista le pregunta al Modelo; no decide.
Síntoma
alert(), document o innerHTML dentro del Modelo.
Arreglo
El Modelo lanza errores; otros los muestran.
Síntoma
Solo datos y getters; las reglas viven en otro lado.
Arreglo
Que el Modelo proteja sus propias reglas.
En el laboratorio, las pruebas de arquitectura detectan los dos del medio.
Arquitectura de Software · Patrón MVC
La familia
| MVC · hoy | MVP | MVVM | |
|---|---|---|---|
| Quién media | Controlador | Presentador | ViewModel |
| La Vista… | Lee el Modelo y se suscribe | Es pasiva: el Presentador le da todo | Se enlaza al ViewModel (binding) |
| Suele verse en | Frameworks web de servidor | Escritorio y móviles | Interfaces con enlace de datos |
En la web, con servidor: petición → Controlador → Modelo → Vista (HTML).
Fowler lo resume así: bajo el nombre «MVC» conviven variantes muy distintas. Hoy fijamos una.
Arquitectura de Software · Patrón MVC · Fowler, «GUI Architectures»
En la práctica
| Modelo | Vista | Controlador | |
|---|---|---|---|
| Laravel · PHP | Eloquent · app/Models | Blade · resources/views | app/Http/Controllers |
| Spring MVC · Java | Entidades y servicios del dominio | Thymeleaf o JSP | Clases con @Controller |
| ASP.NET Core MVC · C# | Carpeta Models/ | Views/ (Razor) | Carpeta Controllers/ |
| Django · Python | models.py | templates/ | views.py |
Los nombres cambian; las tres responsabilidades siguen ahí.
Django lo llama MTV (Model · Template · View): lo que allí se llama «view» hace de controlador.
Arquitectura de Software · Patrón MVC · convenciones de carpetas de cada framework
La balanza
MVC no es un fin: es una forma de pagar menos cada vez que hay que cambiar.
Arquitectura de Software · Patrón MVC
Cómo saber si funcionó
npm test
39 pruebas del Modelo, sin abrir una sola página.
Parte 5B
El termómetro: un archivo nuevo y una línea en main.js.
Parte 5C
Solo almacen.js y main.js: el Modelo ni se entera.
Y una máquina lo vigila: pruebas de arquitectura que fallan si el Modelo usa el DOM o la Vista decide reglas.
Arquitectura de Software · Patrón MVC · npm run arquitectura
Manos a la obra · ≈ 2 h 20 min
| 0 · Preparación | 10 min |
| 1 · Leer el espagueti | 20 min |
| 2 · El Modelo | 30 min |
| 3 · La Vista | 20 min |
| 4 · El Controlador | 20 min |
| 5 · Tres cambios | 25 min |
| 6 · Medir y entregar | 15 min |
El enlace de su repositorio
npm test: 54 de 54 en verde
3 commits para los 3 cambios
ENTREGA.md completo
Ruta corta ≈ 100 min: partes 0 a 4
Guía: mvc-notas-lab.vercel.app/guia.html
Plantilla: github.com/xaviercardona-ops/mvc-notas-lab
Arquitectura de Software · Patrón MVC
Antes de empezar · 5 min
1
npm start
Abrir espagueti.html y agregar una evaluación: funciona.
2
<b>hola</b> como nombre
La pantalla lo interpreta como HTML: un olor, y un riesgo.
3
npm test
Las pruebas del Modelo: rojo en el esqueleto, verde en la solución.
4
npm run arquitectura
Escribir document en el Modelo a propósito y ver cómo falla.
Arquitectura de Software · Patrón MVC
Cierre
Lo que el Modelo no conoce, no se le rompe.
Cada razón para cambiar vive en una sola pieza.
Úsalo cuando la separación pague, no por moda.
Referencias
Reenskaug, T. (1979). Models–Views–Controllers. Informe técnico, Xerox PARC.
Krasner y Pope (1988). A cookbook for using the Model-View-Controller user interface paradigm in Smalltalk-80.
Gamma, Helm, Johnson y Vlissides (1994). Design Patterns. Addison-Wesley.
Buschmann et al. (1996). Pattern-Oriented Software Architecture, vol. 1. Wiley.
Fowler, M. GUI Architectures. martinfowler.com/eaaDev/uiArchs.html
Arquitectura de Software · Patrón MVC